use with react devtools?

Gvozd commented 4 years ago

In сhrome, extensions not working on extension page(e.g. options.html) And i dont know a way to make them work

How do you use React Devtools? Is there some easy way?

I'm trying to use react-devtools-inline for now, and I will share the solution later, if there are no simpler/convenient solutions

abhijithvijayan commented 4 years ago

What do you mean by extensions are not working on options page?

Gvozd commented 4 years ago

In Chrome

I install react devtools extension https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Go to chrome-extension://poejihmdinohpgnbcpfidehmnnakjkfn/options.html of developed extension
F12 - has no react devtool tabs in chrome devtools

Gvozd commented 4 years ago

@abhijithvijayan Do you have any ideas how to use react devtools for debug plugin?

abhijithvijayan commented 4 years ago

Let me check it out

abhijithvijayan commented 4 years ago

@Gvozd I have looked into the issue and noticed that it is due to restrictions put by the browser. So you have to run standalone version of dev tools and use it instead.

Solution:

ref: https://www.npmjs.com/package/react-devtools#usage-with-react-dom

Install react-devtools globally

# globally
yarn global add react-devtools

# or locally
yarn add --dev react-devtools

create a file named react-devtools-script-html-plugin at repository root (i will consider publishing this as a library)

  const HtmlWebpackPlugin = require('html-webpack-plugin');

  const PLUGIN_NAME = 'react-devtool-script-html-plugin';

  /**
   *  react-devtool-script-html-plugin
   *
   *  This plugin injects script needed by standalone version of React DevTools in the HTMLs generated by html-webpack-plugin
   *
   *  @author   abhijithvijayan <abhijithvijayan.in>
   *  @license  MIT License
   */
  class ReactDevtoolsScriptHTMLPlugin {
    apply(compiler) {
      compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
        HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
          PLUGIN_NAME,
          (data, cb) => {
            const isProduction = process.env.NODE_ENV === 'production';
            if (!isProduction) {
              // inject script as the very first <script> tag in the <head> of html page
              data.html = data.html.replace(
                '<head>',
                '<head>\n<script src="http://localhost:8097"></script>'
              );
            }

            cb(null, data);
          }
        );
      });
    }
  }

  module.exports = ReactDevtoolsScriptHTMLPlugin;

Update webpack.config.js

const ReactDevtoolsScriptHTMLPlugin = require('./react-devtools-script-html-plugin');

# add the new plugin
plugins: [

      # place this after all the HtmlWebpackPlugin definitions
      // inject devtools script if not in production
      new ReactDevtoolsScriptHTMLPlugin(), 
]

Update manifest.json

# remove
"content_security_policy": "script-src 'self'; object-src 'self'",

# add these two lines instead
"__dev__content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'",
"__prod__content_security_policy": "script-src 'self'; object-src 'self'",

Run react-devtools in the console

# or if you are installing locally
# add this script to package.json

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

# and run
yarn react-devtools

Launch chrome extension in browser(restart extension chrome://extensions if already running)
Voila!

abhijithvijayan commented 4 years ago

Closing for now. feel free to reopen if issue still persist.

abhijithvijayan commented 4 years ago

@Gvozd did it work for you?

Gvozd commented 4 years ago

@abhijithvijayan yes, it works, but not fully It lacks an item selection button on the page, and navigation to the source code of the component

I experimented with the react-devtools-inline, and opening it in another tab In this case "select an element" worked But this module requierd experimental versions of react/react-dom But this problem can be solved

But it is still less convenient than debugging with an extension, as for regular sites.

abhijithvijayan commented 2 years ago

updated the answer here to use a custom webpack plugin i wrote now. works fine in my project.

abhijithvijayan / web-extension-starter

use with react devtools? #51