Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

📋 Chrome extension devtools to help debug forms.

License

NotificationsYou must be signed in to change notification settings

react-hook-form/devtools-extension

Repository files navigation

LogoScreenshot

Requirement

Usage

  1. Install extension inChrome Web Store
    Orbuild it yourself / download therelease file (then gotoDevelopment Runthird step)
  2. Installdevtools in your project
npm install @hookform/devtools -D
  1. AddDevTool component in your code
    This won't show devtool component anymore! Just for extension detect your form
  2. (Optional) Add custom form id:<DevTool control={control} />
    If you don't add it manually, it will be auto generated by uuid
  3. Enjoy!

Development

Install

Note

Usepnpm only

pnpm install

Run

  1. Runexample webpage

  2. Run extension in development mode

pnpm run dev

  1. Open Chrome and navigate tochrome://extensions

  2. EnableDeveloper mode

  3. ClickLoad unpacked button and select/dist

Messaging Flow

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
Loading

Production

  1. (Optional) Update package and manifest version
pnpm run update-version --<version>
  1. Build
pnpm run build
  1. Production files can be found in/dist
[8]ページ先頭
©2009-2025 Movatter.jp