如何在 Create React App 的 DevTools 探查器中获取指向源文件的正确链接？

How to get correct links to source files in DevTools profiler in Create React App?

我已经使用 TypeScript 模板创建了一个基本的 Create React App

npx create-react-app cra-test --template typescript

我只添加了一个简单的 MyButton 组件并将点击处理程序传递给它。当我使用 Chrome DevTools 对其进行分析时，分析器中指向源的链接不正确，并且无法正常工作，就好像没有源映射一样。

当我运行 console.trace 在我的 onClick 处理程序堆栈跟踪中看起来不错。

如何在分析器选项卡中获得指向源文件的正确链接？

谢谢！

为了让这个工作你需要改变 webpack 的设置

devtool: 'eval-source-map'

您可以使用 config-overrides.js (react-app-rewired) 进行设置。

可能还有一些其他的源地图类型可以使用，但那个为您提供了最详细的信息。有关源地图类型的更多信息，请点击此处

您可以在此处阅读有关 devtool 设置的信息。