首页 > 教程脚本 > 正文

JavaScript在调试Bug时的技巧,一般人我不告诉他。

1 debugger

只要在代码中添加debugger,chrome在运行的时候会自动停在那里。还可以用条件语句把它包裹起来,这样就可以在需要的时候才执行它。

if (thisThing) {
  debugger;
}

2 console功能

调试时console.log是最常用的命令之一,此外还有一些其他的使用的功能

2.1 console.log

console.log()中,可以用%s设置字符串,%i设置数字,%c设置自定义样式,console.log()接受的两个参数,前者是描述性的语言,而第二个参数是与第一个参数位置对应的字符

console.log(' %c %s %s %s', 'color: yellow; background-color: black;', '–', '测试信息', '–');

2.2 console.table()

很多的时候,你可能会有一堆对象需要查看。可以用console.log把每一个对象都输出出来,也可以用console.table语句直接把所有的对象都直接输出成为一个表格

2.3 console.time()和console.timeEnd()

当想知道某些代码的执行时间的时候这个工具将会非常有用,特别是当你定位很耗时的循环的时候。

2.4 console.trace()

console.trace()会显示函数调用的完整的堆栈轨迹信息

getTopN2(arr, n) {
  // sort参数返回值大于1,就交换位置
  console.trace('getTopN2');
  return [...arr].sort((a, b) => b - a).slice(0, n)
}

结果如下:

3 DOM节点变化时中断代码运行

在调试DOM节点时,可以在Chrome的Elements界面,右键点击某个元素,选择Break on选项,可以在子节点变化时中断、在元素属性变化时中断或者在节点被移除时中断代码运行

4 在控制台设置断点

4.1 快捷键

  • F8: 跳转至下个断点
  • F10: step over, 单步执行, 不进入函数
  • F11: step into, 单步执行, 进入函数
  • shift + F11: step out, 跳出函数

4.2 在代码上设置断点

对于每个已添加的断点都有两种状态:激活和禁用。刚添加的断点都是激活状态,禁用状态就是保留断点但临时取消该断点功能。

在Breakpoints列表中每个断点前面都有一个复选框,取消选中就将禁用该断点。断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面Chrome断点设置钮临时禁用所有已添加的断点,再点一下恢复原状态。

4.3 逐步执行

每点击一次,JS语句往后执行依据,F11

4.4 逐过程执行

和“逐语句执行”按钮不同,“逐过程执行”按钮常用在一个方法调用多个JS文件时,涉及到的JS代码比较长,则会使用到这个按钮。

在复杂的JS文件中,F11会进入到jQuery等工具库文件的内容,点击逐过程执行的按钮就可以跳过框架的JS脚本了

4.5 条件断点

已有断点位置的右键菜单中选择“Add Breakpoint…”或者空白位置右键出现的菜单选择“Add Conditional Breakpoint”,可以设置触发断点的条件,就是写一个表达式,表达式为true时才触发断点。

可以用条件断点代替在代码中的console.log

5 调用栈(Call Stack)

在断点停下来时,右侧调试区的Call Stack会显示当前断点所处的方法调用栈,比如有一个函数g()其中又调用了函数f(),而我在f()中设置了一个断点,那么执行函数g()的时候会触发断点,其调用栈显示如下:

最上面是f(),然后是g()。调用栈中的每一层叫做一个frame,点击每个frame可以跳到该 frame 的调用点上。

此外,还可以在frame上用右键菜单重新开始执行当前frame,也就是从该frame的开始处执行。比如在函数f()的frame上Restart Frame, 断点就会跳到f()的开头重新执行,context中的变量值也会还原。

这样结合变量修改和编辑代码等功能,就可以在当前frame中反复进行调试,而不用刷新页面重新触发断点了。

6 查看变量

Call Stack列表的下方是Scope Variables列表,在这里可以查看此时局部变量和全局变量的值。

7 临时修改 JavaScript 代码

Chrome中可以临时修改JS文件中的内容,保存(Ctrl+S)就可以立即生效,结合Console等功能就可以立即重新调试了。但注意这个修改是临时的,刷新页面修改就没了。

8 在页面操作时触发断点

在Source面板,右下角Event Listener Breakpoints菜单,选择不同的类型的DOM事件,可以在页面上发生对应的事件时,触发断点

9 Copy As Fetch复制为 Fetch

在Network标签下的所有的请求,都可以复制为一个完整的Fetch请求的代码。

操作:

  • Network标签页中,选中一个请求
  • 右击,选择Copy –> Copy as fetch

10 截屏

在新版本的Chrome中,提供了一个截图的API,你可以将整个页面截图或者截取部分页面元素,且截取的图片尺寸跟浏览器当前视图中要截取的内容所占尺寸一致。截图输出的是png格式的图片,会自动通过浏览器下载到默认的目录下。现在有三种截取的方式:截取整个页面、部分元素 或 当前视图。

  • CMD + SHIFT + P(windows中用CTRL + SHIFT + P) 打开命令菜单
  • Elements标签页,选中要截取的页面元素
  • 选择Capture node screenshot(或者Capture full size screenshot或者Capture screenshot

11复制变量

不管是在Network面板还是在Sources面板获得的变量,如果想要拷贝出来都可这样做:

(1)右键点击这个变量,选择Store as global varible,如果之前没有进行过这样的操作,那么想要拷贝的变量就会被复制到temp1这个全局变量中

(2)在控制台输入copy(temp1),这时候这个变量就被复制到了剪贴板

(3)在需要的地方粘贴即可

猜你喜欢
发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论信息