chromeF12 谷歌开发者工具详解 Console篇

Console面板

控制台输出日志

通过JS代码或者命令行console.log()、console.warn()
和console.error()可以将日志信息输出到控制台

• console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
• console.warn 显示带有黄色小图标的警告信息
• console.error 显示带有红色小图标的红色的错误信息

• console.assert 当第一个参数为false时，才会显示第一个参数的值

• 可以根据JS条件判断输出不同的日志信息

注： 当需要换到下一行而不是回车的时候，请按Shift+Enter。

控制台交互

• JS表达式计算

在上一小节，我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你可以用Tab自动完成当前的建议项

• 选择元素

快捷方式	描述
$()	返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
$$()	返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
$x()	返回与指定的XPath相匹配的所有元素的数组

注： 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素，而是返回了所有匹配的元素数组，我也给Google提供了这个issue，等待Google的答复。