Chrome开发者工具如何才能看到Vue项目的源码

大家好,我是 程序员码递夫。

今天给大家分享的是 Chrome开发者工具如何才能看到Vue项目的源码。

问题

我们在编写一下Vue项目时,常常要通过 chrome 进行本地调试后,才打包 生产版本。 但有时打开 chrome 的开发者工具后,看到的却是 webpack 编译后的代码,看不到 项目网页的源码,非常不便于调试。

如:

解决方法

出现这种现象,就是 vue项目为了提供启动速度,没有输出 sourceMap 的缘故,我们在vue 项目加入一下配置,就可以了。

在vue.config.js (没有的话自己手工创建)中,添加以下配置内容:

javascript 复制代码
module.exports = {

    configureWebpack: {
        devtool:"source-map"        
    },

    css: {
        sourceMap: true
    }
}

命令行重新运行vue服务, vue-cli-service serve , 然后在chrome 浏览器刷新,就可以看到源码,方便自己调试了。

注意

我的 vue-cli 版本是 5.0.8 , 其他版本可能配置格式不是上面所述,自己再度娘一下了。希望本文对你有帮助。

相关推荐
吃饭睡觉打豆豆嘛3 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端3 小时前
claude code 原理分析
前端
GalaxyMeteor3 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man3 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮3 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0073 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon3 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible3 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua4 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12044 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画