- react-hook-form >=
7.33.1 - @hookform/devtools >=
4.2.2
- Install extension in Chrome Web Store
Or build it yourself / download the release file (then goto Development Run third step) - Install devtools in your project
npm install @hookform/devtools -D- Add DevTool component in your code
This won't show devtool component anymore! Just for extension detect your form - (Optional) Add custom form id:
<DevTool id="YourFormId" control={control} />
If you don't add it manually, it will be auto generated by uuid - Enjoy!
Note
Use pnpm only
pnpm install-
Run example webpage
-
Run extension in development mode
pnpm run dev-
Open Chrome and navigate to
chrome://extensions -
Enable Developer mode
-
Click Load unpacked button and select
/dist
sequenceDiagram participant Webpage participant Content Script participant Background participant Devtools participant Popup Background->>Background: Cleanup Cache Content Script->>Webpage: INIT Note left of Webpage: Browser has devtools extension Webpage->>Content Script: WELCOME Content Script->>Background: WELCOME Note right of Background: Webpage has rhf Background->>Background: Cache enabled tab par Popup->>Background: get-enable-status Background-->>Popup: Enable Status (Callback) and Devtools->>Background: get-enable-status Background-->>Devtools: Enable Status (Callback) end loop Webpage->>Content Script: UPDATE Content Script->>Background: UPDATE Note over Webpage,Background: Data end Background->>Background: Cache data loop Every 100ms Devtools->>Background: get-devtool-data Background-->>Devtools: Data (Callback) end Background->>Background: Cleanup Cache - (Optional) Update package and manifest version
pnpm run update-version -- <version>- Build
pnpm run build - Production files can be found in
/dist