chrome devtools source not inspectable after backtick

Question

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:

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

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??

Answer 1

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