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
网友评论