如何在 Create React App 的 DevTools profiler 中获取源文件的正确链接？

如何解决如何在 Create React App 的 DevTools profiler 中获取源文件的正确链接？

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

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

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

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

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

谢谢！

解决方法

为了让它工作，你需要改变 webpack 的设置

devtool: 'eval-source-map'

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

可能还有一些其他的源地图类型可以使用，但其中一种为您提供了最详细的信息。 在此处详细了解源地图类型

https://webpack.js.org/configuration/devtool/

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

https://webpack.js.org/guides/development/#using-source-maps