Chrome Command API 参考
Chrome开发工具已经强大得令人发指了,除了可通过UI操作的各种功能外,还提供了基于控制台的命令行方法,极大地方便了开发调试。现在就来领略下Chrome Command API 的风骚。
$_
返回控制台最近计算的表达式的值。
> 2+ 2
4
> $_
4
>
$0 - $4
返回在Elements面板最近选择的5个DOM元素(或者Profiles面板里选择的JavaScript对象)。
$选择器
有木有很熟悉?对了,jQuery也用这个。其实他是document.querySelector()的别名, 用法跟jQuery的类似,它只返回一个DOM元素(如果有的话)。
$$选择器
是document.querySelectorAll()的简写,它返回匹配的DOM元素集合。
$x(path)
根据指定的XPath表达式返回DOM元素集合。
clear()
清除控制台内容。
copy(object)
这个好用,可以把JavaScript对象的字符串表示拷贝到剪贴板。之前碰到过JavaScript对象某个属性的值 是个很长的字符串的情况,在控制台输出时只能显示一部分,其余的用...显示了,这样直接选中拷贝的话就不完整了。
debug(function)
可以指定调试某个function,当function被调用时会在function内部出现一个断点。跟它对应的undebug(function),可以取消断点。
dir(object)
console.dir(object)的别名, 将对象输出到控制台,可以展开查看各个属性。
dirxml(object)
等同于console.dirxml()方法。输出DOM对象的效果跟在Elements面板里看到的相同。
inspect(object/function)
打开对象或元素所在的查看面板:DOM元素就打开Elements面板,JavaScript对象就打开Profiles面板。
getEventListeners(object)
列出DOM元素上注册的事件处理器。
keys(object)
返回一个数组,包含指定对象的所有属性名。要获取对应的值数组,请用values(object)。
var player1 = { "name": "Ted", "level": 42}
> keys(player1)
["name", "level"]
> values(player1)
["Ted", 42]
>
monitor(function)
监听一个函数的执行,当函数被调用时,控制台输出一条记录。
> function sum(x, y) { return x + y;}monitor(sum);
> sum(1,2)
function sum called with arguments: 1, 2
> 3
>
要取消监听,就用unmonitor(function)。
monitorEvents(object[, events])
监听对象上的事件。如果对象上指定的事件被触发,控制台会输出一条信息。可以在参数里指定事件名,或者事件类型。可以是单个事件,也可以是多个事件(放在数组里)。
> monitorEvents(window, "resize");
undefined
resize Event {clipboardData: undefined, path: NodeList[0], cancelBubble: false, returnValue: true, srcElement: Window…}
事件类型可以指定一类事件:
事件类型 | 事件 |
---|---|
mouse | "mousedown ", "mouseup ", "click ", "dblclick ", "mousemove ", "mouseover ", "mouseout ", "mousewheel " |
key | "keydown ", "keyup ", "keypress ", "textInput " |
touch | "touchstart ", "touchmove ", "touchend ", "touchcancel " |
control | "resize ", "scroll ", "zoom ", "focus ", "blur ", "select ", "change ", "submit ", "reset " |
相应地,用unmonitorEvents(object[, events])取消监听。