7

If I stop my javascript code in a breakpoint and try to inspect certain part of the code like a variable or a function by hovering over, it gives a popup with its value like in the screenshot below:

enter image description here

But If I use es6 template strings in my code like this:

options.push(<option key={`traveller-age-option-${i}`}>{i}</option>);

Then the entire code below the backtick character (`) becomes red and if I hover over it - I'm not able to inspect any values - nothing happens - it is treated as a string

enter image description here

Because of this I have to manually go to console and type the value - not hover and see it's value.

How to fix this?? Is there a webpack option or some source-map or any chrome plugin which helps with this??

p u
  • 1,395
  • 1
  • 17
  • 30
Probosckie
  • 1,585
  • 4
  • 25
  • 40

1 Answers1

2

There's a workaround using comments to test as explained in this other question

Seems to be a bug known by the Chromium team and they've been working on it for quite a while. Issue here

Hope that workaround makes your life a bit easy while debugging

samus24
  • 56
  • 6