倒引号后Chrome DevTools源代码不可检查

Question

如果我在断点处停止我的javascript代码，并尝试通过悬停来检查代码的某个部分，比如变量或函数，它会弹出一个窗口显示其值，就像下面的截图一样：

但是如果我在我的代码中使用es6模板字符串，像这样：

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

然后反引号字符（`）下面的整个代码变为红色，如果我悬停在上面-我无法检查任何值-什么也不会发生-它被视为字符串

因此，我必须手动进入控制台并输入该值，而不能悬停查看其值。

如何解决这个问题？ 有没有webpack选项或某些源地图或任何chrome插件可以帮助解决这个问题？

- Probosckie

---

请注意，这个字符被称为反引号，这个（~）是波浪号。 - Marty

Answer 1

使用注释作为测试的方法可以解决这个与ES6字符串字面量和TypeScript相关的问题，具体解释可以参考这个问题的回答。

据Chromium团队所知，这是一个已知的错误，他们一直在努力修复它。您可以在这里查看详细信息。

希望这个解决方法能够在调试时让您的工作更加轻松。

- samus24