DevTools failed to parse SourceMap 警告解决方法
最近在用webpack-dev-server
进行开发的过程中,控制台一直报一个警告:DevTools failed to parse SourceMap: webpack:///node_modules/_sockjs-client@1.4.0@sockjs-client/dist/sockjs.js.map
。下面给出消去这个警告的方法:
SourceMap技术
在处理该警告之前,有必要了解下什么是SourceMap,它是用来干什么的。在现在写网站的时候,如果有很多javascript文件,在渲染内容到客户端浏览器的时候,如果我们使用像webpack这样的打包工具的话,能够合并并且压缩那些js文件,并且去除其中的空格等元素,从而减小文件的容量,提高网页的反应速度。但是这样造成的问题就是在浏览器端无法对js文件进行调试,因为经过压缩的文件很紧凑,没有空格与换行。
概括来讲,SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当你在Production环境部署代码的时候,伴随着压缩与优化后的js代码,还要有一个包含原始js代码的sourcemap文件。当客户端浏览器Chrome在收到这个压缩后的js文件后,它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码。
去除警告
方案一:浏览器禁用sourcemap功能
首先打开Chrome浏览器的DevTools,方法如下:
将Enable JavaScript source maps
取消勾选即可。
在浏览器中禁用该功能后警告不见了,但是这样没有从根本上解决问题。
方案二:配置webpack
在webpack.config.js
中添加devtool: "inline-source-map"
,如下所示:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, "./src/index.html"),filename: "index.html"
});module.exports = {mode: "development",// mode: "production"plugins: [htmlPlugin],module: {rules: [{test: /\.js|jsx$/,use: "babel-loader",exclude: /node_modules/}]},devtool: "inline-source-map"
};
推荐这种解决方案,再也不用看到烦人的警告了
DevTools failed to parse SourceMap 警告解决方法相关推荐
- 解决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 ...
- DevTools failed to load SourceMap各种警告
当有时间好好看看项目时,那一加载就满屏的小黄人(各种警告),真膈应,然后就是一整个的怀疑自己写了个啥.进入正题之解决警告四大方法如下: HBuilder设置 删除以下配置:(位置:manifest.j ...
- DevTools failed to load SourceMap: Could not load content for... 如何关闭这个控制台警告?
我遇到的警告是这样的: DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggk ...
- DevTools failed to load SourceMap Could not load content 控制台显示的这个警告是什么意思
DevTools failed to load SourceMap: Could not load content 这里的意思是dev工具未能成功加载出源映射:无法加载内容 重点在for后面的部分, ...
- Failed to load JavaHL Library解决方法
Failed to load JavaHL Library解决方法
- 关于elasticsearch boostrap checks failed错误类型整理及解决方法
关于elasticsearch boostrap checks failed错误类型整理及解决方法 参考文章: (1)关于elasticsearch boostrap checks failed错误类 ...
- Proxmox VE中出现TASK ERROR: command ‘apt-get update‘ failed: exit code 100的解决方法
Proxmox VE中出现TASK ERROR: command 'apt-get update' failed: exit code 100的解决方法 参考文章: (1)Proxmox VE中出现T ...
- com.alibaba.dubbo.rpc.RpcException: Failed to invoke remote method解决方法
com.alibaba.dubbo.rpc.RpcException: Failed to invoke remote method解决方法 参考文章: (1)com.alibaba.dubbo.rp ...
- CMake添加QT库是出现Policy CMP0020 is not set“警告解决方法
CMake添加QT库是出现"Policy CMP0020 is not set"警告解决方法 查阅官方文档https://cmake.org/cmake/help/v3.0/pol ...
最新文章
- 我的电脑不联网,很安全,黑客:你还有风扇呢
- pytest测试实战 电子书_pytest实战APL测试框架
- ViewBag对象的更改
- restful xml_使用入站适配器公开HTTP Restful API。 第1部分(XML)
- 第十二节: EF的三种模式(二) 之 ModelFirst模式(SQLServer为例)
- 二维码提升对比度文献调研(1)--Fast Image Processing with Fully-Convolutional Networks
- 视觉盛宴VALSE 2021来了!今晚开始【预注册】
- IDEA06 代码规范检测插件之Alibaba Java Coding Guidelines
- git找回当前目录下误删的所有文件
- hp虚拟服务器,源自基础设施灵活多变的终极自由 惠普(HP)虚拟连接技术(Virtual Connect)...
- 20200926:(leetcode207周周赛题解(上))
- java连接池hkai,MySQL连接配置文件密码加密及其在多种连接池上的应用
- .Net下采用Base64编码的一个封装好的类库
- 图像频域增强:低通滤波器
- Fiddler2用于手机抓包时的配置方法
- Linux教学的误区
- 打算开源一个低代码平台,第四天,包含【工作流,业务流,财务,APQC】。技术栈 React,typescript,java,mysql
- 三十三.智能驾驶之多传感器融合技术: AVOD融合方法
- 大数据Spark入门教程
- 小学用计算机画画的课件,小学信息技术绘图课件
热门文章
- 在Linux中实现远程登陆服务
- 按遥控器上的CH键实现LED的开关。开了LED的情况下可以通过CH+和CH-键实现控制LED的光亮变化。LED关闭状态CH+和CH-无效。
- 2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅
- css五角心收藏点亮,CSS3 发光的五角星
- 深入透析Android事件分发机制
- Visual Studio VS工程文件作用的.sdf(.db)和ipch文件夹的处理
- QQ与MSN孰优孰劣
- 304和200状态码
- 在线转换计算机进制,计算机进制转换练习题
- 电商放单平台网站|软件开发搭建的优势