Chrome之js断点调试方法

方法/步骤

1.Chrome开发者工具断点调试

第一步:打开开发者工具，按F12或者在浏览器页面上右键选择
在这里插入图片描述
第二步:在Source面板找到需要调试的文件
在这里插入图片描述

第三步:设置断点
在这里插入图片描述
第四步:触发调试部分程序的运行，开始调试
在这里插入图片描述

调用过程常用的按钮及快捷键:

  1. 跳到下一个断点:点击Sources面板右侧的 “三角按钮”

在这里插入图片描述
快捷键 ： F8

  1. 跳到下一步 : 点击Sources面板右侧的第二个按钮

在这里插入图片描述
快捷键 : F10

  1. 跳进断点处的方法中:点击Sources面板右侧第三个按钮

在这里插入图片描述
快捷键 : F11

  1. 跳进断点处的方法中:点击Sources面板右侧第四个按钮

在这里插入图片描述

快捷键 : Shift + F11

  1. 跳进断点处的方法中:点击Sources面板右侧第五个按钮

在这里插入图片描述
快捷键 : F9

  1. 禁用断点:断点Sources面板右侧第五个按钮

在这里插入图片描述

  1. 暂停在捕获到的异常处：点击Sources面板右侧第六个按钮，然后勾选Pause On Caught Exception
    在这里插入图片描述
  2. 暂停在未捕获的异常处:点击Sources面板右侧第六个按钮，然后不勾选Pause On Caught Exception

在这里插入图片描述

清除断点

  1. 在Sources面板右侧面板中,找到Breakpoints打开，可以看到你打的断点.可以断点列表处右键选择 Remove all breakpoints 可一次性删除所有断点

在这里插入图片描述