https://github.com/react-hook-form/devtools-extension
📋 Chrome extension devtools to help debug forms.
https://github.com/react-hook-form/devtools-extension
chrome-extension devtools react react-hook-form
Last synced: about 1 month ago
JSON representation
📋 Chrome extension devtools to help debug forms.
- Host: GitHub
- URL: https://github.com/react-hook-form/devtools-extension
- Owner: react-hook-form
- License: mit
- Created: 2022-06-11T11:05:11.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-19T22:58:24.000Z (7 months ago)
- Last Synced: 2025-04-21T01:29:59.225Z (about 2 months ago)
- Topics: chrome-extension, devtools, react, react-hook-form
- Language: TypeScript
- Homepage: https://chrome.google.com/webstore/detail/react-hook-form-developer/cangfmbpembbepmmechnanpmddndpaji
- Size: 149 KB
- Stars: 27
- Watchers: 4
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://react-hook-form.com)
## Requirement
- [react-hook-form](https://github.com/react-hook-form/react-hook-form) >= `7.33.1`
- [@hookform/devtools](https://github.com/react-hook-form/devtools) >= `4.2.2`
## Usage
1. Install extension in [Chrome Web Store](https://chrome.google.com/webstore/detail/react-hook-form-developer/cangfmbpembbepmmechnanpmddndpaji)
_Or [build it yourself](#production) / download the [release](https://github.com/react-hook-form/devtools-extension/releases) file (then goto [Development Run **third step**](#run))_
2. Install [devtools](https://github.com/react-hook-form/devtools) in your project
```bash
npm install @hookform/devtools -D
```
3. Add [DevTool component](https://github.com/react-hook-form/devtools#quickstart) in your code
_This won't show devtool component anymore! Just for extension detect your form_
4. (Optional) Add custom form id: ``
_If you don't add it manually, it will be auto generated by uuid_
5. Enjoy!
## Development
### Install
> [!NOTE]
> Use [pnpm](https://pnpm.io/) only
```bash
pnpm install
```
### Run
1. Run [example webpage](https://github.com/react-hook-form/devtools/tree/master/example)
2. Run extension in development mode
```bash
pnpm run dev
```
3. Open Chrome and navigate to `chrome://extensions`
4. Enable **Developer mode**
5. Click **Load unpacked** button and select `/dist`
### Messaging Flow
```mermaid
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
```
## Production
1. (Optional) Update package and manifest version
```bash
pnpm run update-version --
```
2. Build
```
pnpm run build
```
3. Production files can be found in `/dist`