在控制台中,除了使用console对象,还可以使用debugger语句和控制台自带的命令行方法。
debugger
debugger语句必须与除错工具配合使用,如果没有除错工具,debugger语句不会产生任何结果。
在chrome浏览器中,当代码运行到debugger指定的行时,就会暂停运行,自动打开console界面。它的作用类似于设置断点。
for(var i = 0;i<5;i++){ console.log(i); if (i===2) debugger; }
上面代码打印出0,1,2以后,就会暂停,自动打开console窗口,等待进一步处理。
$_
返回上一个表达式的值
2+2 // 4 $_ // 4
$0- $4
控制台保存了最近5个在Elements面板选中的DOM元素,$0代表倒数第一个,$1代表倒数第二个,以此类推直到$4。
$(selector)
document.querySelectorAll方法的别名,返回一个数组,包括特定的CSS选择器匹配的所有DOM元素。
var images = $('img'); for (each in images) { console.log(images[each].src); }
打印出网页中所有img元素的src属性。
$$(selector)
返回一个选中的DOM对象,等同于document.querySelectorAll。
$x(path)
返回一个数组,包含匹配特定XPath表达式的所有DOM元素。
$x("//p[a]")
返回所有包含a元素的p元素。
inspect(object)
打开相关面板,并选中相应的元素:DOM元素在Elements面板中显示,JavaScript对象在Profiles中显示。
getEventListeners(object)
返回一个对象,该对象的成员为登记了回调函数的各种事件(比如click或keydown),每个事件对应一个数组,数组的成员为该事件的回调函数。
keys(object)
返回一个数组,包含特定对象的所有键名。
values(object)
返回一个数组,包含特定对象的所有键值。
var o = {'p1':'a', 'p2':'b'}; keys(o) // ["p1", "p2"] values(o) // ["a", "b"]
monitorEvents(object[, events])
监听特定对象上发生的特定事件。当这种情况发生时,会返回一个Event对象,包含该事件的相关信息。
monitorEvents(window, "resize"); monitorEvents(window, ["resize", "scroll"])
单个事件和多个事件的监听
事件分为四大类:
- 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”
monitorEvents允许监听同一大类的事件。
monitorEvents($("#msg"), "key");
监听所有key大类的事件。
unmonitorEvents(object[, events])
停止监听
monitorEvents($0, "mouse"); unmonitorEvents($0, "mousemove");
profile([name]),profileEnd()
profile方法用于启动一个特定名称的CPU性能测试,profileEnd方法用于结束该性能测试。
profile("My profile") profileEnd("My profile")
clear()
清除控制台的历史
copy(object)
复制特定DOM元素到剪贴板。
dir(object)
显示特定对象的所有属性,是console.dir方法的别名。
dirxml(object)
显示特定对象的XML形式,是console.dirxml方法的别名。