问题描述
我已经使用 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