Reactjs 在create react应用程序中检查Chrome DevTools中的源代码

使用create react应用程序时，npm start正在运行，如果我检查一个应用程序，在Chrome开发工具中，我只能在Webpack internal文件夹中找到我的项目文件。这正常吗

如果我打开“源代码”选项卡，我会看到更多信息：

似乎ES6代码已更改为ES5，而且每个地方都有\u source:标记

我想如果我在DevTools设置中禁用SourceMap for JavaScript，那些\uu source标记将消失，它们没有消失。即使刷新浏览器或使用npm start重新启动Dev服务器，也没有删除它们

---

这使得调试代码变得非常困难。你也面临同样的问题吗？任何解决方案？

Babel

是构建过程的一部分，它负责将ES6转换为ES5，以便您的应用程序可以在不正确支持ES6的浏览器上运行

你可以在这里了解更多

您将无法在浏览器中看到预编译代码。您应该使用一个名为

React Developer Tools

的扩展，您可以在这里为Chrome获得它

---

通过扩展，您可以看到有关React应用程序的更多相关信息。

是的，这是完全正常的，而且它的工作方式也是如此。如果你检查一下，就会知道发生了什么。为了调试错误的路径，最好在编辑器中安装和调试。VSCode是最好的，因为它更相关？设置断点和调试怎么样？据我所知，React Developer工具只显示了当前呈现的状态，这也很棒