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

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

问题

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

项目开发完之后,在用Chrome浏览器调试的时候发现控制台有两条警告,如图所示:

分析

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

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

SourceMa是从已转换的代码映射到原始源的文件,使浏览器能够重构原始源并在调试器中显示重建的原始源,调试原始源代码会比浏览器下载的转换后的代码更加容易。

其实这里没有SourceMap文件是不会影响项目的正常运行和使用的。

解决

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

第一步:在控制台右上角点击【设置】

第二步:在设置面板中Preferences -> Sources -> Enable JavaScript source maps

勾选掉 【Enable JavaScript source maps】选项.

最后刷新页面再看看控制台:没有显示警告信息了。

参考:

https://stackoverflow.com/questions/61339968/devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension

相关文章
|
监控 JavaScript 前端开发
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第25天】在 Nuxt.js 中,`app:error` 钩子是一个强大的工具,用于处理应用程序中的各种错误。它可以在服务器端渲染或客户端运行时触发,帮助提升应用稳定性和用户体验。通过在 `nuxt.config.js` 中定义该钩子,开发者可以实现错误页面显示、错误日志记录及错误恢复等功能,确保应用在遇到问题时能妥善处理并恢复正常运行。
327 10
|
网络架构
CondaHTTPError HTTP 000 CONNECTION FAILED错误解决方案
以上就是解决"CondaHTTPError: HTTP 000 CONNECTION FAILED"错误的一些方法。希望这些方法能够帮助你解决问题。如果以上方法都无法解决你的问题,你可能需要寻求专业的技术支持。
2079 23
|
网络安全
网络问题解析:如何解决CondaHTTPError HTTP 000 CONNECTION FAILED错误。
以上就是斯诺普为你准备的解决Conda出现HTTP连接错误的手术室。希望这辆小车可以顺利驶出棘手的泥潭,再次在自由的大路上疾驰。一切的尝试和努力,只为更好的探索与开发。
581 17
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
开发者 UED
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第26天】在 Nuxt.js 中,钩子函数是在特定生命周期阶段执行代码的机制,`app:error` 钩子用于处理应用中的错误,包括服务器端和客户端渲染时出现的问题。它提供了一个集中处理错误的机制,提升了用户体验。当组件渲染过程中出现错误时,`app:error` 钩子会被触发,可以在 `nuxt.config.js` 文件中定义该钩子。通过分析错误对象 `err` 和上下文信息 `context`,开发者可以更好地处理各种错误情况。相比组件内的 `try/catch` 或浏览器原生错误处理,`app:error` 提供了更全局和有针对性的错误处理方式。
365 6
|
JavaScript 前端开发 开发者
Chrom devtools JS调试、性能优化与必备功能
Chrom devtools JS调试、性能优化与必备功能
|
iOS开发 MacOS Python
【Mac 系统】解决已有清华镜像但出现CondaHTTPError: HTTP 000 CONNECTION FAILED for url
在尝试使用清华镜像创建conda环境时遇到下载超时问题,通过删除原有镜像并添加针对Mac OS的清华镜像解决了该问题。
891 3
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
999 0
|
Python
【Azure 应用服务】Azure Function HTTP Trigger 遇见奇妙的500 Internal Server Error: Failed to forward request to http://169.254.130.x
【Azure 应用服务】Azure Function HTTP Trigger 遇见奇妙的500 Internal Server Error: Failed to forward request to http://169.254.130.x
369 0