jQuery.min.map 404 Not Found 错误解决方法

Question

偶尔使用 Google 浏览器，使用控制台查看网页的 JavaScript 是否有报错，突然发现有一个文件（jQuery.min.map）无法加载，而且我的网页也没有引入这个，但是 Google 浏览器为什么会去加载这个文件，其它浏览器就不会这样。 刚开始以为是 Chrome 安装插件导致的错误，可是把引入换成 jQuery 开发版本时，错误就不见了。

并且只有 Chrome 会有这个错误提示，FireFox、IE不会报错。 后来发现原来是jQuery脚本中

//@ sourceMappingURL=jquery-1.10.2.min.map

这一行惹的祸。

解决方法

• 如果是布置到实际的运营环境中去，你可以把上面那行代码直接删掉。
• 如果是在开发环境中，你应该下载 jquery.min.map 文件，放到 jQuery 同级目录中去（需要对应的 Source Map 文件）。
• 如果想关掉错误提示，还可以在 Chrome 的 Developer Tools 的 Setting 中将 Enable source maps 取消选中

为什么这行被注释掉的代码，会起作用呢？那么就需要了解一下什么是 Source Map。

什么是 Source Map 文件

Source Map 就是一个 JSON 格式的信息文件，里面储存着位置信息。也就是说，它是压缩后 JS 的一个字典文件。

有了它，出错的时候，调试工具将直接显示原始代码，而不是压缩后的代码。这无疑给开发者带来了很大方便 因为是Google自定义的规则，暂时只有基于 Chromium 开发的浏览器支持这个功能。

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

比如压缩后原变量是 map，压缩后通过变量替换规则可能会被替换成 a，这时 Source Map 文件会记录下这个 mapping 的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个 map 文件来重新  merge 压缩后的 js，使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！

而这种还原性调试功能，目前只有 Chorme 才具有，所以就会出现标题说的问题，我引入 jquery.min.js 的时候，在 Firefox 下或者其他浏览器下是好的，在 Chorme 下会报错找不到 jquery.min.map 文件，就是因为以上说的情况，jQuery 会检测浏览器是否支持 Source Map 功能，如果支持的话，那就去下载 Source Map 文件，而这个时候如果你引用的是官网的 min.js 那没问题，它会去自己的目录下找 Source Map 文件，而如果 jquery.min.js 文件在你的服务器上而服务器上又没有 Source Map 的话，那就会报错了。

解决办法

• 引用官网的文件。
• 把 Source Map 文件下载下来放到服务器上。
• 把 Chorme 文件的工具 -> 开发者工具 -> 设置 -> Enable source maps 勾去掉，去掉这个勾，jQuery 就不会去下载 Source Map 文件了。