[JavaScript知识库]js 控制台调试——debugger语句 vs 命令行API

在控制台中，除了使用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方法的别名。