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

1、添加条件断点；

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

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

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

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 + 单击"一次性展开所有子节点

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

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

'fatfish'.split('').reverse().join('') // hsiftaf

你可以这样做

// 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

一种更简单的方法:使用" $ "获取最后一次操作的结果，而不必每次都复制它。

// 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

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

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

11.gif