Chrome Devtools 中没有链接到 React 组件的源代码

Question

我使用create-react-app 16 。["react": "^16.8.4", "react-scripts": "^2.1.8"] \n我阅读了Ben Schwarz使用Chrome 开发工具分析 React 性能的博客:\n https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad \n他建议使用source-maps导出你的 JS 。\n当他进行表演时跟踪，然后单击“用户计时”部分中的给定反应组件，特定组件信息显示在“自下而上”部分中，并在右侧带有**指向源代码**的蓝色链接。当我单击 React 组件时，此链接不会显示。当我单击“评估脚本”等组件时，右侧会显示蓝色链接。

\n\n

源映射不应该在开发中与create-react-app 16一起“开箱即用”吗？\n我只想在开发中使用Chrome 开发工具进行源映射。源映射在 Chrome 浏览器中激活。我错过了什么？\n提前谢谢

\n\n

PS：由于我还没有获得 10 点声望点，所以我\xc2\xb4m 不打算使用屏幕截图，这在这种情况下让事情变得不太容易。不过，我希望我能够充分解释我的问题。

\n

Answer 1

你能检查一下文件吗

node_modules/react-scripts/config/webpack.config.js

在那里搜索 sourceMap 和 sourceMaps，看看这是否适合您。您可以像“_original”一样复制该文件，然后设置 sourceMaps: true,

在所有情况下。之后，完全停止该应用程序，然后重新启动它。

那现在有效吗？

要验证哪个 sourceMap 正在工作，请将源添加到工作区并检查绿点： https: //developers.google.com/web/tools/chrome-devtools/workspaces/