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

相关推荐
blackorbird12 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
爱隐身的官人13 小时前
谷歌 chrome 浏览器安装crx插件(hackbar为例)
chrome·渗透测试·hackbar
谷歌开发者13 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强13 小时前
Chrome和IE获取本机ip地址
前端
天***889613 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*13 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls14 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友14 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵14 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机15 小时前
Promise 常见面试题(持续更新中)
前端·javascript