Chrome Dev Tools not showing variable values on mouseover

[AdrianSchmidt91]

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:

4.0.3 behavior:

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]

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

[AdrianSchmidt91]

Nope, I'm just using chrome in latest version

[devBenWolf]

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]

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.