javascript - How can I make React dev tools work locally?

How can I get React developer tools to work when I am developing on my local machine on the front-end only.

By front end, I mean I am loading an index.html with no server that I will later push to GitHub pages which are "static" sites.

I am getting this:

When I do push to GitHub the tools work fine when I open up in Google Chrome.

Why the difference and how do I fix it?

Obviously I have the tools installed and they work fine when I develop on the GitHub page.

How can I get React developer tools to work when I am developing on my local machine on the front-end only.

By front end, I mean I am loading an index.html with no server that I will later push to GitHub pages which are "static" sites.

I am getting this:

When I do push to GitHub the tools work fine when I open up in Google Chrome.

Why the difference and how do I fix it?

Obviously I have the tools installed and they work fine when I develop on the GitHub page.

Share Improve this question edited Jun 14, 2019 at 22:59 asked Jun 14, 2019 at 22:45 user11623835

It is like a plugin and could be found in Chrome Web Extensions – Shreyas Commented Jun 14, 2019 at 23:03
I have installed the plugin which works on remote hosts but not local hosts. – user11623835 Commented Jun 15, 2019 at 0:14

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

This works for me:

Chrome Extensions > React Developer Tools > Manage Extensions > Allow access to file URLS (enable this).
Reload the page.
Reopen Developer Tools.

source: https://github./facebook/react/tree/main/packages/react-devtools#the-react-tab-doesnt-show-up

Answering this part "You might need to use a local HTTP server":

Supposing that you have a static files for a react app. You can use Web Server for Chrome and choose the folder where you have your index.html file.

Another option mentioned here Deployment - Static Server is to run:

npm install -g serve

serve -s build where build is the folder where your index.html file exists.

If you run react app locally you have to

Install "react-devtools" (bcz chrome will not deduct it is a React App when you run in local)

npm install -g react-devtools
And add "React Developer Tools" extension to chrome

I just had to actually refresh the page for my local app for it to work.