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 , 其他版本可能配置格式不是上面所述,自己再度娘一下了。希望本文对你有帮助。

相关推荐
brzhang7 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears7 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
David凉宸19 分钟前
凉宸推荐给大家的一些开源项目
前端
袋鱼不重21 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
hyyyyy!21 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式
竹苓22 分钟前
从一个想法到上线,一万字记录我开发浏览器插件的全过程
前端
小桥风满袖23 分钟前
Three.js-硬要自学系列19 (曲线颜色渐变、渐变插值、查看设置gltf顶点、山脉高度可视化)
前端·css·three.js
zayyo23 分钟前
Vue.js性能优化新思路:轻量级SSR方案深度解析
前端·面试·性能优化
北溟鱼鱼鱼24 分钟前
跨域解决方案
前端
六边形66624 分钟前
一文搞懂JavaScript 与 BOM、DOM、ECMAScript、Node.js的用处
前端·javascript·面试