如何在DevTools中定位TypeScript编译后对应的实际JS代码

你在调用栈里看到的TS文件全是Source Map映射出的源文件视图，浏览器实际执行的始终是压缩打包后的JS产物，按下面的操作就能直接定位对应位置：

• 命中断点后直接通过调用栈跳转
  断点触发后打开DevTools右侧的**调用栈（Call Stack）**面板，每一个栈帧条目末尾都会标注实际执行的文件位置，格式类似app.js:行号:列号，直接点这个位置标识，就会自动跳转到压缩JS里对应的实际执行代码行。
  如果你当前看到的栈帧只显示TS文件名，右键点击对应TS栈帧，选择「显示生成位置（Reveal generated location）」，就会自动定位到该段TS代码编译后在压缩JS中的位置，不需要手动逐行查找。
• 借助格式化功能梳理混淆代码
  跳转到压缩JS后你会看到代码是无换行的混淆状态，点击代码编辑器左下角的{}格式化（pretty print）按钮，DevTools会自动生成格式化后的可读JS版本（文件名后缀为:formatted）。此时编辑器底部状态栏会同步显示双向映射关系：既会显示当前格式化JS的行列号，也会标注对应映射到TS源文件的行列位置，你可以双向核对对应关系。
• 映射异常时的手动定位方案
  如果找不到跳转选项，先按F1打开DevTools设置页，确认已勾选Enable JavaScript source maps（启用JavaScript源映射）。如果生产环境做了Source Map权限限制、映射位置不准，可以提取你写的TS代码里的固定特征值——比如特定的函数名、接口请求的固定路径、自定义的错误提示字符串，这类字符串字面量编译后不会被修改，直接在压缩后的app.js文件里按Ctrl/Cmd+F全局搜索特征值，就能快速定位到对应代码段。

注意：不要直接在映射出的TS文件视图里修改代码调试，这类文件只是映射的只读视图，修改不会生效，必须在跳转后的实际JS文件（或格式化后的JS文件）里修改才能看到调试效果。另外打包时会做变量混淆、tree-shaking、公共逻辑抽离，TS代码和编译后JS不是逐行一一对应的，多段TS逻辑可能被合并到同一个JS函数里，属于正常现象。
你提到的TS调用栈流入压缩JS网络请求函数的场景，顺着调用栈从TS文件栈帧往下找，第一个标注为压缩app.js的栈帧，就是你写的TS业务代码编译后在bundle里的实际入口位置，点过去就是对应的实际运行代码。

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