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

Question

我使用的是create-react-app 16。["react": "^16.8.4", "react-scripts": "^2.1.8"] 我读了Ben Schwarz关于使用Chrome Dev工具对React性能进行分析的博客: https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad 他建议使用source-maps导出您的JS。当他进行性能跟踪时，单击User Timing部分中的给定React组件时，底部区域将显示特定组件信息，并在右侧显示与源代码相关的**蓝色链接**。但是，当我单击React组件时，这些链接不会显示。当我单击诸如Evaluate Script之类的组件时，右侧的蓝色链接会显示。

在development模式下，难道不应该使用create-react-app 16直接开启source mapping吗？我想在Chrome Dev工具中仅在development模式下使用源映射。Chrome浏览器中已激活源映射。我错过了什么吗？ 提前致谢！

附言：由于我没有10个声望点，因此我不应该使用屏幕截图，在这种情况下，事情变得不是那么容易。我希望我成功地解释了我的问题。

- Heinz

---

这里是一张缺失源代码链接的截图链接。在Timings部分中，我点击了名为app的React组件（左侧的蓝色矩形），但在Button-Up部分（右侧的蓝色矩形）没有任何链接。链接：https://i.imgur.com/AB5kBcE.jpg - Heinz

Answer 1

调试源文件将会在Chrome开发者工具的localhost:3000下的可用。

我们通常会在webpack://下进行搜索，我相信新版本有所改变。

我们通常会在webpack://下进行搜索。

我相信新版本已经做出了一些改变。

- Ignatius Andrew

Answer 2

你能检查一下这个文件吗？

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

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

在所有情况下。之后，完全停止应用程序，然后再次启动。

现在工作了吗？

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

- zurcacielos