反引号后无法检查chrome devtools源

Posted 2023-02-16

【中文标题】反引号后无法检查chrome devtools源

【英文标题】：chrome devtools source not inspectable after backtick

【发布时间】：2018-07-25 19:39:35

【问题描述】：

如果我在断点处停止我的 javascript 代码并尝试通过将鼠标悬停在上面来检查代码的某些部分（如变量或函数），它会弹出一个带有其值的弹出窗口，如下面的屏幕截图所示：

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

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

然后，反引号字符 (`) 下方的整个代码变为红色，如果我将鼠标悬停在它上面 - 我无法检查任何值 - 没有任何反应 - 它被视为字符串

因此，我必须手动转到控制台并输入值 - 而不是悬停并查看它的值。

如何解决这个问题？ 是否有 webpack 选项或一些源映射或任何 chrome 插件可以帮助解决这个问题？

【问题讨论】：

仅供参考，该字符称为反引号，这个 (~) 是一个波浪号。

【参考方案1】：

有一个使用 cmets 进行测试的解决方法，如 other question 中所述

这似乎是 Chromium 团队已知的一个错误，他们已经研究了很长时间。 Issue here

希望解决方法能让您在调试时轻松一点