Chrome 一些实用功能

2022-01-12 · xiejiahe

截图

可以对选中的 DOM 节点进行截图:

或者使用快捷键 shift+command+p 然后输入 screenshot 进行全屏截图。

copy

这是浏览器控制台内置的方法,主要用来剪贴内容。 比如说我们要把 localStorage 里的数据都拷贝出来,如果一个一个key/value 考出来就很费劲。 copy 就可以很好的解决这个问题。

$0

在控制台调试时需要对某个元素进行操作时一般会使用 document.querySelector(element) ,这种方式不仅长,还得知道元素选择器。

$0 则可以获取选中的目标元素。

快捷键 H

切换隐藏选中元素,实际上 Chrome 添加了一个类, visibility: hidden !important

$、$$

这2个方法实际上是 document.querySelector / document.querySelectorAll 简写。

重新发起请求

在一些场景定位BUG时想要对某个请求重新发起,如果不知道这个技巧,一般都是刷新页面。

选中需要重新发起请求栈右键:

生成页面二维码

这个功能我用得也挺多的, 主要是移动端调试直接扫一扫即可,而不需复制链接。

$_

获取最后一次执行结果,减少了赋值操作很方便。

其他
原创文章,转载请注明出处。