命令行 API 參考

命令行 API 用 Chrome DevToos 執(zhí)行常見任務(wù)的方法集合。這些集合包含了選擇和檢查 DOM 元素、停止和啟動分析器、監(jiān)測 DOM 事件的易用方法。這個 API 補充了控制臺 API，命令行 API 僅可在控制臺內(nèi)使用。

$_

返回最近一次計算過的表達式的值。在下面的例子中是一個簡單的表達式求值。 $_ 屬性會被計算，包含了和表達式相同的值：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_last_expression.png" alt="last_expression.png" />

在下面的例子中，會調(diào)用 $$() 方法來進行一個表達式的評估，這個方法會返回一組匹配 CSS 選擇器的元素。這之后會給 $.length 評估來獲取數(shù)組的長度(17),之后會變成最后執(zhí)行的評估表達式。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_last_expression_2_1.png" alt="last_expression_2_1" />

$0 - $4

DevToos 記得你在該選項卡（或 Profiles 面板）已經(jīng)選定過的最后的 5 個 DOM 元素（或 JavaScript 堆對象）。使得這些可獲取的元素賦值給 $0，$1，$2，$3 和 $4。$0 返回最近選擇的元素或 JavaScript 對象，$1 返回次近選擇的一個對象，以此類推。

在下面的例子中，ID 是 gc-sidebar 的元素在 Elemen 選項卡中被選中。在控制臺窗口 $0 被執(zhí)行計算，顯示了相同的元素。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_$0.png" alt="$0.png" />

下圖顯示了在同一個頁面中被選中的 gc-sidebar 元素。$0 現(xiàn)在指向新選擇的元素，而 $1 現(xiàn)在返回先前選定的那個元素（gc-sidebar）。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_$1.png" alt="$1.png" />

$(selector)

使用特定的 CSS 選擇器返回第一個 DOM 元素的引用。這個函數(shù)是 document.querySelector() 函數(shù)的一個別名函數(shù)。 下面的示例保存一個在文檔中第一個 img 元素的引用，并調(diào)用顯示其 src 屬性：

 $('img').src;

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_$img_src.png" alt="$img_src.png" />

$$(selector)

返回匹配給定 CSS 選擇器的元素的數(shù)組，該命令等同于調(diào)用 document.querySelectorAll() 方法。

下面的示例使用 $$() 創(chuàng)建當(dāng)前文檔中所有 img 元素的數(shù)組，并輸出每個元素的 src 屬性值。

 var images = $$('img');for (each in images) {    images[each].src;}

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_$$img_src.png" alt="$$img_src.png" />

  注意：按 Shift+ 回車 在控制臺輸入一行新的腳本，但并立即執(zhí)行。

x(path)

返回匹配給定的 XPath 表達式的 DOM 元素的數(shù)組。例如，下面的返回所有包含 a 標(biāo)簽元素的 p 標(biāo)簽元素：

 $x("http://p[a]");

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_$xpath.png" alt="$xpath.png" />

clear()

清除控制臺的歷史記錄

clear()

同見于 清除控制臺

copy(object)

復(fù)制指定對象的字符表示到剪切板

 copy

debuge(function)

當(dāng)函數(shù)被指定調(diào)用，調(diào)試器進行調(diào)試，會在源面板逐個分解函數(shù)，讓你能夠一步一步地調(diào)試代碼。

 debuge(getData);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_debug.png" alt="debug.png" /> 使用 undebug(fn) 來恢復(fù)中斷方法的執(zhí)行，或者用 UI 界面來使斷點失效。

dir(object)

輸出指定對象所有屬性的對象風(fēng)格列表。這個方法是控制臺 API console.dir() 方法的別名。

下面的例子展示了直接在命令行里執(zhí)行 document.body 和使用 dir（）方法來顯示元素之間的差異。

 document.body;dir(document.body);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_document.body.png" alt="document.body.png" /> 更多詳情，請見 控制臺 API的 console.dir() 方法。

dirxml(object)

輸出指定對象的 XML 形式，正如在元素選項卡（ Elements tab ）中顯示所見。這個方法等效于 console.dirxml() 方法。

inspect(object/function)

在恰當(dāng)?shù)拿姘逯写蜷_并選擇指定元素或指定對象: DOM 元素的 Element 面板或者 JavaScript 堆元素的 Profiles 面板。

下面的例子是在元素面板中打開 document.body 的第一個子元素；

inspect(document.body.firstChild);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_inspect.png" alt="inspect.png" />

當(dāng)傳遞一個函數(shù)作為 inspect() 參數(shù)，如果這個函數(shù)被調(diào)用，就會為你在源面板中打開它讓你進行檢查。

getEventListeners(object)

返回注冊在指定對象上的注冊的事件監(jiān)聽器。返回值是一個包含了每個注冊事件類型（例如 "click" 或 "keydown")的數(shù)組對象。每個數(shù)組的成員都是描述每種類型注冊監(jiān)聽器的對象。例如，下面命令執(zhí)行后列出所有在 document 對象的上的事件監(jiān)聽器。

 getEventListeners(document);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_geteventlisteners_short.png" alt="geteventlisteners_short.png" />

如果在一個指定對象中注冊有超過一個監(jiān)聽器，這時這個數(shù)組包含了每一個監(jiān)聽器成員。例如在下面的例子里，兩個注冊在 #scrollingList 元素中的關(guān)于 "mousedown" 的事件監(jiān)聽器：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_geteventlisteners_multiple.png" alt="geteventlisteners_multiple.png" /> 你可以進一步拓展這些對象來探索它們的屬性：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_geteventlisteners_expanded.png" alt="geteventlisteners_expanded.png" />

keys(object)

返回一個數(shù)組，包含了指定對象屬性的名字。要獲得相同的屬性相關(guān)聯(lián)的值，可以使用 value()。

例如，設(shè)想你的程序定義了下面兩個對象：

 var player1 = {    "name": "Ted",    "level": 42}

如果 player1 在全局空間中定義（為簡單起見），在控制臺中輸入 keys(player1) 和 values(player1)會得到以下輸出：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_keys-values2.png" alt="keys-values2.png" />

monitor(function)

當(dāng)這個方法被調(diào)用時，一個消息被輸出到控制臺，來表示函數(shù)名和函數(shù)被調(diào)用時傳入的參數(shù)。

 function sum(x, y) {    return x + y;}monitor(sum);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_monitor.png" alt="monitor.png" />

使用 unmonitor(function) 來停止監(jiān)視

monitorEvents(object[, events])

當(dāng)指定的事件之一發(fā)生在指定對象上，該事件的對象就被輸出到控制臺。你可以指定單個事件，到監(jiān)視器，事件數(shù)組，或被映射到通用事件類型中之一，這個集合映射到預(yù)定的事件集合。請參見下面的例子。

下面的監(jiān)視器監(jiān)視了在window對象中所有的 resize 事件。

 monitorEvents(window, "resize");

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_monitor-resize.png" alt="monitor-resize.png" />

你也可以指定一個可用的事件 “types”，這些字符串映射到預(yù)定義的事件集合。下面的表列出了可用事件類型及其相關(guān)的事件映射：

例如，下面使用了 "key" 事件類型在輸入文本域中對應(yīng)的按鍵事件( "#msg")。

 monitorEvents($("#msg"), "key");

下面是在文本框中輸入兩個字符后輸出示例：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_monitor-key-events.png" alt="monitor-key-events.png" />

profile([name])

使用可用的文件名開始一個 JavaScript CPU 分析會話。要完成分析調(diào)用 profileEnd() 方法。

開始分析：

 profile("My profile")

停止分析,并在分析面板上展示結(jié)果：

 profileEnd("My profile")

文件也可以嵌套使用，例如，下面的在任何命令下都會工作。

 profile('A');profile('B');profileEnd('A');profileEnd('B');

更多的例子，見 Controlling the CPU profiler

profileEnd([name])

停止當(dāng)前使用 profile()方法開始的分析會話，并在配置面板上顯示結(jié)果。

table(data[, columns])

通過用可選用的列標(biāo)題傳進一個數(shù)據(jù)對象進來，以表格的形式輸出對象數(shù)據(jù)。例如，用表格形式輸出在控制臺輸入的名字列表：

 var names = {    0: { firstName: "John", lastName: "Smith" },
 1: { firstName: "Jane", lastName: "Doe" }};table(names);

undebug(function)

停止指定函數(shù)的調(diào)試，使得當(dāng)被調(diào)用的方法不再被調(diào)用。

undebug(getData);

unmonitor(function)

停止監(jiān)視指定的方法，與 monitor(fn) 相對使用。

unmonitorEvents(object[, events])

停止監(jiān)視指定的對象和指定事件的事件。例如，下面停止窗口對象上的所有的事件監(jiān)聽：

unmonitorEvents(window);

你也可以選擇性地停止對象上的指定事件的監(jiān)控。例如，下面的代碼開始了對當(dāng)前選中元素上的所有鼠標(biāo)事件的監(jiān)控，然后停止監(jiān)視 "mousemove" 事件（可能是為了減少在控制臺輸出的噪點）。

monitorEvents($0, "mouse");unmonitorEvents($0, "mousemove");

同見 Monitoring events.

values(object)

返回一個數(shù)組，包含了指定對象的所有屬性值。

values(object);

其他 API （Additional APIs）

Chrome 擴展程序可以注入額外的輔助方法進入命令行 API。例如， Debug Utils extension (github) 提供了在屬性訪問，事件解除和方法調(diào)用中檢索斷點的方法。