Chrome Command API

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])取消監聽。

參考資料:https://developer.chrome.com/devtools/docs/commandline-api