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

相关推荐
pc大老7 分钟前
优化浏览体验:4个设置让Google Chrome更好用!
chrome·google·谷歌浏览器·谷歌·浏览器设置
智能化咨询11 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
霍格沃兹软件测试开发12 分钟前
快速掌握Dify+Chrome MCP:打造网页操控AI助手
人工智能·chrome·dify·mcp
Anson Jiang13 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼16 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css