如何在WebStorm配合下让Chrome DevTools控制台显示TypeScript文件行号

要实现控制台输出对应.ts文件的行号，核心是正确配置Source Map并确保浏览器启用源映射支持，以下是具体操作步骤：

一、调整TypeScript编译配置 #

你的tsconfig.json已经开启了"sourceMap": true，这是基础前提，还需补充关键配置让调试器准确定位源码：

1. 添加sourceRoot配置，指向你的TypeScript源码根目录，帮助调试器找到原始.ts文件
2. 保持inlineSourceMap和inlineSources关闭（默认即为关闭，你的配置中已注释相关选项，无需修改）
3. 确保编译后的.js文件与对应的.map文件处于同一目录（你的outDir设为./dist，编译后会自动生成.map文件到该目录，符合要求）

调整后的关键配置片段：

"compilerOptions": {
  // 其他原有配置...
  "sourceMap": true,
  "sourceRoot": "./src", // 新增：指向你的源码根目录
  "outDir": "./dist",
  // 其他原有配置...
}

二、启用浏览器开发者工具的源映射支持 #

1. Chrome浏览器：
   • 按F12打开开发者工具，点击右上角齿轮图标进入设置
   • 勾选「Enable JavaScript source maps」和「Enable CSS source maps」
2. Firefox浏览器：
   • 按F12打开开发者工具，点击右上角设置图标
   • 勾选「启用源映射」

三、验证与问题排查 #

1. 重新执行tsc命令编译项目，检查dist目录下每个.js文件是否都生成了对应的.js.map文件
2. 强制刷新浏览器页面（Ctrl+F5）清除缓存，触发控制台输出后，即可看到对应.ts文件的路径和行号
3. 若仍显示.js行号，可排查以下问题：
   • 确认.map文件与.js文件在同一目录，且编译过程无报错
   • 检查sourceRoot路径是否正确，若源码在项目根目录则设为"./"
   • 关闭浏览器缓存禁用之外的特殊调试选项

内容的提问来源于stack exchange，提问作者Sunil Kumar Das