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()