我不知道的 chrome 浏览器调试技巧

228 阅读1分钟

参考:掘金 你不知道的Chrome调试工具技巧系列

Console 面板

$0

$0 表示当前在 Elements 面板中选中的 html 节点,同理 $1 表示上次选中的节点,同理可得 $2$3 所表示的元素节点。

$和?

如果当前Console面板所在作用域(比如:windown.top 或者某个 ifram 作用域)中未定义 $ 变量(比如:未引入jQuery),$ 是函数 document.querySelector 的一个别名,? 将执行 document.querySelectorAll 方法,并且返回的是一个数组而不是 NodeList

$_

$_ 表示上次在当前作用域下控制台执行的结果

copy() 函数

此函数的作用就是复制你能从Console面板得到的任何东西。比如:copy($_) copy($0) copy(window.top.location)

console 方法

console.log() console.dir() console.count() console.table()

Elements 面板

快捷键H切换当前选中元素的显示和隐藏

快捷键ctrl+⬆/ctrl+⬇上下移动当前选中的元素

command 命令行工具

ctrl+shift+P 打开命令行工具

在命令行中输入 Capture 可以看到提示出来的三种截屏方式