如何在 Chrome 中调试 TypeScript React 演示应用程序？

Question

在 Chrome 调试器中调试 TypeScript 应用程序非常简单。您设置 tsconfig.json：

"sourceMap": true,

安装 ts-node + 使用“debugger;”在 ts 代码中设置断点

启动我的应用程序后

node --inspect -r ts-node/register ./src/my_app.ts

现在我在 chrome 调试器中。

这在 React TypeScript 演示项目中如何工作？？？

npx create-react-app@next webclient --template typescript

Answer 1

npx create-react-app@next webclient --template typescript

webclient/tsconfig.json 添加

"compilerOptions": {
    ...
    "sourceMap": true,
    ...
}

在 webclient 目录运行

npm start

应用程序在 http://localhost:3000 打开

使用“inspect”页面的上下文菜单打开 Chrome 开发者工具

选择“来源”选项卡并在左侧的“页面”选项卡中查看

在“localhost:3000”下打开您本地的“src”目录

现在打开App.tsx

您可以看到演示代码的来源，您可以在这里设置断点。

代码上的所有更改都会热部署，以便于开发。

对于 Firefox，采取同样的方法！在这里您可以选择“调试器”选项卡！