Chrome DevTools中源映射（Source Maps）的显式查看方式及相关疑问

这个问题其实挺普遍的，不少刚接触源映射调试的开发者都会有这个困惑，我来给你拆解解答：

为什么*.map文件不会显示在Sources概览里？ #

Chrome DevTools的Sources面板默认把源映射文件当成幕后的调试支撑文件，不会把它们放到常规的文件列表里展示。它的核心作用是在调试时自动把编译后的压缩/转译代码（比如TS编译后的JS）映射回你的原始源码，而不是作为普通资源让你直接浏览，所以DevTools会在后台处理这些文件的加载和解析，不会和普通的JS、CSS文件混在一起显示。

有没有办法在DevTools里直接查看源映射文件？ #

当然有，给你两种实用的方法：

• 方法一：通过开发者资源面板
  在Chrome里，点击DevTools右上角的三个点 → More tools → Developer Resources，这里会列出页面加载的所有源映射文件，点击对应的.map文件就能直接查看它的JSON内容。Edge的话直接用你提到的「Source Maps Monitor」功能，点击进去就能查看。
• 方法二：在Sources面板直接访问
  如果你已经在调试原始源码，右键点击源码区域，选择「查看源映射（View source map）」，就能直接打开对应的.map文件。另外，你也可以把从Developer Resources里复制的.map文件URL，粘贴到Sources面板顶部的地址栏，按回车就能打开查看。

源映射文件的物理位置在哪里？ #

它们的实际位置就是sourceMappingURL注释里指定的路径，大多和对应的编译后JS文件在同一个目录下（有些项目会把源映射统一放到maps这类单独文件夹里）。你可以这样获取：

• 在Developer Resources里找到目标.map文件，右键选择「复制链接地址」，粘贴到浏览器地址栏打开，就能直接查看或者下载文件；
• 如果你能访问网站的服务器文件系统，直接去sourceMappingURL指向的路径找就行，比如你例子里的component---src-templates-pages-cheatsheets-tsx-d685670bdc739b0b8cff.js.map，就和对应的JS文件在同一目录下。

备注：内容来源于stack exchange，提问作者ajw170