如何使用node --inspect或WebStorm调试TypeScript版Remix.run应用

一、Chrome + node --inspect 调试流程 #

Remix的TS项目调试核心是开启sourcemap并正确指向CLI入口，步骤如下：

1. 确保TS配置支持sourcemap
   打开项目根目录的tsconfig.json，确认compilerOptions里的sourceMap设为true——这是让调试器能映射到TS源码的关键：

   {
     "compilerOptions": {
       "sourceMap": true,
       // 保留其他原有配置
     }
   }
   

2. 启动带调试的Remix开发服务器
   在终端执行以下命令，用node --inspect启动Remix的CLI工具，它会自动处理TS编译并启动服务器：

   node --inspect ./node_modules/@remix-run/dev/dist/cli.js dev
   

   执行后终端会输出调试监听地址（比如ws://127.0.0.1:9229/xxxxxx），说明调试器已就绪。

3. 连接Chrome调试器
   打开Chrome浏览器，输入chrome://inspect，在“Remote Target”区域找到你的Remix进程，点击“inspect”进入调试面板。
   在Sources面板里，通过file://路径找到本地的TS源码文件，设置断点后，触发对应请求就能开始调试了。

二、WebStorm 调试流程 #

WebStorm可以直接集成Remix的TS调试，无需手动编译，配置更直观：

1. 创建Node.js调试配置

   • 点击右上角的“Add Configuration”，选择“Node.js”类型。
   • 在“JavaScript file”字段中，选择Remix CLI的入口：./node_modules/@remix-run/dev/dist/cli.js
   • 在“Application parameters”里填dev（启动开发服务器的指令）。
   • 切换到“Configuration”标签，确认“Node interpreter”是项目使用的Node版本，“Working directory”设为项目根目录。
   • 切换到“Debugger”标签，勾选“Enable source maps”，WebStorm会自动识别TS配置的sourcemap路径，无需额外设置。

2. 启动调试
   点击绿色的调试按钮，WebStorm会自动启动Remix开发服务器，并加载TS源码的调试映射。直接在TS文件里设置断点，当代码被执行时就会触发断点，你可以查看变量、单步执行、调用栈等。

核心提示 #

Remix的运行入口是编译后的build/index.js，但调试时不需要直接指向它——通过@remix-run/dev的CLI启动，既能自动处理TS编译，又能保留sourcemap关联，这是调试TS版Remix的关键。只要确保sourceMap开启，就能在调试时直接操作TS源码，不用管编译后的JS文件。

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