Chrome開發(fā)工具 命令行 API 參考

命令行 API 參考

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

$_

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

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

$0 - $4

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

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

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

$(selector)

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

 $('img').src;

$$(selector)

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

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

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

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

x(path)

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

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

clear()

清除控制臺的歷史記錄

clear()

同見于 清除控制臺

copy(object)

復制指定對象的字符表示到剪切板

 copy

debuge(function)

當函數被指定調用，調試器進行調試，會在源面板逐個分解函數，讓你能夠一步一步地調試代碼。

 debuge(getData);

使用 undebug(fn) 來恢復中斷方法的執(zhí)行，或者用 UI 界面來使斷點失效。

dir(object)

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

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

 document.body;dir(document.body);

更多詳情，請見 控制臺 API的 console.dir() 方法。

dirxml(object)

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

inspect(object/function)

在恰當的面板中打開并選擇指定元素或指定對象: DOM 元素的 Element 面板或者 JavaScript 堆元素的 Profiles 面板。

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

inspect(document.body.firstChild);

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

getEventListeners(object)

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

 getEventListeners(document);

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

你可以進一步拓展這些對象來探索它們的屬性：

keys(object)

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

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

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

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

monitor(function)

當這個方法被調用時，一個消息被輸出到控制臺，來表示函數名和函數被調用時傳入的參數。

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

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

monitorEvents(object[, events])

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

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

 monitorEvents(window, "resize");

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

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

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

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

profile([name])

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

開始分析：

 profile("My profile")

停止分析,并在分析面板上展示結果：

 profileEnd("My profile")

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

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

更多的例子，見 Controlling the CPU profiler

profileEnd([name])

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

table(data[, columns])

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

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

undebug(function)

停止指定函數的調試，使得當被調用的方法不再被調用。

undebug(getData);

unmonitor(function)

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

unmonitorEvents(object[, events])

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

unmonitorEvents(window);

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

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

同見 Monitoring events.

values(object)

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

values(object);

其他 API （Additional APIs）

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