chrome调试工具使用之js篇

如果您还在使用 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 ，可以保存起来，方便日后调试。
在这里插入图片描述