vue项目中debugger调试看不到源码

最新推荐文章于 2024-08-09 18:00:00 发布
最新推荐文章于 2024-08-09 18:00:00 发布
阅读量5.8k 收藏 7
点赞数
CC 4.0 BY-SA版权
分类专栏： vue学习 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42177730/article/details/124326128
当在Vue项目中使用debugger进行调试时，遇到只能看到压缩后的代码而无法查看源码的问题。解决方法包括在vue.config.js中设置productionSourceMap为true，并添加devtool配置为'cheap-module-source-map'，然后重新启动项目。

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

在修改vue项目的问题时，发现代码里面输入debugger后，在浏览器点击操作发现可以进入断点，但显 示的是已经压缩好的代码，无法看到源码 

。

解决方案：

 1 打开vue.config.js文件， 修改productionSourceMap: true, 

1 打开vue.config.js文件，添加 devtool: "cheap-module-source-map", 然后重启项目。

 

 

 

最低0.47元/天 解锁文章

200万优质内容无限畅学
前端调试遇到的无限debugger的原理与绕过
墨痕诉清风的博客
01-15 979
debugger 是 JavaScript 中定义的一个专门用于断点调试的关键字，只要遇到它，JavaScript 的执行便会在此处中断，进入调试模式。有了 debugger 这个关键字，我们就可以非常方便地对 JavaScript 代码进行调试，比如使用 JavaScript Hook 时，我们可以加入 debugger 关键字，使其在关键的位置停下来，以便查找逆向突破口。但有时候 debugger 会被网站开发者利用，使其成为阻挠我们正常调试的手段。
Chrome浏览器找不见Vue项目源代码
票票的博客
08-04 3974
Vue项目在Chrome浏览器的源代码混乱，无法调试问题 先上个问题图： 在文件 vue.config.js 的configureWebpack对象加一个元素 devtool: ‘source-map’ 如图： 搞定！重启下项目，按F12 看看效果去吧 之所以会出现这种情况，一般是Vue模板项目 取消设置SourceMap，为了避免前端源码在浏览器端泄露。 解决这个问题，就是配置一个 SourceMap就好。 关键点来了，不同脚手架版本，配置代码不同！我的脚手架是3.x.x，如果你是其他版本，就找找其他
Vue3源码调试步骤
Yolanda_NuoNuo的专栏
05-27 2138
一、github下载源码 1、vue3源码 2、下载3.0.11版本 Download zip 二、环境 1、在VS code中打开刚才解压缩的源码 2、打开VS code中的终端界面 输入 yarn install 什么？没装yarn？ 那装个呗 npm install -g yarn mac看????这里 mac环境zsh: command not found: yarn 3、跑下试试 yarn dev 哦豁，报错了 Error: Command failed with exit code
vue项目debugger调试看不到源码
qq_46524280的博客
12-15 2481
【代码】vue项目debugger调试看不到源码。
随记：vue无法debug到源码处
LL_long的博客
11-09 920
随记：vue无法debug到源码处
使用 Chrome 调试 Vue3 的 TypeScript 源码
编程三昧
09-27 1001
相信很多同学都已经上手 Vue3 了，用起来是真香！ 学习技术又怎能不学习源码，多看看源码，说不定自己哪天也成大佬了呢 ︿(￣︶￣)︿ 今天，我来记录一下自己调试 Vue3 源码的过程，方便以后参考。 准备工作 首先需要下载源码和安装依赖： mkdir code git clone https://github.com/vuejs/vue-next.git cd ./vue-next yarn install 执行完上面这一套之后，得到如下文件结构： 贴心小提示：由于国内访问 Github 实在龟速.
JS debugger 调试
04-26
JavaScript（简称JS）调试是开发过程中不可或缺的一部分，它帮助开发者找出代码中的错误、性能瓶颈以及逻辑问题。在本文中，我们将深入探讨JS调试的各种方法、工具和技术，以便于提升您的编程效率。 首先，我们来看...
解决Chrome 本地调试vue,Sources下找不到源代码的问题
Knight
07-16 5551
解决Chrome 本地调试vue,Sources下找不到源代码的问题
Vue3.x源码调试的实现方法
10-16
主要介绍了Vue3.x源码调试的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3项目怎么debug调试，为你解惑debug为什么看不到源码——jeecgboot-vue3
JEECG官方博客
09-05 2620
采用setup标签写的代码，debuger的时候看不到源码，导致无法调试
解决 WebStorm 调试 Vue 定位不到源代码
MAIMIHO的博客
03-24 1139
vue.config.js 中配置。
debug模式不出现源代码
yamanda的博客
05-17 5776
选择debug configurations，选择对应的项目，点击source，清除默认的jdk源码，点击add，选择Java project，选择要导入的源代码，ok即可
Vue3项目调试及源码调试问题
lcs12321的博客
05-05 551
"webRoot": "${workspaceFolder}/exampleclient/app/src",//此处为launch.json所在的根目录+项目到src的目录。接下来按照教程操作即可。1.关于源码调试的问题。
VUE dubug调试浏览器定位不到代码位置的解决方法
hantanxin的专栏
11-05 5409
我遇到的问题是：代码里前端代码里加了断点，浏览器F12定位不到代码位置 我是参照的vue-cli 关于debugger 调式 找不到断点出的解决方法_java123_PB的博客-优快云博客，我的是若依的前后端分离的项目，采用的是第二种方法解决的，简单记录下： 在vue.config.js 这个配置文件中配置： module.exports = { configureWebpack: { devtool:'souce-...
vue代码中使用debugger不生效或无法跳转源码终极解决方案
前端蜗牛君
08-09 4949
debugger不生效，或者debugger生效，但进入的不是源码，终极解决
vue中debugger无法调试
weixin_45869811的博客
01-03 2747
vue中debugger无法调试
vscode调试vue3项目
最新发布
03-20
<think>嗯，用户想在VSCode里配置调试Vue3项目，我需要仔细看看他们提供的引用内容。首先，引用[1]提到在vue.config.js里设置devtool为'source-map'，这对生成源码映射很重要，方便调试。然后配置launch.json，这部分需要确定Vue CLI的版本，因为如果是Vue CLI 3的话，步骤可能和旧版不同。引用[2]展示了一个图形化调试的效果，用Edge浏览器插件，可能需要安装相关扩展。 接下来，我需要确保步骤正确。首先，生成source map，这能帮助VSCode正确映射编译后的代码到源码。然后安装Debugger for Edge或Chrome的扩展，因为Vue项目通常在浏览器中运行。配置launch.json的时候，可能需要指定url、webRoot，以及正确的端口。用户可能遇到的问题包括路径配置错误，或者source map没生成，导致断点不生效。 还要注意Vue3和Vue2在配置上的区别，比如是否需要额外的插件或者设置。另外，使用Vite作为构建工具的话，配置可能有所不同，但用户提到的是Vue CLI 3，所以应该按照Vue CLI的配置来处理。最后，提醒用户测试配置，启动调试会话，并检查断点是否有效，如果无效可能需要检查路径或者重新生成source map。</think>### 在 VSCode 中配置调试 Vue3 项目的步骤 #### 1. 生成 Source Map（源码映射） - **作用**: 将编译后的代码与源码关联，便于调试定位 - **配置方法**: 在项目根目录的 `vue.config.js` 中添加以下配置（若无则新建）： ```javascript module.exports = { configureWebpack: { devtool: 'source-map' } } ``` 此配置适用于 Vue CLI 3+ 项目[^1] #### 2. 安装调试插件 - **推荐扩展**: - `Debugger for Edge`（微软官方） - `Debugger for Chrome`（谷歌调试器） - 或直接使用 `JavaScript Debugger`（VSCode 内置） #### 3. 配置 launch.json 1. 打开 VSCode 调试面板（`Ctrl+Shift+D`） 2. 点击「创建 launch.json 文件」 3. 添加以下配置： ```json { "version": "0.2.0", "configurations": [ { "type": "edge", "request": "launch", "name": "Vue3 Debugger", "url": "http://localhost:8080", // 与项目启动端口一致 "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] } ``` #### 4. 启动调试 1. 通过 `npm run serve` 启动开发服务器 2. 按 `F5` 启动调试会话 3. 在代码中设置断点（需在`.vue`文件的`<script>`部分或JS文件中设置） #### 验证配置成功标志 - 浏览器自动打开项目页面 - VSCode 调试工具栏变为激活状态 - 断点可正常暂停代码执行[^2]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值