search

naviapps / create-nw-react-app

Create NW.js React apps with no build configuration.
MIT License
144 stars 14 forks source link

Could you add React DevTools? #18

Open MatixYo opened 6 years ago

MatixYo commented 6 years ago

React Developer Tools is Chrome extension made for debugging React scripts. I think it would be good if you could enable it in create-nw-react-app. It's available here.

naviapis commented 6 years ago

It seems to be usable. Please refer to here. https://nwjs.readthedocs.io/en/nw24/For%20Users/Debugging%20with%20DevTools/

frankmayer commented 6 years ago

Hi, and thank you for creating this tool.

So far I am experimenting with create-nw-react-app and following the instructions at https://nwjs.readthedocs.io/en/nw24/For%20Users/Debugging%20with%20DevTools/#using-devtools-extensions to get the react-devtools working, but they won't connect.

Here's what I did:

I copied the react-devtools chrome-extension to a specified path, and in that path's manifest.json I did add the chrome-extension part to the permissions array, like this: "permissions": [ "chrome-extension://*", "file:///*", "http://*/*", "https://*/*" ],

I have also put the path of the extension into the package.json file of the project like this: "chromium-args": "--load-extension=/home/frank/nw_react_devtools_test/3.3.2_0/",

I am starting the project with npm start.

The React tab appears, which means, the extension is loading correctly. But I am getting the "Connecting to React…" message in the React tab without the desired result. Not sure though, if I am missing something or if this is a bug.

Can anyone shed a light? Thank you very much.

hexianzhi commented 5 years ago

  1. Download the react tool with chrome app, find the source files and put it in to you project. image

  2. In package.json, add 'chromium-args': '--load-extension=react-devtools'