search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.76k stars 26.87k forks source link

Chrome Dev Tools not showing variable values on mouseover #12754

Open AdrianSchmidt91 opened 2 years ago

AdrianSchmidt91 commented 2 years ago

Hi,

I am trying to debug my cra-application (typescript) with chrome dev tools.

The normal behavior was to hover over a variable to see it's value(s) inside the sources tab. That seems to be not working with react-scripts@5.0.1

If I downgrade to react-scripts 4.0.3 it is working again.

5.0.1 behavior: image

4.0.3 behavior: image

Am I doing something wrong?

To reproduce you can just create a new react-app using create-react-app --template typescript and test. Then just downgrade the react-scripts version.

devBenWolf commented 2 years ago

Had you noticed this behavior in another browser like Firefox? The developer edition has robust dev tools.

AdrianSchmidt91 commented 2 years ago

Nope, I'm just using chrome in latest version

devBenWolf commented 2 years ago

I'm not in front of a workstation to check, but if you find it's working in another browser's devtools then I'm going to go out on a limb and suggest it's not a you problem, it's a package/Chrome problem.

AdrianSchmidt91 commented 2 years ago

In Firefox it works fine.

I just found out that if I manually write "debugger;" inside my code, the hover function for variables works inside chrome after hot reloading.

Using the chrome debugger does not work.