最近开发 web 的时候,打开 chrome 调试工具,会出现在一个资源(jquery.min.map)文件下载失败的提示,如下图:

之前引用 jquery 文件没出现过这种情况,最近才发现。随即找了度娘,记录下 jquery.min.map 文件 丢失的情况。

什么是 source map 文件。

source map 文件是 js 文件压缩后,文件的变量名替换对应、变量所在位置等元信息数据文件,一般这种文件和 min.js 主文件放在同一个目录下。

比如压缩后原变量是 map,压缩后通过变量替换规则可能会被替换成 a,这时 source map 文件会记录下这个 mapping 的信息。

这样的好处就是说,在调试的时候,如果有一些 JS 报错,那么浏览器会通过解析这个 map 文件来重新 merge 压缩后的 js, 使开发者可以用未压缩前的代码来调试,这样会给我们带来很大的方便!

而这种还原性调试功能,目前只有 chorme 才具有,所以就会出现标题说的问题,我引入 jquery.min.js 的时候,在 firefox 下或者其他浏览器下是好的,在 chorme 下会报错找不到 jquery.min.map 文件

404,就是因为以上说的情况,jquery 会检测浏览器是否支持 source map 功能

如果支持的话,那就去下载 source map 文件

而这个时候如果你引用的是官网的 min.js 那没问题,它会去自己的目录下找 source map 文件

而如果 jquery.min.js 文件在你的服务器上而服务器上又没有 source map 的话,那就会报错了,

所以三种解决办法:

  1. 引用官网文件。

  2. 把 source map>(jquery.min.map 文件)文件下载下来放到服务器上(推荐) 。

  3. 把 chorme 文件的工具 --> 开发者工具 --> 设置 -->Enable source maps 勾去掉,去掉这个勾,jquery 就不会去下载 source map 文件了!

本文地址 https://shaoshilei.com/2014-06/detailed-jquery-min-map-file.html