SourceMap 浏览器控制台报错:DevTools failed to load SourceMap:Could not load content for ...
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools

·
什么是SourceMap:
SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当客户端浏览器Chrome在收到这个压缩后的js文件后,它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码
----------------------------------------------------------------------------------------
SourceMap报错原因:
压缩过程中可能会破坏掉js文件中的部分代码导致调用失败,浏览器则会通过SourceMap找到原来的js文件!当找不到SourceMap则弹出警告提示。
----------------------------------------------------------------------------------------
处理方法:
在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"
};




vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:20 天前 )
79116147 - 1 年前
f0359002 - 1 年前
更多推荐
所有评论(0)