在 Chrome Devtools for React 组件中没有指向源代码的链接答案

【问题标题】：No Link to source-code in Chrome Devtools for React components在 Chrome Devtools for React 组件中没有指向源代码的链接
【发布时间】：2019-09-15 17:49:17
【问题描述】：

我使用 create-react-app 16。["react": "^16.8.4", "react-scripts": "^2.1.8"] 我阅读了 Ben Schwarz 使用 Chrome 开发工具 分析反应性能的博客： https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad 他建议使用 source-maps 导出您的 JS。当他进行性能跟踪，并单击用户计时部分中的给定反应组件时，特定组件信息将显示在底部向上部分中，并在右手边。当我单击 React 组件时，此链接不显示。当我点击像 Evaluate Script 这样的组件时，右侧的蓝色链接会显示出来。

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

P.S.：由于我没有 10 个声望点，我不打算使用屏幕截图，在这种情况下，这让事情变得不太容易。不过，我希望我能够充分解释我的问题。

【问题讨论】：

这里是指向源代码缺失链接的屏幕截图的链接。在 Timings 部分中，我单击了名为 app 的 React 组件（左侧的蓝色 reactangle），但 Button-Up 部分中没有链接（右侧的蓝色矩形）。链接：i.imgur.com/AB5kBcE.jpg

标签： reactjs google-chrome-devtools performance-testing create-react-app source-maps

【解决方案1】：

用于调试的源文件将在 Chrome 开发工具中的 localhost:3000 下提供。

我们总是倾向于在 webpack:// 下搜索我相信的较新版本已进行了更改

我们总是倾向于在 webpack://

下搜索

我相信的新版本已进行了更改

【讨论】：

【解决方案2】：

你能检查一下文件吗

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

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

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

现在有效吗？

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

【讨论】：