Install extension from Chrome Web Store (works for Chrome, Brave, Opera and Edge)
Install extension from Firefox Add-ons
Extension should work automatically dev mode in all modern stacks (NextJS, Create React App, Vite, etc). They automatically include babel-preset-react which includes babel-plugin-transform-react-jsx-source. Non-babel stacks use similar alternatives. If you don't have babel-plugin-transform-react-jsx-source, you should set it up manually.
It doesn't show any "bouding boxes" when holding alt/option and moving mouse on the page. (plus you might see error in extension's Popup)
- Make sure you are running your project in development mode.
- If you have custom webpack config or anything using Babel make sure you have babel-preset-react preset or babel-plugin-transform-react-jsx-source plugin.
- You may check
process.env.NODE_ENVif it isdevelopment
When I click on a component's bounding box, it doesn't go to editor
- It is possible that your editor doesn't have registered URL handler. Check browser console for errors. If you get something like
Failed to launch 'vscode://...24:11' because the scheme does not have a registered handler., try reinstalling your editor.
run pnpm dev for development.
run pnpm build to build the extension.
To develop of contribute to this project continue here