Chrome 调试器中的 ES6 (React) 无法正常工作答案

【问题标题】：ES6 (React) in Chrome debugger not workingChrome 调试器中的 ES6 (React) 无法正常工作
【发布时间】：2018-10-21 06:32:47
【问题描述】：

您好，正如您在屏幕截图中看到的那样。我在最新的 Chrome (66.0.3359.170) 开发工具中打开了一个 javascript 代码 (ES6/React) 的 sn-p。

部分代码正确显示为 Javascript 代码，但是从第 31 行开始，代码看起来像某种纯文本，无法检查输入和变量。

有人知道怎么解决吗？顺便说一句，最新的 FireFox 在我的环境中运行良好。

谢谢

【问题讨论】：

调试器在什么情况下不工作？是否有一些调试功能被破坏？还是只是语法高亮不漂亮？
在我的例子中，源映射会将“翻译”的 JavaScript 映射到原始 ES6 代码。即使你在“翻译”输出上设置断点，Chrome 调试器仍然会转到你原来的 ES6 代码

【解决方案1】：

反引号搞乱了编辑器中的突出显示。

如果代码正确且运行良好，则编辑器可能不正确支持字符串模板。

（注意：“编辑器”是指 Chrome 开发者工具的可视化部分）

代码包含 JSX 表达式，不太可能直接出现在 Chrome 开发者工具中。这段代码不应该直接执行，而是通过 React 进行阐述，变成最终的 html 和 Javascript.... 换句话说，它不属于那里。

【讨论】：

我不认为它是编辑器，它是 Chrome 开发者工具。
我指的是 Chrome 开发者工具编辑器（可视化器）
我认为实际上是 React { ... } 的东西让它感到困惑。
它不应该......无论哪种方式代码看起来都很好。它看起来像一个解析/突出显示错误
感谢您的回复。就我而言，第一个问题是我无法将鼠标悬停在变量上，通常当您将鼠标悬停在变量上时会看到变量检查。所以代码工作正常，但调试器工作不正常。同时，我意识到我可以在 FireFox 中逐行调试 JSX，Chrome 似乎还不支持它？还是只是我的环境？