如何在Chrome中调试Create React App创建的TypeScript React演示项目？

用npx create-react-app@next webclient --template typescript创建的项目，已经内置了完善的调试配置，无需额外安装ts-node这类工具，直接按以下步骤操作即可：

一、基础确认 #

创建的项目默认已经开启了sourceMap（查看tsconfig.json可看到"sourceMap": true配置），TS源码和编译后的JS代码会自动关联，无需手动修改配置。

二、常用调试方式 #

方式1：启动开发服务后直接调试 #

• 启动项目：在项目根目录执行命令 npm start（或yarn start），项目会自动在Chrome中打开；若未自动打开，手动访问 http://localhost:3000。
• 打开Chrome调试器：按F12键，或右键页面选择「检查」打开DevTools，切换到「Sources」标签页。
• 定位TS源码：在Sources面板左侧的目录树中，展开webpack:// -> . -> src文件夹，即可找到你的TypeScript源文件（如App.tsx、index.tsx）。
• 设置断点：点击目标文件的行号即可添加断点，也可以直接在TS代码中写入debugger;语句，代码执行到此处会自动暂停。
• 调试控制：断点触发后，使用DevTools调试工具栏的按钮（继续、单步跳过、单步进入等）控制执行流程，同时可查看变量值、调用栈等信息。

方式2：通过Chrome「附加进程」调试 #

• 确保项目已用npm start启动，打开Chrome并访问 chrome://inspect。
• 在页面的「Remote Target」区域找到对应项目的进程（通常显示为localhost:3000），点击「inspect」打开调试器，后续操作和方式1一致。

注意事项 #

• 必须在开发模式下调试，生产模式（npm run build后的产物）会关闭sourceMap，无法关联TS源码。
• 若断点未命中，检查DevTools是否开启了「Disable JavaScript」选项，或确认源码路径是否正确。

内容的提问来源于stack exchange，提问作者Gerd