解决DevTools failed to load SourceMap: Could not load content for ***.js.map: HTTP error: code 404 问题

╰半夏微凉° 2022-11-06 12:51 107阅读 0赞

# 问题 #

DevTools failed to load SourceMap: Could not load content for ***.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

项目开发完之后，在用Chrome浏览器调试的时候发现控制台有两条警告，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

# 分析 #

这里抛出**DevTools failed to load SourceMap**警告的原因是：

*  项目引用的第三方的JavaScript工具是压缩后的版本，
 *  存在SourceMap的指向信息，
 *  浏览器启用了JavaScript源映射，
 *  但是我的项目中没有相应的SourceMap文件，所以抛出此异常。

SourceMa是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源，调试原始源代码会比浏览器下载的转换后的代码更加容易。  
其实这里没有SourceMap文件是不会影响项目的正常运行和使用的。

# 解决 #

如果不想看到类似的警告信息，可以在Chrome的控制台的设置中去设置一下，不启用JavaScript源映射即可：

第一步：在控制台右上角点击【设置】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]  
第二步：在设置面板中Preferences -> Sources -> Enable JavaScript source maps  
勾选掉 【Enable JavaScript source maps】选项.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 3]  
最后刷新页面再看看控制台：没有显示警告信息了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 4]

参考：  
[https://stackoverflow.com/questions/61339968/devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension][https_stackoverflow.com_questions_61339968_devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221023/a2c37fa5d2664f4caa74086d9796e446.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]: /images/20221023/b383401a3f6d4393a2034c3ec02a9bcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 2]: /images/20221023/56bfd07cab3e48de9ae2b7c628f31d0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 3]: /images/20221023/61afc5813e1948bd83bfdf591b87d018.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 4]: /images/20221023/a441daaa2a354cf6b8bbad6175935182.png
[https_stackoverflow.com_questions_61339968_devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension]: https://stackoverflow.com/questions/61339968/devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension