Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

use with react devtools? #51

Closed
Gvozd opened this issue Nov 3, 2020 · 9 comments
Closed

use with react devtools? #51

Gvozd opened this issue Nov 3, 2020 · 9 comments
Assignees
@abhijithvijayan
Labels
impact: med minor perf improvements, fix broad userbase issues status: awaiting author response Additional information has been requested from the author status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer.

Comments

@Gvozd
Copy link
Contributor

Gvozd commented Nov 3, 2020

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
Copy link
Owner

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

@abhijithvijayan abhijithvijayan added status: needs more info Needs triaging and reproducible examples or more information to be resolved status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. type: question or discussion Issue discussing or asking a question labels Nov 3, 2020
@Gvozd
Copy link
Contributor Author

Gvozd commented Nov 3, 2020 •
edited
Loading

In Chrome

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

@Gvozd
Copy link
Contributor Author

Gvozd commented Nov 14, 2020

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

@abhijithvijayan
Copy link
Owner

Let me check it out

@abhijithvijayan abhijithvijayan added impact: med minor perf improvements, fix broad userbase issues status: awaiting author response Additional information has been requested from the author status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. and removed status: needs more info Needs triaging and reproducible examples or more information to be resolved status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. type: question or discussion Issue discussing or asking a question labels Nov 15, 2020
@abhijithvijayan
Copy link
Owner

abhijithvijayan commented Nov 15, 2020 •
edited
Loading

@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
Copy link
Owner

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

@abhijithvijayan abhijithvijayan changed the title How to use react devtools? use with react devtools? Nov 15, 2020
@abhijithvijayan abhijithvijayan pinned this issue Nov 15, 2020
@abhijithvijayan
Copy link
Owner

@Gvozd did it work for you?

@Gvozd
Copy link
Contributor Author

Gvozd commented Nov 15, 2020

@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
image

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.

@bumi bumi mentioned this issue Apr 8, 2021
Closed
@abhijithvijayan abhijithvijayan self-assigned this Dec 2, 2021
@abhijithvijayan
Copy link
Owner

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

@abhijithvijayan abhijithvijayan unpinned this issue Jan 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@abhijithvijayan abhijithvijayan

Labels
impact: med minor perf improvements, fix broad userbase issues status: awaiting author response Additional information has been requested from the author status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Gvozd @abhijithvijayan