Manage Extension Drop Down Menu Item Highlighted

React Dev Tools For Local Files

If you have tried to write your React components without a local web server, you may have encountered an issue where the React dev tools cannot access local files.

In these instances, there won’t be an error in your console, but you will see a message like the following:

Download the React DevTools for a better development experience: might need to use a local HTTP server (instead of file://):
Missing React DevTools message

To get the React Dev Tools working with local files, you need to allow the extension to have access to them. This is done in the Manage Extension section of the developer tools. You can access this by clicking the three vertical dots (vertical ellipsis?) next to the extension name. You will get a drop-down menu like the one below where you can click the Manage Extension menu item.

Drop down menu for Chrome Extension with the menu item titled "Manage Extension" highlighted

Once you click this, you will be presented with a list of options for the extension. You are looking for the option Allow Access to file URLs. If you turn this on, you can use the developer tools on local React components.

Chrome extension setting "Allow access to file URLs"

You can find more information on the React dev tools extension, precisely this issue, here.

Interestingly, in Firefox (on macOS, in my case), I didn’t have to add any permissions to allow the dev tools to work with local files. There is no option to allow dev tools to work with local files, so it seems intentional that it works out of the box with no user feedback required.

Don’t forget to check out some of our other articles on React:

Thanks for reading!

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments