在 create-react-app 中的 Chrome DevTools 中检查源代码

Question

使用 create-react-app，当 npm start 正在运行时，如果我检查一个应用程序，在 Chrome DevTools 中我只能在 Webpack-internal 中找到我的项目文件强>文件夹。这正常吗？

如果我打开“源”选项卡，我会看到以下内容：

好像ES6代码改成了ES5，而且到处都有__source:标签。

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

这使得调试代码变得非常困难。您是否面临同样的问题？有什么解决办法吗？

Answer 1

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

您可以在此处阅读更多信息https://babeljs.io/

您将无法在浏览器中看到您的预编译代码。您应该使用一个名为 React Developer Tools 的扩展程序，您可以在此处为 Chrome 获取它https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

使用该扩展程序，您可以查看有关您的 React 应用的更多相关信息。