希望能早点知道的 Chrome Devtools 调试技巧

1、添加条件断点；

使用以下代码，我们希望食物的名称是 🍫。当断点触发时，我该如何做到这一点？

<code>const foods = [
  {
    name: '🍔',
    price: 10
  },
  {
    name: '🍫',
    price: 15
  },
  {
    name: '🍵',
    price: 20
  },
]
foods.forEach((v) =&gt; {
  // debugger
  console.log(v.name, v.price)
})
</code>

在处理大量数据的情况下，使用条件断点将对开发工作非常有帮助，极大提高效率。

2、使用 $I 在控制台上安装 npm 包

有时我想使用像 dayjs或lodash这样的 API，但我不想去官方网站查看。如果可以直接在控制台上尝试就好了。

1、安装 Console Importer 插件

2、$i(‘name’) install npm package

重新发送 XHR 请求

在工作中，我们经常需要与后端开发人员一起调试界面。使用这个功能可以提高我们的对接效率。 只需执行以下步骤：

1、选择

Network

面板

2、点击

Fetch/XHR

3、选择要重新发送的请求

4、右键单击并选择

Replay XHR

快速切换主题颜色

有些人喜欢 Chrome 的白色主题，有些人喜欢黑色，我们可以使用快捷键快速在两个主题之间切换。

1、按下

cmd + shift + p

执行命令

2、输入

“Switch to dark theme”

“Switch to light theme”

来切换主题

快速在控制台中发送请求

对于相同的请求，有时需要修改输入参数并重新发送它。有什么快捷方式吗？ 只需执行以下步骤：

1、选择网络面板。

2、点击

Fetch/XHR

3、选择要重新发送的请求。

4、选择“复制为

fetch

”面板。

5、修改输入参数并重新发送。

复制 JavaScript变量

我们如何将复杂的数据复制到剪贴板？ 这真是令人惊奇。你可以使用 Chrome浏览器提供的复制功能来实现。

在控制台获取选定的 DOM 元素

当我们通过“Elements”面板选择一个元素时，如果想通过 JavaScript 打印出一些它的属性，比如宽度、高度、位置等，应该怎么做呢？

1、通过“Elements”面板选择 DOM 元素。

2、在控制台中使用 $0 访问该元素。

捕获全尺寸截图

如果我们想要对一个超过一个屏幕的页面进行截图，有没有什么好方法呢？ 强大的 Chrome 浏览器可以轻松实现这个目标。

1、准备好你想要捕获的页面内容

2、按下 ``CMD + Shift + P 执行命令

3、输入

"Capture full size screenshot"

并按回车键

现在有一个新的问题。我们只想截取截图页面的一部分。怎么办？

也很简单，只需在第三步输入“Capture node screenshot”。

展开所有子节点

如何一次性展开一个 DOM 元素的所有子节点，而不是一个接一个的展开？ 你可以在 "Elements"面板中使用组合键 "Alt + 单击"一次性展开所有子节点

使用 "$" 引用上次执行的结果

让我们看看这个场景，我们对字符串执行了各种操作，然后我们想知道每一步的结果，该怎么办？

<code>'fatfish'.split('').reverse().join('') // hsiftaf
</code>

你可以这样做

<code>// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
</code>

一种更简单的方法:使用

" $ "

获取最后一次操作的结果，而不必每次都复制它。

<code>// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
$_.join('') // hsiftaf
</code>

使用 "$" 和 "$$"快速选择 DOM 元素

在控制台中使用document.querySelector`` 和document.querySelectorAll来选择当前页面的元素是最常见的需求，但这有点太长了，我们可以使用 $ 和 代替。