Chrome 谷歌浏览器升级到120版本后VUE项目F12无法正常输出日志和调试Debugger ，无法使用Sourcemap的解决办法

已于 2023-12-15 17:16:02 修改
阅读量3.4k 收藏 18
点赞数 34
文章标签： chrome 前端 vue
于 2023-12-15 17:07:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuhengjun_it/article/details/135021358
版权

问题描述：

F12无法正常 console.log 输出日志，统一在vue.js 下输出定位不到源代码，在代码中写debugger也无法进入断点。导致无法使用Sourcemap。

1、F12开发者工具点击右上角设置

2、设置-忽略列表-启用忽略清单（升级120版本后，默认启用的）

3、关闭启用忽略清单，再次尝试就可以了

MoMoRan
关注
  • 34
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
谷歌浏览器插件 chrome扩展vue
10-25
然后，你可以使用Chrome的开发者模式将扩展加载到浏览器中进行测试和调试。 为了发布Chrome扩展，你需要在Chrome Web Store上创建一个开发者账户，遵循提交指南，上传你的扩展和相关元数据。一旦审核通过，你的Vue...
解决Vue项目F12查看源代码问题
weixin_67644104的博客
03-13 4577
在Vue项目中，Vue-cli默认可以通过F12查看前端代码，这可能会造成前端代码泄露。为了代码的安全性，隐藏掉比较好。
谷歌浏览器debugger失效
u014773932的博客
01-18 628
问题描述：debugger失效，只能打断点，而且打了断点之后，点击下一步就会直接走完，相当于下一步并没有生效，调试的代码也像是编译过后的代码一样！谷歌浏览器-更多工具-开发者工具-设置-Ignoer List-取消勾选/node_modules/|/bower_components。
浏览器（谷歌）调试为什么没有进断点
最新发布
qq_49782492的博客
06-21 387
看源代码下面是否有提示，该代码加入了忽略列表，如果加了了忽略列表，可以在设置->忽略列表中移除。
chrome调试界面不能够正确显示是因为没有刷新
kfgauss的博客
03-05 1686
如上图。 不能够显示正确。 只需要F5刷新就可以正常显示了。下面的不能够正确显示是因为我设置了固定width.
谷歌浏览器调试技巧
热门推荐
Nothing 开发的点点滴滴
08-01 2万+
前端js调试技巧 因为工作中，经常涉及到前端后台数据交互，前端js操作dom，所以会前端调试非常重要。 我一直习惯用谷歌浏览器，所以这里就介绍一下谷歌浏览器的调试方法： 首先介绍一下调试界面：(打开浏览器，按F12打开调试窗口) 如上图所示，现在分别介绍每个菜单在调试中的作用 Elements：首先点①，然后选择要查看的页面元素②，然后中间
vue chrome debugger 无效
carbonzhao的专栏
12-09 2902
此处省略N多个问候vue.js mum's words！
debugger在chrome谷歌浏览器中失效问题！！！
12-25 4865
文件vue.config.js中找到如下configureWebpack位置，加入。1）找到浏览器右上角三个点==》更多工具 ==》开发者工具（或者F12），重新启动项目debugger即可生效。
Chrome调试
赤蓝紫の博客
02-15 1445
Chrome调试 个人博客： Chrome调试 Elements面板 步骤： 打开 DevTools，有多种方式可以打开，F12快捷键，右键检查等 查看要检查的元素的样式，点击下图红框框，再点击页面元素，或者鼠标放在要检查的元素上面，右键检查 在DevTools下的Styles中增删改查样式 类名操作 ，直接双击Elements下的类名，就可以进行修改类名 点击"Styles"下的".cls"进行操作 伪类选择器样式修改： 在Elements中找到对应元素，右键选择Force st
谷歌浏览器vue插件vue-devtools
04-10
这个插件可以在谷歌浏览器（Chrome）中安装，帮助开发者调试、检查和优化Vue应用。 Vue Devtools 提供了以下主要功能： 1. **组件树**：在Vue Devtools的“Components”面板中，你可以查看应用的组件结构。每个...
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4 是一款专为Vue3开发者设计的谷歌浏览器扩展工具，它极大地简化了Vue应用程序的调试过程。这款工具能够帮助前端开发者深入理解Vue3的应用状态，实时追踪组件数据变化，定位并解决问题，提高...
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展...
chrome浏览器debugger失效
qq_42450258的博客
12-15 5017
2.在设置中找到忽略列表，点击取消排除规则即可。然后项目里断点就可以正常使用了。1.f12打开控制台点击设置。
vue调试无法debbger的解决方法
k0933的博客
12-15 1498
【代码】vue调试无法debbger的解决方法。
（一）网络爬虫小姐姐图片---谷歌浏览器浏览的某些网站被禁用”右键检查“和“F12”，不能查看源代码。将爬取的图片重命名。
K_AAbb的博客
10-07 1469
【代码】（一）网络爬虫小姐姐图片---谷歌浏览器浏览的某些网站被禁用”右键检查“和“F12”，不能查看源代码。将爬取的图片重命名。
chrome-调试技巧个人总结
badbaby52906的博客
02-16 7739
在控制台输入下面一段代码（时间自己选择），返回页面，鼠标放在需要调试的dom上，把hover样式显示出来，等待 debugger，然后就能安心调试hover样式了。先定位到要调试的元素，
解决Google Chrome浏览器不能打断点问题
big__banana的博客
02-22 8972
解决在Google Chrome 浏览器上无法断点调试，这样就可以在浏览器上开始调试js了。实测无敌好用
Vue中使用debugger在chrome谷歌浏览器中失效问题（已解决）
qq_45024094的博客
12-13 1万+
以上两种解决办法本人均尝试过，确实都是可以解决的。没有debugger太难受了，不过好在解决了，此处用于记录一下怎么解决该问题的。有问题可在评论下方留言，博主看到会回复的。
vue 项目 谷歌浏览器调试debugger 鼠标移上去看不到值
05-31
这个问题可能是由于 Vue 项目使用了 Webpack 或者其他打包工具，导致代码经过了压缩和混淆，从而使得调试器无法正确地显示变量的值。 解决这个问题的方法是在调试代码的时候，使用 Chrome 浏览器的开发者工具中的 Sources 面板，找到需要调试的代码文件，然后在需要调试的行上打上断点。当代码执行到这个断点时，停止执行并在调试器中查看变量的值。 如果断点无法生效，可以在代码中添加 `debugger` 语句来强制触发断点，例如： ``` function foo() { const a = 1; debugger; // 在这里添加断点 const b = 2; return a + b; } ``` 当代码执行到 `debugger` 语句时，会立即停止执行并进入调试器，可以查看变量的值以及调用栈等信息。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值