Firefox浏览器提示:源映射错误:Error: NetworkError when attempting to fetch resource.

引用一些js脚本文件时,火狐浏览器Firefox出现了源映射错误提示,比如jquery.min.js,提示内容如下:

源映射错误:Error: NetworkError when attempting to fetch resource.

源 URL:https://www.tddx.net/jquery.min.js

源映射 URL:jquery.min.js.map

原因:

这是由于缺少对应的映射文件(sourcemap file)导致的。

解决方法:

方法一:删除调用代码

编辑jsplugin.min.js文件,找到sourceMappingURL,如下

//# sourceMappingURL=jquery.min.js.map

删除这一行即可

方法二:补上对应的映射文件

一般下载的插件中,同目录下会有对应的map文件,把该文件添加到sourceMappingURL引用的路径中

扩展:sourcemap文件是什么

Source map是js文件压缩后,文件的变量名替换对应的变量所在位置等元信息数据文件,通俗地理解就是Source map是一个储存着位置信息的信息文件,转换后代码的每一个位置所对应的转换前的位置,当出错的时候,除错工具会直接显示原始代码,而不是转换后的代码,给开发者提供了极大的便利。

比如js原变量是map,压缩后通过变量替换规则可能会被替换成a,这时source map文件会记录下这个mapping的信息,开发者在调试的时候如果有JS报错,浏览器就会通过解析这个map文件来重新merge压缩后的js,那么开发者就可以使用压缩前的代码来调试。

sourcemap文件一般会与min.js主文件放在同一个目录下。

提示:source map功能需要浏览器的支持,如主流浏览器Firefox、Chrome等都支持。Firefox默认开启,Chrome需要在Settings里勾选Enable JavaScript source maps选项,新版本的Chrome好像已经默认开启了。

关键词: jQuery