- 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