如何阻止页面不断debugger?

更新日期: 2019-09-23阅读: 3.8k标签: bug

问题复现

一次扒某网站前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。


问题分析

每次在断点处停下来的时候页面都会跳到source这个tab页面,也能够看到他的debugger的代码,其实他的实现很简单,只有这一行代码

(function() {var a = new Date(); debugger; return new Date() - a > 100;}())

虽然简单,但是却很有效。

  • 不停地打断你,页面跳到source页面,阻止你看他代码不
  • 断的产生不可回收的对象,占据你的内存,造成内存泄漏,没过多久浏览器就会卡顿

所以他带来的影响还是挺大的,我们需要解决这个问题。


问题解决

这个问题解决起来还是蛮简单的,问题解决只需要一句话:禁止断点

而对应的操作是在Chrome控制台的Source Tab页点击Deactivate breakpoints按钮或者按下Ctrl + f8(下图)。

clipboard.png

这样就能禁用断点了,问题就得到了解决,但是当你需要调试的时候记得要起他哦。很简单的操作,但是你如果对Chrome控制台调试不熟悉的话还是比较头疼的。在这里记录一下,分享给更多的人。


更新1

后来发现这种做法有时候有些不妥,就比如有我们看别人网站代码有时候就是为了调试网站的代码,那么这时我们这么直接干脆的禁止断点后我们也没办法调试网站的代码了,那这就有点杀敌一千自损八百的意思。那有什么办法可以满足我们既能阻止网站一直debugger还能让我们继续调试网站的代码呢?这就要看网站怎么实现不断debugger了:

有的网站做的比较简单,是用具名函数做的,类似这样

setInterval(startDebug, 100); // 举个例子而已,很多网站并不是这么实现的
function startDebug() { debugger; };

这种情况比较好解决,我们随便重新定义这个方法就行了,形如:

function startDebug() {};

但是也有的网站做的比较厉害点,用匿名函数来实现,形如:

setInterval(function () { debugger }, 100); // 举个例子而已,很多网站并不是这么实现的

这种情况就比较蛋疼了,目前我是没啥解决方法,如果有人知道的话,不妨在下面留言了。


更新2

下面有位老兄(@XYShaoKang)提到用条件断点来应对这样的实现

setInterval(function () { debugger }, 100); // 举个例子而已,很多网站并不是这么实现的

我试了下,确实可以,但是有局限性。另外,我发现Add conditional breakpoint下面的Never pause here也能在突破反调试的时候也能起到一定作用。局限性与上Add conditional breakpoint一样。

链接: https://www.fly63.com/article/detial/5518

10个JavaScript常见BUG及修复方法

JavaScript语言设计太灵活,用起来不免要多加小心掉进坑里面。如今网站几乎100%使用JavaScript。JavaScript看上去是一门十分简单的语言,然而事实并不如此。它有很多容易被弄错的细节,一不注意就导致BUG。

程序员修复一个bug的心路历程,太形象了

和你们一样,我也是一个普普通通的前端开发者,在日常工作中,大部分时间不是在写新代码,而是在改代码,或是需求被改了,或是报bug了。当别人想我们报一个bug,直到我们把bug完整的修复好,整个过程是一个怎样的经历?

程序员沉迷 Bug 可以有多疯?

苍天啊!大地啊!竟然有程序员,因为沉迷代码,快要痛失女友了!那么,程序员写起代码,究竟可以有多沉(shang)迷(yin)?程序员为了写代码,可以有多疯?看了网友们的评论

程序员遇到Bug时的多种反应 你是哪一种?

开发应用程序是一个非常有压力的工作。没有人是完美的,因此在这个行业中,代码中出现bug是相当普遍的现象。面对bug,一些程序员会生气,会沮丧,会心烦意乱,甚至会灰心丧气,而另一些程序员会依然保持冷静沉着

Bug的处理流程

缺陷的定义:软件没有实现产品的说明书所描述的功能、软件实现了产品说明书描述不应有的功能...缺陷的等级-致命:一招毙命的缺陷,使你的系统无法运行,有造成数据泄漏的安全性问题。严重:可以引起易于纠正的异常情况、可能引起易于修复的故障或对产品外观难以接受的缺陷。

关于 injectBabelPlugin is not a function

在学习ant design的自定义主题这一功能时候,官方给到创建config-overrides.js文件,并且写入如下代码, 查阅资料发现react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired,react-app-rewired的新版本删除所有方法injectBabelPlugin

零bug策略,会不会本身是个bug?

如今软件开发迭代频繁,随之而来的是产品质量难以保障,用户一天天被动找到 bug 而骂开发,开发要么被拉去祭天,要么拉慢开发新功能的进度条,分出时间精力处理 bug。这已经成了软件开发行业的一大难题,有什么解决方案呢?

不能精准定位bug?可能是你没get到这几个打印日志的诀窍!

当你遇到问题的时候,只能通过debug功能来确定问题,你应该考虑打日志,良好的系统,是可以通过日志进行问题定位的。当你碰到if…else 或者 switch这样的分支时,要在分支的首行打印日志,用来确定进入了哪个分支

Web开发人者的十大Bug跟踪工具

有许多可视化的 Bug 跟踪工具,通常可以根据特性集、集成和定价进行分类。选择一个 Bug 跟踪工具时,需要整体考虑团队的规模和需求。对于很多团队来说,项目管理并不是必需的,因此对 Bug 跟踪工具的真正需求变成了一个强大的解决方案提供者

程序员如何减少开发中的 Bug?

周会上同事抛出了一个问题,程序员如何减少开发中的 Bug?很有意思的一个话题,本篇文章我们来进行探讨与总结。爱因斯坦曾经说过:「如果给我一个小时解答一道决定我生死的问题,我会花55分钟来弄清楚这道题到底是在问什么

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!