解决Chrome 本地调试vue，Sources下找不到源代码的问题

最新推荐文章于 2025-07-02 14:33:05 发布
最新推荐文章于 2025-07-02 14:33:05 发布
阅读量2.2w 收藏 15
点赞数 5
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Little_Pig_Bug/article/details/83088023
本文解决了一个关于Webpack下代码无法调试的问题。作者发现由于config/index.js的配置错误，导致本地无法调试代码。通过调整devtool设置为'cheap-module-eval-source-map'，重新运行Vue后，调试功能恢复正常。此配置适用于测试环境，但上线前应注释掉以保护代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先看一下，我在Sources下的代码情况，代码都是已经编译过得了，导致我本地无法调试我的代码，明明之前可以在webpack下找到我的代码的，后来查了下，原来是config下index.js配置问题。

解决方法：

config/index.js

dev:{
  devtool: 'cheap-module-eval-source-map',
    }

重新运行vue后，即如下

测试环境下，可以添加如上代码，方便调试，但是上线后，还是注释如上代码，防止代码泄露

vue项目中debugger调试看不到源码
qq_42177730的博客
04-21 5825
在修改vue项目的问题时，发现代码里面输入debugger后，在浏览器点击操作发现可以进入断点，但显示的是已经压缩好的代码，无法看到源码 。 解决方案： 1 打开vue.config.js文件， 修改productionSourceMap: true, 1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。 ...
Vue源码分析之-源码下载和打包调试
前端高薪进击手记
07-05 3591
目录准备工作1、vue.js源代码获取可以直接网页下载源代码：或者 通过git clone下载：个人推荐的阅读源码的方式：目录结构解读了解Flow调试设置打包安装依赖设置sourcemap执行dev进行开发构建调试打包结果如何调试 Vue.js：这里我们演示解读的是Vue.js 2.6版本，https://github.com/vuejs/vue.githttps://github.com/vuejs/vue.git 个人推荐的阅读源码的方式： 目录结构解读 首先我们git clone获取到的
解决Chrome 本地调试vue,Sources下找不到源代码的问题
Knight
07-16 5553
解决Chrome 本地调试vue,Sources下找不到源代码的问题
【保姆级教程】Vue项目调试技巧
最新发布
s_156的博客
07-02 374
在Vue项目开发过程中，当遇到应用逻辑出现错误，但又无法准确定位的时候，知晓Vue项目调试技巧至关重要，debug是必备技能。同后台项目开发一样，可以在JS实现的应用逻辑中设置断点，并进行单步、进入方法内、跳出方法等调试，从而准确定位问题根源。本文主要讲解针对Vuedebugger、vs code插件。，大家一起共同交流和进步呀。
Chrome浏览器找不见Vue项目源代码
票票的博客
08-04 3977
Vue项目在Chrome浏览器的源代码混乱，无法调试问题 先上个问题图： 在文件 vue.config.js 的configureWebpack对象加一个元素 devtool: ‘source-map’ 如图： 搞定！重启下项目，按F12 看看效果去吧 之所以会出现这种情况，一般是Vue模板项目 取消设置SourceMap，为了避免前端源码在浏览器端泄露。 解决这个问题，就是配置一个 SourceMap就好。 关键点来了，不同脚手架版本，配置代码不同！我的脚手架是3.x.x，如果你是其他版本，就找找其他
解决Chrome 本地调试React，Sources下找不到源代码的问题
LYY1448019681的博客
09-12 6856
解决Chrome 本地调试React，Sources下找不到源代码的问题 先看一下，我在Sources下的代码情况，代码都是已经编译过的，导致我本地无法调试，之前一直都是可以调试的状态，忽然一下看不到源代码了，不能调试还是有点心慌。 解决方法： 后来仔细想了一下今天对代码做了哪些修改，想到更改了webpack的配置，将devtool做了修改。 于是找到问题原因。 当webpack的devtool 为 (none) 时，打包后 本地调试 就会没有源代码。 具体可参照 webpack 的
vue项目debugger调试看不到源码
xwnxwn的专栏
10-04 3011
在搭建vue项目时，在vue文件里面输入debugger后，在浏览器点击操作发现可以进入断点，但显示的是已经压缩好的代码，无法看到源码。1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。在网上查了好多文件都说添加 devtool: "source-map"即可解决，实际情况是添加了没有效果。2. 在页面上点击即可进入断点位置，浏览器上显示的也是源码。
Chrome升级到120版本后VUE项目无法使用SourceMap
wangooo的博客
12-18 1061
设置-忽略列表-启用忽略清单（升级120版本后，默认启用的）
谷歌vue源码查看
01-31
vue.js的devtools安装,实现了谷歌浏览器可以直接查看vue源码，类似h5的元素开发者模式。 方法1：打开谷歌浏览器>更多工具>拓展程序（直接把解压缩的文件拖进去，ctrl+r即可） 方法2：打开谷歌浏览器>输入网址：chrome://extensions/（直接把解压缩的文件拖进去，ctrl+r即可）
Chrome浏览器Vue开发插件：本地调试利器
它解决了在本地开发环境中无法直接调试 Vue 应用的问题，允许开发者查看组件层级结构，追踪数据的变化，分析组件渲染性能，以及进行断点调试等高级功能。 ### 知识点五：使用 Vue 开发插件进行高效调试 当安装了 ...
Chrome扩展：Vue.js调试工具快速安装指南
DevTools包括多个子工具，如Elements（元素）、Console（控制台）、Sources（源代码）、Network（网络）和Performance（性能）等。 3. **Vue.js调试工具的使用** 为了在Chrome上调试Vue.js应用，需要安装对应的Vue...
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
【前端学习指南】Chrome Dev Tools 浏览器调试技巧
范同学的学习历程
11-19 1274
浏览器调试模式下的各个调试工具是常用的工具集，能够帮助开发者理解、调试和优化网页。浏览器工具打开方式：打开命令菜单快捷键：相关命令：dark theme -->DevTool切换成黑色主题light theme -->切换成白色主题Capture area screenshot -->选择范围截图Capture full size screenshot -->选择整个页面截图Capture node screenshot -->捕捉一个node节点截图通过Dock命令可以改变窗口位置Undock命令可
Vue调试工具新版本v5.3.3发布，增强Chrome扩展功能
此文件很可能是开发版本的 Vue-devtools 扩展，包含了调试信息和未经压缩的源代码，用于开发和测试。 #### 使用 Vue-devtools 需要注意的事项 - 请确保你的项目已经使用了 Vue.js，并且版本与 Vue-devtools 支持的...
vue项目优化--减少体积(浏览器sources中看不到项目源码)
weixin_47047590的博客
07-02 600
1.在vue.config.js或者babel.config.js中设置productionSourceMap为false module.exports = { productionSourceMap:false, }
chrome浏览器debug vue项目，跳过vue源码
weixin_42190844的博客
12-31 2763
在就发vue-cli的项目，也会用到webpack，npm等工具。在debug的时候，只是想看当前代码的执行情况。但是调试就会经常进入到vue.esm.js等一些源码文件。一进去就很跳出来了，十分麻烦。 Chrome调试 也是才知道，谷歌浏览器其实有一个黑盒功能，可以设置忽略的文件。设置后，debug就不会进入到这些文件。 F12 点击设置按钮 在 Ignor List 里添加要忽略的文件名称即可。 Debugger for Chrome 调试 1.安装插件 2.添加launch.json配置文件 .
vue 项目源码映射失败问题解决
RealizeInnerSelf丶
11-17 4163
vue 项目调试源码映射失效问题解决、开发者工具内代码乱码问题解决
VUE项目开发，使用开发者工具查看源文件
weixin_44370837的博客
01-25 5157
如何在浏览器看到.vue文件的源文件 问题描述： 今天在开发的时候，想要通过断点的方式看一下代码究竟是咋运行的，打开Chrome浏览器，F12，在开发者工具中选择Soruces，Ctrl + P进行文件查找，找到之后，发现明显不是源文件，调试困难。 解决办法： 在vue.config.js目录中添加如下内容： configureWebpack: { devtool: 'source-map' }, 可以看到，已经是能够方便调试的源文件了。 更多详情可以查看阮一峰老师对 devtool: 's
本地项目调试找不到源码 source not found
我的博客
05-24 652
项目开发过程中，在代码中设置了断点，并启用的debug模式，依然不进入本地源代码，可能是项目地址选择的有问题。如下图：       执行 Add—>选中workspace——>选中调试代码所在的项目即可 ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值