JS调试必备的5个debug技巧

浅浅的花香味﹌ 2022-07-24 07:17 182阅读 0赞

**1. debugger;**

我以前也说过，你可以在JavaScript代码中加入一句`debugger;`来手工造成一个断点效果。  
需要带有条件的断点吗？你只需要用`if`语句包围它：

复制代码代码如下:

if (somethingHappens) \{

debugger;

\}

但要记住在程序发布前删掉它们。

2. 设置在DOM node发生变化时触发断点

有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。

谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做“Break on…”，你在DOM节点上右键，就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。

[![tumblr\_inline\_n1s6xpVmg21r2][tumblr_inline_n1s6xpVmg21r2]][tumblr_inline_n1s6xpVmg21r2]

3. Ajax 断点

XHR断点，或Ajax断点，就像它们的名字一样，可以让我们设置一个断点，在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时，这一招非常的有效。

[![tumblr\_inline\_n1s7ceQ08c1r2][tumblr_inline_n1s7ceQ08c1r2]  
][tumblr_inline_n1s7ceQ08c1r2]

4. 移动设备模拟环境

谷歌浏览器里有一些非常有趣的模拟移动设备的工具，帮助我们调试程序在移动设备里的运行情况。

找到它的方法是：按F12，调出开发者工具，然后按`ESC`键(当前tab不能是Console)，你就会看到第二层调试窗口出现，里面的Emulation标签页里有各种模拟设备可选。

当然，这不会就变成了真正的iPhone，只是模拟了iPhone的尺寸，触摸事件和浏览器User Agent值。

[![tumblr\_inline\_n1s71kb2NL1r2][tumblr_inline_n1s71kb2NL1r2]  
][tumblr_inline_n1s71kb2NL1r2]

5. 使用Audits改进你的网站

YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具，叫Audits。

它可快速的审计你的网站，给你提出非常实际有效的优化你的网站的建议和方法。

[![tumblr\_inline\_n1s76yISqv1r2][tumblr_inline_n1s76yISqv1r2]  
][tumblr_inline_n1s76yISqv1r2]

还有其它的吗？

没有这些工具，我不知道将如何开发。我还会写更多的关于这方面的技巧——一旦我有所发现，请关注我的最新文章。

[tumblr_inline_n1s6xpVmg21r2]: /images/20220722/7a87c217227848ef80f21a0f48877487.png
[tumblr_inline_n1s7ceQ08c1r2]: /images/20220722/55c1c74380bd4e738b68022dd8592fb1.png
[tumblr_inline_n1s71kb2NL1r2]: /images/20220722/6c9e842309c44c3dbb479f9093a582cf.png
[tumblr_inline_n1s76yISqv1r2]: /images/20220722/13ee5d573488434db3432d4bc120a4d2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关在 IDEA 中调试 Bug的必备技巧

Debug用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用Debug模式可以分析定位异常发生的位置，以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪

傷城~/ 2024年02月21日 04:06/ 0 赞/ 46 阅读

相关【调试】939- 5个Chrome调试混合应用的技巧

![eed4fa439e41000df1ab7bca947db70b.png][] 对前端开发人员来说，Chrome 真是一个必备的开发工具，大到页面展示，小到 BUG 调试

旧城等待，/ 2023年01月17日 04:43/ 0 赞/ 254 阅读

相关 Debug项目调试技巧

Debug项目调试技巧基本概念 IDEA中Debug使用步骤计算表达式条件断点基本概念 Debug的作用:

我就是我/ 2022年11月30日 04:21/ 0 赞/ 240 阅读

相关 JavaScript程序员必备的5个debug技巧

我一直使用[printf调试程序][printf]，一般来说都是比较顺利，但有时候，你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用： 1.

今天药忘吃喽~/ 2022年08月14日 02:49/ 0 赞/ 186 阅读

相关 JS调试必备的5个debug技巧

1. debugger; 我以前也说过，你可以在JavaScript代码中加入一句`debugger;`来手工造成一个断点效果。需要带有条件的断点吗？你只需要用`if`

浅浅的花香味﹌/ 2022年07月24日 07:17/ 0 赞/ 183 阅读

相关 debug调试技巧

还在断点调试？教你四种调试技巧让你快速定位错误！原创 2017-01-07 令狐冲 [九章算法][Link 1] 在九章做老师的这段时间，许多同学经常把一

我就是我/ 2022年06月08日 12:55/ 0 赞/ 310 阅读

相关【Intellij IDEA系列】IDEA的Debug调试技巧

以前一直是使用Eclipse进行开发的，突然使用idea进行开发，许多习惯都一时改变不过来，同时对于idea中的许多界面操作和快捷使用起来都特别变扭，这里总结一下debug调试

冷不防/ 2022年06月08日 05:49/ 0 赞/ 272 阅读

相关 js调试技巧

1、谷歌debug调试快捷键F12 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

r囧r小猫/ 2022年04月23日 11:02/ 0 赞/ 282 阅读

相关 Eclipse的Debug调试技巧(转)

1、举例场景一：小明写了一个任务执行者，该执行者不间断的执行一些任务，在现网上运行了一段时间后，发现有概率的出现一些故障，发现运行一段时间后，该任务者异常退出了，退出

叁歲伎倆/ 2021年12月01日 10:38/ 0 赞/ 466 阅读

相关 IDEA DeBug 调试技巧

优质文章，及时送达 ![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 作者 | 菩提树下的杨过来源 | www.cnblogs.com/yjmy

素颜马尾好姑娘i/ 2021年07月31日 18:33/ 0 赞/ 495 阅读