React Dev Tools doesn't work about react

[akchauhan2]

[Solved] I experienced the same issue where the component and profiler tabs were missing, and I couldn't open the React DevTools. I tried reinstalling React DevTools and other extensions, but the problem persisted. Finally, I found a solution which worked for me. Simply open the developer tools (F12) and press the F1 key while in the developer tools. This will open the DevTools Settings. Navigate to the Preference tab, scroll to the bottom, and click "Restore default and reload." Now reload the chrome and open a React based site, You'll get components and profiler. thank me later.

[ajpinto]

I am also having this issue. On the latest stable chrome build 118.0.5993.70. I've followed all troubleshooting steps above, I've removed and reinstalled, restarted chrome, allowed access to file URLs. Nothing works.

[ajpinto]

Same here, Chrome Version 118.0.5993.88 (Official Build) (arm64), React Developer Extension is not working, I need the profiler, Please help. please....

i’ve been able to get the extension to work in incognito. you have to activate it in the advanced extension settings, then it shows up. it’s not a fix but it’s a workaround until we can get the issue solved.

[hoxyq]

Few possible advices here:

1. Make sure you've granted access "On all sites" for the extension. As its stated in #27564
2. If you have React DevTools' popup working, but its panels are not available in Chrome DevTools, try restoring Chrome DevTools settings to defaults - #27564 (comment)

[ajpinto]

anyone experience the same issue again with Chrome Version 119.0.6045.105 (Official Build) (arm64) ? Now even Incognito mode is not working. Giving up chrome, I am using other browser now, But hopefully this can be fixed in Chrome

@hocktoh89 following @hoxyq's notes, i reset the chrome dev tools settings to default and react devtools returned.

[rizfanradya]

Here are some steps you can try to troubleshoot this issue:

1. Make Sure You Have a React Project: Ensure that you indeed have a React application running on localhost. React DevTools only work on applications that use React.

2. Update React DevTools: Make sure you have updated React DevTools to the latest version. Go to the Chrome Web Store, search for "React Developer Tools," and update the extension if necessary.

3. Update Chrome: Ensure that you are running the latest version of Google Chrome. Go to "chrome://settings/help" to check for updates and install them if available.

4. Disable Other Extensions: Some Chrome extensions can interfere with React DevTools and cause issues. Disable other extensions you have to see if the problem persists.

5. Try Incognito Mode: Try running your application in Chrome's incognito mode. Sometimes, unusual extensions or settings can cause issues.

6. Disable Cache: Open DevTools by right-clicking and selecting "Inspect" on your application in Chrome. Then, open the "Network" tab and check the "Disable cache" option. Refresh the page and see if React DevTools start working.

7. Check Console for Errors: Open Chrome DevTools (Ctrl + Shift + J or Cmd + Option + J on Mac), then check the "Console" tab to see if there are any errors related to React DevTools.

8. Check for Variable Name Conflicts: Ensure you are not using variables or names that clash with those used by React DevTools in your code, as this can cause conflicts.

9. Clear Cache and Cookies: Try clearing the cache and cookies for your localhost website and refresh the page.

10. Reinstall React DevTools: If none of the above steps work, you may need to try uninstalling and reinstalling React DevTools.

[elinadzhelilovasfcc]

Can you please share a code sandbox where this can be reproduced? You can also try following the tips suggested above.

Here are some steps you can try to troubleshoot this issue:

1. Make Sure You Have a React Project: Ensure that you indeed have a React application running on localhost. React DevTools only work on applications that use React.
2. Update React DevTools: Make sure you have updated React DevTools to the latest version. Go to the Chrome Web Store, search for "React Developer Tools," and update the extension if necessary.
3. Update Chrome: Ensure that you are running the latest version of Google Chrome. Go to "chrome://settings/help" to check for updates and install them if available.
4. Disable Other Extensions: Some Chrome extensions can interfere with React DevTools and cause issues. Disable other extensions you have to see if the problem persists.
5. Try Incognito Mode: Try running your application in Chrome's incognito mode. Sometimes, unusual extensions or settings can cause issues.
6. Disable Cache: Open DevTools by right-clicking and selecting "Inspect" on your application in Chrome. Then, open the "Network" tab and check the "Disable cache" option. Refresh the page and see if React DevTools start working.
7. Check Console for Errors: Open Chrome DevTools (Ctrl + Shift + J or Cmd + Option + J on Mac), then check the "Console" tab to see if there are any errors related to React DevTools.
8. Check for Variable Name Conflicts: Ensure you are not using variables or names that clash with those used by React DevTools in your code, as this can cause conflicts.
9. Clear Cache and Cookies: Try clearing the cache and cookies for your localhost website and refresh the page.
10. Reinstall React DevTools: If none of the above steps work, you may need to try uninstalling and reinstalling React DevTools.

I tried all of them. Also, I tried Firefox and the same result, it doesn't work

[gur22-09]

faced a similar issue where the react dev tools were not functioning.

Fix 👇
Try to update Chrome on the latest stable version and re-launch Chrome, it worked for me
My Chrome version - Version 116.0.5845.179 (Official Build) (arm64)

[shubhankarval]

@gur22-09 is right, i also went through this before, it was very frustrating. Usually the answer in these cases is to upgrade the browser version, or make sure that the version of React DevTools is compatible with your React version.

[hoxyq]

Can you please share a code sandbox where this can be reproduced? You can also try following the tips suggested above.

[hoxyq]

Can you please share a code sandbox where this can be reproduced? You can also try following the tips suggested above.

Here are some steps you can try to troubleshoot this issue:

1. Make Sure You Have a React Project: Ensure that you indeed have a React application running on localhost. React DevTools only work on applications that use React.
2. Update React DevTools: Make sure you have updated React DevTools to the latest version. Go to the Chrome Web Store, search for "React Developer Tools," and update the extension if necessary.
3. Update Chrome: Ensure that you are running the latest version of Google Chrome. Go to "chrome://settings/help" to check for updates and install them if available.
4. Disable Other Extensions: Some Chrome extensions can interfere with React DevTools and cause issues. Disable other extensions you have to see if the problem persists.
5. Try Incognito Mode: Try running your application in Chrome's incognito mode. Sometimes, unusual extensions or settings can cause issues.
6. Disable Cache: Open DevTools by right-clicking and selecting "Inspect" on your application in Chrome. Then, open the "Network" tab and check the "Disable cache" option. Refresh the page and see if React DevTools start working.
7. Check Console for Errors: Open Chrome DevTools (Ctrl + Shift + J or Cmd + Option + J on Mac), then check the "Console" tab to see if there are any errors related to React DevTools.
8. Check for Variable Name Conflicts: Ensure you are not using variables or names that clash with those used by React DevTools in your code, as this can cause conflicts.
9. Clear Cache and Cookies: Try clearing the cache and cookies for your localhost website and refresh the page.
10. Reinstall React DevTools: If none of the above steps work, you may need to try uninstalling and reinstalling React DevTools.

I tried all of them. Also, I tried Firefox and the same result, it doesn't work

Unfortunately, this is not enough to understand what is causing the problem.
Can you please share some reproducible example or describe how is the application loading React?

[escaper01]

what worked for me :

• update your browser
• disable all extensions except react dev tool and close your browser
• once you will open it again you find that it's working properly
• enable all the previous extensions
  and voila

[hoxyq]

Please reopen once you have something that will help reproduce this problem.

[hocktoh89]

Same here, Chrome Version 118.0.5993.88 (Official Build) (arm64), React Developer Extension is not working, I need the profiler, Please help. please....

[hocktoh89]

Same here, Chrome Version 118.0.5993.88 (Official Build) (arm64), React Developer Extension is not working, I need the profiler, Please help. please....

i’ve been able to get the extension to work in incognito. you have to activate it in the advanced extension settings, then it shows up. it’s not a fix but it’s a workaround until we can get the issue solved.

Thanks @ajpinto , it works in Incognito.

[hocktoh89]

anyone experience the same issue again with Chrome Version 119.0.6045.105 (Official Build) (arm64) ?
Now even Incognito mode is not working. Giving up chrome, I am using other browser now, But hopefully this can be fixed in Chrome

[randdom-addvice]

[Solved] I experienced the same issue where the component and profiler tabs were missing, and I couldn't open the React DevTools. I tried reinstalling React DevTools and other extensions, but the problem persisted. Finally, I found a solution which worked for me. Simply open the developer tools (F12) and press the F1 key while in the developer tools. This will open the DevTools Settings. Navigate to the Preference tab, scroll to the bottom, and click "Restore default and reload." Now reload the chrome and open a React based site, You'll get components and profiler. thank me later.

This worked for me!

[kaiyuncheng]

[Solved] I experienced the same issue where the component and profiler tabs were missing, and I couldn't open the React DevTools. I tried reinstalling React DevTools and other extensions, but the problem persisted. Finally, I found a solution which worked for me. Simply open the developer tools (F12) and press the F1 key while in the developer tools. This will open the DevTools Settings. Navigate to the Preference tab, scroll to the bottom, and click "Restore default and reload." Now reload the chrome and open a React based site, You'll get components and profiler. thank me later.

Thank you so much