锐客网

  1. 首页 > 睿知 > it技术 > >

浏览器调试技巧

前端

1.debugger 我们可以通过再代码中加上debugger 对当前代码进行断点调试。当代码执行到debuuger时会终止执行 2。在浏览器中可以用鼠标点击当前代码的这一行的左侧 会出现一个小红点 表示该处已经添加了一个断点。如下图所示 浏览器调试技巧
文章图片

我们可以鼠标右键点击红色小圆点 ，会弹出一个菜单选项
浏览器调试技巧
文章图片

选择edit breakpoint ，该选择为编辑断点，可以自定义断点。大概意思是，我们可以自己定义断点的条件，一般我们直接添加的断点默认时代码执行到该处时 就会停止执行。如果我们给断点添加了自定义条件，那么当代码执行到该处时 会判断是否满足断点的条件 ，满足则停止执行。不满足就继续往下执行。
一般我们在循环代码块中打断点，如果不进行自定义断点，直接添加某个断点，那么每次代码块进行一次循环就会停止执行。
3.浏览器调试窗口的source模块的右边部分为功能区域，提供了很多调试的功能，如图红色圈出的部分 【浏览器调试技巧】浏览器调试技巧
文章图片

3.1.watch部分可以添加变量，以监听代码运行时该变量的变化
3.2 call Stack 部分可以查看函数调用栈的步骤。大概意思是当我们在函数代码块中打一个断点，当该函数执行时，可以看到该函数是经过那些步骤被如何调用执行的。
3.3 scope 部分可以看到局部变量 和全局变量。例如我们给某个代码块内部打一个断点，当代码运行到该断点时，scope中会显示该代码块中的局部变量以及全局变量。如图，下面的location中的为代码块中的局部变量，globel中为全局变量
浏览器调试技巧
文章图片

3.4.breakpoint 部分中显示我们在js中打的所有断点的信息，XHR/fetch breakpoint部分显示我们在网络请求中打的所有断点的信息，DOM BreakPoint部分显示我们在dom中打的所有断点的信息。 3.5.Event Listener Breakpoint 提供我们可以根据事件类型进行断点，例如当触发某个事件时代码停止执行

    推荐阅读


    上一篇：JavaScript修炼之路-筑基篇（一）输入输出、变量声明

    下一篇：javascript|JavaScript修炼之路-筑基篇（六）Web APIs、Dom及元素获取