npm install @hookform/devtools -D- Add
<Devtool control={control}>in your codeThis won't show devtools component anymore! Just for extension detect your form.
- Enjoy!
Note use pnpm only
# extension
pnpm install
# example website
cd example
pnpm install- Start example website
cd example
pnpm run dev- Start 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