浏览器控制台 一直显示警告 某些小洁癖的前端程序员 对此无法忍受 蓝瘦香菇！！！

如图所示：

DevTools无法加载源映射∶无法加载http:l/m.y .com:8B8/NC_103 5_blog[js/axios,.map的内容:
HTTP错误:状态代码44, net:Ee_iTPp_RESsa0isE_COE FAILURE

axios.js源码位置 1756行 源代码该行被注释

什么是 Source Map

在前端开发过程中，通常我们编写的源代码会经过多重处理（编译、封装、压缩等），最后形成产物代码。于是在浏览器中调试产物代码时，我们往往会发现代码变得面目全非。

因此，我们需要一种在调试时将产物代码显示回源代码的功能，source map 就是实现这一目标的工具。

基本原理

source-map 的基本原理是，在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应部分的映射关系表。有了这样一张完整的映射表，我们就可以通过 Chrome 控制台中的"Enable Javascript source map"来实现调试时的显示与定位源代码功能。

对于同一个源文件，根据不同的目标，可以生成不同效果的 source map。它们在构建速度、质量（反解代码与源代码的接近程度以及调试时行号列号等辅助信息的对应情况）、访问方式（在产物文件中或是单独生成 source map 文件）和文件大小等方面各不相同。在开发环境和生产环境下，我们对于 source map 功能的期望也有所不同：

• 在开发环境中，通常我们关注的是构建速度快，质量高，以便于提升开发效率，而不关注生成文件的大小和访问方式。

• 在生产环境中，通常我们更关注是否需要提供线上 source map ,
  生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度。

解决方案

二者选其一

1、忽视掉这个警告

2、根据路径找到该文件，然后删除文件中最后的注释即可

本次测试案例：

删除 axios中 1756行注释的代码

 //# sourceMappingURL=axios.map

参考博客：

devtools 无法加载 sourcemap_【笔记】如何正确使用 SourceMap？