Ad

When Developing Chrome Extension, Chrome React Devtools Doesn't Show Up

- 1 answer

I am debugging my chrome extension pop page, and open it in uri : chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/popup.html

This page is using reactjs, but the react devtools is not showing. Is it by design?

Ad

Answer

You can use React Dev Tools but you will have to use the standalone version to work in browser extension (because of CSP restrictions). Run this in your console

$ npm install -g react-devtools

and add this to you manifest.json

"content_security_policy": "connect-src ws://localhost:8097"

Now run react-devtools
Don't forget to reload your extension.

P.S.
If you don't want to install react-devtools globally you can run npm install --save-dev react-devtools from your project and then add to package.json

"scripts": {
   "react-devtools": "react-devtools"
}

And run npm run react-devtools

Ad
source: stackoverflow.com
Ad