In Chrome developer tools, under react tab it shows "looking for react" and freezes there

Question

I tried to debug the react application, after running the application and moving to the React tab on Chrome Developer tools, It shows

"Looking for React"

and freezes there, nothing shows up. But the application executes successfully and I am able to work on it, What can be the problem?

Answer 1

I had a similar problem, only the React tab in the dev tools did work. My solution was to:

• Open the Chrome extensions tab, chrome://extensions/

• Disable the React dev tool

• Go to page where the React is not working

• Close devtools

• Reload web page and the chrome extension page (I think this checks for updates, not sure)

• Turn on React Developer Tools

• Re-open the React tool on the web page and it should be working again.

Answer 2

This Happens when you do a server side rendering, So the React code is not available to the browser, try to render it on the client side. Ex: in Webpack, If you are running your application in the dev server mode like

webpack-dev-server

you will see "Looking for React" on the React tab of the Chrome Developer tools change your url from

localhost://8080/webpack-dev-server/

to

localhost://8080/

your React tab loads, I have shown it for webpack, This is common for all run it on the client side.