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

命令行 API 參考

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

$_

返回最近一次計(jì)算過(guò)的表達(dá)式的值。在下面的例子中是一個(gè)簡(jiǎn)單的表達(dá)式求值。 $_ 屬性會(huì)被計(jì)算，包含了和表達(dá)式相同的值：

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

$0 - $4

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

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

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

$(selector)

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

 $('img').src;

$$(selector)

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

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

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

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

x(path)

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

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

clear()

清除控制臺(tái)的歷史記錄

clear()

同見于 清除控制臺(tái)

copy(object)

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

 copy

debuge(function)

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

 debuge(getData);

使用 undebug(fn) 來(lái)恢復(fù)中斷方法的執(zhí)行，或者用 UI 界面來(lái)使斷點(diǎn)失效。

dir(object)

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

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

 document.body;dir(document.body);

更多詳情，請(qǐng)見 控制臺(tái) API的 console.dir() 方法。

dirxml(object)

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

inspect(object/function)

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

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

inspect(document.body.firstChild);

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

getEventListeners(object)

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

 getEventListeners(document);

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

你可以進(jìn)一步拓展這些對(duì)象來(lái)探索它們的屬性：

keys(object)

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

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

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

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

monitor(function)

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

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

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

monitorEvents(object[, events])

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

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

 monitorEvents(window, "resize");

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

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

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

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

profile([name])

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

開始分析：

 profile("My profile")

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

 profileEnd("My profile")

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

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

更多的例子，見 Controlling the CPU profiler

profileEnd([name])

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

table(data[, columns])

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

 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) 相對(duì)使用。

unmonitorEvents(object[, events])

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

unmonitorEvents(window);

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

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

同見 Monitoring events.

values(object)

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

values(object);

其他 API （Additional APIs）

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