微软新Edge浏览器推出后,也成为我调试主题的辅助工具,因为同样是基于Chromium开源项目的浏览器,新Edge开发工具是中文的,而Chrome这么多年了,也没出过真正的中文版,可以抛弃Chrome了。
打开Edge浏览器开发工具控制台一直提示:DevTools 无法加载 SourceMap.....警告,很容易认为是当前网页有错误警告,看着有点烦心。去掉这个警告的方法:
打开Edge浏览器开发工具控制台,找到“启用JavaScript源映射”取消勾选即可。
如是Chrome浏览器方法类似,找到Enable JavaScript source maps取消勾选即可
网上查了一下什么是SourceMap技术它是用来干什么的。
在现在写网站的时候,如果有很多javascript文件,在渲染内容到客户端浏览器的时候,如果我们使用像webpack这样的打包工具的话,能够合并并且压缩那些js文件,并且去除其中的空格等元素,从而减小文件的容量,提高网页的反应速度。但是这样造成的问题就是在浏览器端无法对js文件进行调试,因为经过压缩的文件很紧凑,没有空格与换行。
概括来讲,SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当你在Production环境部署代码的时候,伴随着压缩与优化后的js代码,还要有一个包含原始js代码的sourcemap文件。当客户端浏览器Chrome在收到这个压缩后的js文件后,它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码。
我要提问