JS调试必备的5个debug技巧

浅浅的花香味﹌ 2022-07-24 07:17 195阅读 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 条评论，195人围观）

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

相关阅读

相关 debug技巧之远程调试

今天给大家分享一下我平时是怎么调试代码的，不是权威也不是教学，就是简单分享一下，如果大家还有更好的调试方式也可以多多交流哦。当我们的应用发布到线上之后，就不能随意启停了，...

墨蓝/ 2024年05月24日 05:27/ 0 赞/ 78 阅读

相关 Node 调试利器，前端、Node 开发必备 - VSCode JS Debug Terminal

经常看到有同学抱怨 `Node` 调试麻烦或者是搞不清怎么调试各种脚本、`Jest`、`Webpack` 等等，而偶尔看到的调试相关的文章又全都是在写 `inspect`、`l

绝地灬酷狼/ 2024年03月17日 17:00/ 0 赞/ 75 阅读

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

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

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

相关 Debug项目调试技巧

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

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

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

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

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

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

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

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

相关 debug调试技巧

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

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

相关 js调试技巧

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

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

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

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

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

相关 IDEA DeBug 调试技巧

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

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