chrom常用调试技巧

1.截屏的新姿势

当你只想对一个特别的 DOM 节点进行截图时，你可能需要使用其他工具弄半天，但现在你直接选中那个节点，打开 Command 菜单并且使用 节点截图 的就可以了。

不只是这样，你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情！

2. Snippets - 代码块的使用

我经常使用 JavaScript 作为我的自动化工具，来处理第三方网站和应用程序：

比方说，我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium 没有提供这样的总数，所以我把这个小脚本组合在一起：

 ?('td:last-child .sortableTable-number')
    .map(el => parseInt(el.innerText))
    .reduce((total, value) => total + value);

当我打开状态页并且输入这段脚本到 Console 面板的时候，它将会返回这个数值:

[图片上传失败...(image-e63a2b-1619062687910)]

<figcaption style="display: block;"></figcaption>

现在看来，即使这个脚本并没有花费我太多的精力来编写，但也只是偶尔运行一下，所以对于我来说，记住一段这样的脚本会很麻烦：

那怎么解决这个问题呢？

这就是 Snippets 的用武之地：它允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码块：

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，大功告成！现在你可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行它了：

3. $ 和 ?

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。

如果是 ? 就更加厉害了，还能节省更多的时间，因为它不仅执行 document.QuerySelectorAll 并且它返回的是：一个节点的 数组 ，而不是一个 Node list

本质上来说 Array.from(document.querySelectorAll('div')) === ?('div') ，但是document.querySelectorAll('div')和 ?('div') 哪一种方式更加优雅呢？

4. console篇 - 异步的 console

如今，越来越多与浏览器有关的 API 都是 基于 Promise 的 。当你使用 promise 的时候通常配套用 .then(处理方法) 或者 将 promise 包裹在 async 方法中，再使用 await 来接收结果。
我们在 JavaScript/TypeScript 中大量使用的东西，但如果在 Console 中书写这样的结构很不方便。

像下面这样

或者这样

这样太难用了！不是输入之前就被触发了，就是括号漏写了...

但如果 console 默认就被 async 包裹呢？

你猜怎么着，还真是这样！你可以直接使用 await ：

事实上,在 Console 中使用 promise 比在源码中使用起来还要简单！

5. Request initiator 显示了调用堆栈信息

initiator 可以翻译为 启动器，但是太过生硬，大家理解意思就好。

Network 面板中的 initiator 这一列显明了是哪个脚本的哪一行触发了请求。它显示了在调用堆栈中触发请求的最后一步。但如果你用的是，例如：一个本地化的 fetch API， 那它将会指向一些低层级的类库的代码 - 例如 当我们在 Angular 配合使用 Axios 或者 zone.js 的时候，这时指向的是 xhr.js

除了这些外部库之外，如果你希望查看代码的哪一部分触发了请求。 将鼠标悬停在显示的 initiator（例如 外部库）上，你将看到完整的调用堆栈，包括你的文件：

6. 重新发送 XHR 的请求

如何重新发送 XHR 的请求？刷新页面？太老套了，试试这么做：

7. XHR/fetch 断点

在某一特定时刻，你想要对已发送的 “ajax” 请求进行捕获怎么做呢？ 可以使用 XHR/fetch breakpoint 。

这些只能在 Source 面板中设置。（我也同样希望可以直接在 Network 面板中设置，但事实并非如此）

你可以添加部分 URL 作为触发器或监听任何请求：

.png

8. 通过 'h' 来隐藏元素

按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 'h' 可以使它出现。某些的时候这很有用：例如你想截图，但你想去掉里面的敏感信息。

image

9. 在元素面板中展开所有的子节点

一个一个的去点击级联的 ▶ 按钮太慢了，不如使用右击节点后的 expand recursively 命令：