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

最新推荐文章于 2024-08-12 22:02:44 发布
最新推荐文章于 2024-08-12 22:02:44 发布
阅读量861 收藏
点赞数 3
文章标签： chrome vue.js 前端
原文链接：https://blog.csdn.net/liuhengjun_it/article/details/135021358
版权

问题描述：
在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

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

⑧o年崋
关注
Vue3 - 前端项目代码防止被调试/被爬，阻止浏览器F12开发者工具
良月柒
05-11 1010
大家都知道浏览器的开发者工具能干啥，正经的用法：开发时调试代码逻辑，修改布局样式；不正经的用法：改改元素骗骗人，找找网站接口写爬虫，逆向js破解加密等等，所以说前端不安全，永远不要相信用户的输入。先用debugger关键字阻止你进行任何操作，随后，在你关闭之后，又直接跳转到空白页，不让你接着操作。前端代码防止被调试，无非就是打开控制台，卡住页面不让他往下走。1、打开控制台，无限debugger。3、打开控制台，重定向到新的页面。2、打开控制台，无限加载。如何破解这个现象呢？
Vue3 - 项目中使用 debugger 在 chrome 谷歌浏览器中失效
良月柒
05-11 1287
在 Vue 应用中，debugger;语句用于在代码中设置断点，以便在浏览器的开发者工具中进行调试。这个语句会使得代码在执行到这一行时停止，你可以查看当前的变量值、调用堆栈等信息。
纯干货！一文带你详解 Chrome F12 Network 选项
最新发布
apex_eixl的博客
08-12 1742
Chrome 开发者工具 F12 是前端开发、测试人员的利器，使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。
devtool: ‘source-map‘在谷歌浏览器控制台不起作用的问题处理
Insect的博客
02-26 949
devtool: 'source-map’已经配置过了，但是在谷歌浏览器控制台调试的时候依旧只能查看webpack编译后的js文件，无法查看vue源码，这是后可能是谷歌浏览器将源码给忽略了。F12进入工作台，打开设置，打开忽略列表，将勾选取消，然后重新调试vue项目，可正常显示vue源码。
关于Chrome浏览器vue devtools F12后控制台不显示VUE选项的问题
wenbaikaichang的博客
07-12 1415
1.首先找到这个插件安装的位置（我浏览器谷歌为例）：C:\Users\fang\AppData\Local\Google\Chrome\User\Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\5.3.4_0，找到并打开manidest.json文件。在安装完Vue.js devtools后，打开自己写的vue网页，发现右上角vue图标虽然亮了，但是通过F12打开控制台也没有Vue这个选项。最后保存，重新Shift+F12就可以了。
vue调试无法debbger的解决方法
k0933的博客
12-15 1571
【代码】vue调试无法debbger的解决方法。
谷歌浏览器安装vue插件
06-28
1. 打开谷歌浏览器：启动谷歌浏览器，确保你正在使用最新版本，因为新功能和更新通常只会在最新版本中提供。 2. 访问Chrome Web Store：在地址栏输入`chrome://extensions/`，或直接点击浏览器右上角的三个垂直点，...
跟踪网页特效是执行的哪段javascript代码(chrome谷歌浏览器,firefox火狐浏览器).zip
01-10
在Chrome谷歌浏览器和Firefox火狐浏览器中，我们可以利用内置的开发者工具来定位并分析运行中的JavaScript代码。 Chrome浏览器提供了强大的开发者工具（DevTools），其中的"Sources"面板是调试JavaScript的主要场所...
chrome浏览器调试js，结果Sources里面找不到js文件解决办法
热门推荐
feinifi的博客
01-16 4万+
      页面出现问题，就debug，这是前端开发工程师最常见的做法，但是有时候，我们打开开发者工具，在sources查找js文件，却发现怎么也找不到，无法设置断点。但是文件在network选项卡里确实load过了。 解决办法： 第一种办法：给需要调试的js文件头部加上这么一句://# sourceURL=dynamicScript.js 这一句像一个注释，但是确实能起到作用。   ...
vue调试代码开发者工具
04-16
Vue.js Devtools是一款专为Vue.js开发者设计的强大工具，它作为一个Chrome浏览器扩展，允许开发者在浏览器的开发者工具中深入地检查、调试和修改Vue应用程序。这个工具极大地提升了开发和调试Vue项目的效率，使得...
无法使用debugger，debugger在项目中不生效，导致无法有效排查问题
qq_42259940的博客
03-08 2893
应用debugger调试Vue项目，需要在项目中需要的位置写debugger,项目运行后，打开浏览器按F12，在chrome sources页签中就会直接进入断点，至此就可以可以进行单步、跳步调试。debugger是浏览器提供的调试语句，其主要是通过停止JS的执行，相当于设置断点。在JS代码编写的过程中，我们都会通过浏览器的调试模式（F12）来检查代码逻辑是否正确，大多数我们都是通过设置断点来进行调试。2开启sourcemap。3谷歌浏览器设置解决。
vue 项目中，debugger不生效的处理方式。
举案齐眉意难平
06-28 2563
配置webpack，在vue.config.js给configureWebpack添加devtool："source-map"键值对。本人亲测，无效.......。我看很多大神的博客是有效的，于是我深入分析了一手。我无效的原因是，我在webpack中添加了太多自定义的东西。导致加了这个键值对只有会出现这种奇怪的情况。近期在项目开发中发现前些年自己封装的架构，在近期的使用中。并且console也总是指向vue编译后的js代码。你的debugger始终会到达这个编译后的函数。属性（亲测有效）操作步骤如下图↓。
Vue中使用debugger在chrome谷歌浏览器中失效问题（已解决）
qq_45024094的博客
12-13 1万+
以上两种解决办法本人均尝试过，确实都是可以解决的。没有debugger太难受了，不过好在解决了，此处用于记录一下怎么解决该问题的。有问题可在评论下方留言，博主看到会回复的。
关于vue项目浏览器debugger失效问题
qq_25983579的博客
03-13 4942
关于vue项目浏览器debugger失效问题
Vue页面中debugger失效
MMF博客园
01-24 2047
Vue页面中debugger失效
vscode写debugger无效 / 谷歌F12想network接口和console一起出现
Hanx_的博客
04-10 981
在项目里，想用debugger打断点调试，发现不生效在文件中，搜索，在里面加重新运行项目，就可以用debugger了。
Chrome升级到120版本后VUE项目无法使用SourceMap
wangooo的博客
12-18 930
设置-忽略列表-启用忽略清单（升级120版本后，默认启用的）
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-18 2485
今天在代码里面输出 console.log 信息直接指向了 vue.js，并且代码里面写了 debgger 也不生效。找到这个 ignore list 的 custom exclusion rules 取消掉。f12 找到浏览器的这个设置图标。
vue 项目 谷歌浏览器调试debugger 鼠标移上去看不到值
05-31
这个问题可能是由于 Vue 项目使用了 Webpack 或者其他打包工具，导致代码经过了压缩和混淆，从而使得调试器无法正确地显示变量的值。 解决这个问题的方法是在调试代码的时候，使用 Chrome 浏览器的开发者工具中的 Sources 面板，找到需要调试的代码文件，然后在需要调试的行上打上断点。当代码执行到这个断点时，停止执行并在调试器中查看变量的值。 如果断点无法生效，可以在代码中添加 `debugger` 语句来强制触发断点，例如： ``` function foo() { const a = 1; debugger; // 在这里添加断点 const b = 2; return a + b; } ``` 当代码执行到 `debugger` 语句时，会立即停止执行并进入调试器，可以查看变量的值以及调用栈等信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值