Chrome 控制面板加強

今天系统看了一遍 极客学院有关chrome控制面板的使用。 简单记录一下。

控制台 > 常用函数

名称	说明
console.log()	简单日志输出可以配合% 格式化输出,如%c可以在第二个参数设置css样式
console.dir()	输出日志对象
console.error()	输出错误
console.warn()	输出警告
console.assert()	第一个参数为false.输出第二个
console.info()
console.group(),console.groupEnd()	分组输出
console.table()	以表格形式输出，传对象或数组
console.time()/timeEnd()	计时ms
console.count()	计数

字符串格式化

名称	说明
%s	格式化成 string
%i	或者 %d 格式化成 integer
%f	格式化成一个浮点类型
%o	格式化成一个可扩展的 DOM 元素。就跟在元素面板中看到的一样
%o	格式化成一个可扩展的 JavaScript
%c	通过第二个参数来申请一个 CSS 风格的输出字符串

选择元素

名称	说明
$()	返回第一个匹配 CSS 选择器的元素。这也是 document.quertSelector() 的快捷方式
$$()	返回包含所有匹配 CSS 选择器的一个数组。这是 document.querySelectorAll() 的一个别名。
$x()	返回一个匹配特定 XPath 的数组

其他

事件监听
monitorEvents() unmonitorEvents()
monitorEvents(document.body, “click”);
CPU检测
profile()，profileEnd()