如何配置Chrome调试器，使其在调用栈窗口中仅显示TypeScript文件？

当然可以实现！这正是Chrome DevTools为TypeScript调试量身优化的功能，能帮你大幅提升调试效率，我来一步步带你操作：

第一步：确保项目已生成正确的Source Map #

Source Map是实现TS与JS代码映射的核心，必须先确认你的项目编译工具已经开启了这个功能：

• 如果用原生tsc编译，在tsconfig.json里设置：

  "compilerOptions": {
    "sourceMap": true
  }
  

• 如果用Webpack，在配置中设置devtool为合适的选项（开发环境推荐'eval-cheap-module-source-map'，生产环境可用'source-map'）：

  module.exports = {
    devtool: 'eval-cheap-module-source-map'
  };
  

• Vite在开发环境默认开启Source Map，无需额外配置；生产环境可在vite.config.js中设置build.sourcemap: true。

第二步：配置Chrome DevTools显示TS文件 #

1. 打开Chrome DevTools（快捷键F12或Ctrl+Shift+I），切换到Sources面板。
2. 点击右上角的设置图标（⚙️），打开设置面板。
3. 在Debugger分类下，确认以下选项：
   • 勾选Enable JavaScript source maps（默认通常已勾选，但建议检查）
   • 勾选Hide compiled JavaScript files——这个选项就是让调用栈自动隐藏编译后的JS文件，只显示原始TS文件
4. 关闭设置面板，重新触发调试场景（比如刷新页面或触发断点对应的函数）。

额外排查：如果仍不生效 #

如果调用栈还是显示JS文件，可能是Source Map路径映射有问题：

• 在Sources面板的Page标签下，找到你的项目源码目录，右键选择Add folder to workspace，将本地项目源码目录添加到DevTools工作区，让DevTools能正确识别并映射Source Map。

这样设置后，你的调用栈就会完全显示你标注的TypeScript文件，再也不用在JS文件里来回跳转啦！

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