如果您还在使用 console.log
来进行 js 的代码调试,那么可以考虑看看下面的内容,有效的提高工作效率。
断点调试
代码断点
1、打开调试工具(Ctrl/Cmd + Shift + C)。
2、单击 Sources
选项卡。
3、打开包含要中断的代码行文件。
4、在需要暂停的代码左侧的行号处,点击,行号处会显示一个蓝色的图标。
5、现在刷新页面,当代码执行到这一行就会暂停。
条件断点
除了普通的断点外,还可以使用条件断点,不过只有在条件为真时才会暂停。
1、在代码行左侧的行号处,右键单击。
2、选择 add conditional breakpoint
,会弹出一个输入框。
3、在输入框输入条件语句,回车确定,行号处会变成橙色。
管理代码断点
断点多了,有时候自己也乱。这个时候可以在右侧的 Breakpoints
窗格管理断点。这里显示每个断点对应的行号和代码。
1、点击断点前的复选框可以禁用该断点。
2、右键单击某个条目,可以呼出菜单以删除该断点,取消激活所有断点,禁用所有断点或删除所有断点,删除除此断点外的其他断点。其中取消激活所有断点会指示DevTools忽略所有代码行断点,但也要保持其启用状态,以便它们在重新激活它们时处于与之前相同的状态。
3、单击断点其他位置,可以联动到该代码在编辑器的位置,并且背景会标黄。
DOM 断点
有时候可能需要在DOM节点发生改变的时,对代码暂停。这是就可以设置DOM更改断点。
1、切换到 Elements
选项卡。
2、右键点击需要设置断点的元素,呼出菜单。
3、将鼠标移动到 Break on
上,然后选择 “子树修改”,“属性修改” 或 “节点删除”。
三种断点类型解释:
- 子树修改。当删除或添加当前所选节点的子节点或更改子节点的内容时触发。未在子节点属性更改或当前所选节点的任何更改上触发。
- 属性修改:在当前选定的节点上添加或删除属性时或属性值更改时触发。
- 节点删除:删除当前选定的节点时触发。
XHR/Fetch 断点
如果要在XHR请求的时候,对包含指定字符串的URL进行中断,可以使用此断点。DevTools暂停XHR调用的代码行 send()
。(Fetch 也适用)
1、切换到 Sources
选项卡。
2、展开 XHR/Fetch Breakpoints
窗格。
3、点击右侧的加号添加断点。
4、在弹出的输入框输入URL包含的字符串,回车,包含这段字符串的URL,在发出请求的时候,DevTools就会暂停。注意,如果输入为空,将对任何请求进行暂停。
事件监听器断点
如果要暂停事件触发后运行的事件监听器代码,可以使用事件监听器断点。
1、切换到 Sources
选项卡。
2、展开 Event Listener Breakpoints
窗格。
3、在事件列表里选择需要监听的事件类型。比如常用的 Mouse
下的 click
事件。
异常断点
如果要在抛出捕获或未捕获的异常的代码上暂停,那么可以使用异常断点。
1、切换到 Sources
选项卡。
2、点击 暂停异常
按钮。如图。启用后会变成蓝色。
3、如果除了未捕获的异常之外还要暂停捕获的异常,请选中“ 暂停捕获异常”复选框。
步进执行代码
代码暂停后,我们需要手动控制代码的执行,以方便排查问题。如下图从左往右依次是恢复执行,跳过下一个函数,跳入下一个函数,跳出下一个函数和逐步执行下一行。
恢复执行
1、有时候会觉得逐步执行代码很乏味,这时可以在您觉得可能出问题的代码处打断点,然后点击恢复执行按钮。这样代码就会跳到下一个断点处。
2、除了这个方法,还可以右键单击觉得出问题的代码处,点击 Continue to Here
(继续到此处)。DevTools就会运行到改行,然后暂停。
3、点开恢复执行按钮右下角的小三角,可以点击强制恢复执行,这样就能无视后面的断点,强行执行脚本。
跳过、跳入、跳出、逐步执行
1、如果觉得代码中调用的某个函数是可信任的,这个时候就可以在代码执行到这行时,点击跳过按钮。
2、如果代码执行到某行调用了某个函数,可以点击跳入这个函数,继续执行。
3、如果不想继续查看调用函数的内部代码,可以点击跳出按钮,回到调用该函数的主流程中。
4、如果不知道哪里出了问题,希望一行行的查找问题,这个时候可以点击逐行执行按钮,这样代码就会按照执行逻辑一行一行的执行。
编辑脚本
有时候修复错误的时候,需要对JS代码进行一些修改。其实有些简单的修改无需在IDE中修改了代码然后再重新加载页面,查看效果。您可以在DevTools中直接编辑脚本。
1、在 Sources
选项卡中的打开需要修改的文件。
2、修改代码,按 Command+ S(Mac)或 Ctrl+ S(Windows,Linux)进行保存。这样就将整个JS文件修补到Chrome的JS引擎中了。(注意修改完后不要刷新页面)。
压缩脚本格式化
有时候一些生产环境的文件都是经过压缩的,这样不利于断点调试代码。这个时候可以点击格式化按钮将代码格式化后再进行调试。
查看当前执行上下文
在某行代码上暂停时,使用 scope
窗格可以查看当前执行上下文。
1、双击属性值,可以进行更改。
2、不可枚举的属性显示为灰色。
查看当前调用堆栈
在某行代码上暂停时,使用 call stack
窗格可以查看此时的调用堆栈。
1、单击某一个条目可以跳转到调用该函数的代码行。蓝色箭头表示DevTools当前正在突出显示的函数。
2、右键点击某个条目,可以选择复制堆栈跟踪。将当前调用堆栈复制到剪切板。
忽略脚本
在调试过程中,有些脚本不属于调试范围(比如可信任的第三方库),不需要进入,这个时候可以忽略该脚本(Blackbox)。这样逐步执行的时候,就永远不会进入该脚本。
1、在 Sources
选项卡找到需要忽略的脚本。
2、右键呼出菜单,点击 Blackbox Script
。
3、还有一个方法可以忽略脚本,就是打开设置,转到 Blackboxing
选项卡,在这里也可以按正则添加需要忽略的脚本。勾选这里的 Blackbox content scripts
复选框,可以防止进入 chrome 扩展的JS。
观察自定义表达式
在 Watch
窗格可以查看自定义表达式的值。
1、单击加号按钮创建监听表达式。
2、单击刷新按钮会刷新现有表达式的值。在逐步执行代码时,值会自动更新。
3、鼠标悬浮在表达式上时,会出现一个叉号,点击可以删除该表达式。
代码片段
看了这么久,说个很实用的东西。
如果发现自己在控制台中反复运行相同的调试代码,就可以考虑使用 snippets
(代码片段)。
1、打开 Sources
选项卡,切换到 Snippets
标签。
2、点击 New snippet
可以新建一个代码片段,编辑代码,按 Command+S (Mac) 或 Ctrl+S (Windows、Linux)以保存您的更改。
3、保存后可以按 Command+Enter (Mac) 或 Ctrl+Enter(Windows、Linux)执行代码。
4、代码执行成功后并且再次对文件进行编辑后,可以通过右键菜单选择 Local Modifications
查看更改记录。还可以通过下方的 revert 按钮撤销本次修改。
5、github 上有很多开源的 snippets
,可以保存起来,方便日后调试。