logo标签列表

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

reactjs
3

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

此外，如果我打开源选项卡，我看到的是：

enter image description here

似乎ES6代码已经转换为ES5，并且到处都有__source标签。我认为如果在我的DevTools设置中禁用JavaScript的SourceMap，那些__source标签将会消失，但实际上它们没有消失。即使刷新浏览器或使用npm start重新启动Dev服务器，它们也没有被删除。这使得调试代码非常困难。你遇到同样的问题吗？有什么解决方案吗？
1
是的，这是完全正常的工作方式。如果您在这里检查，就会知道发生了什么。至于调试，您正在走错路线，最好安装React-Dev-Tools，并从编辑器中进行调试。出于这个原因，VSCode是最好的选择。 - Amir-Mousavi
1个回答
0

Babel 是构建过程的一部分，它负责将 ES6 转译为 ES5，使您的应用程序能够在不支持 ES6 的浏览器上正常工作。

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

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

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

1
更相关？那设置断点和调试呢？就我所见，React开发者工具只显示当前呈现的状态，这也很棒。 - Jonathan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接