控制台公用程式 API 參考資料

以下範例使用 $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
l10n-placeholder3() 建立陣列，包含所選節點之後，會顯示在目前文件中的所有 <img> 元素：
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



$x(路徑 [, startNode])

$x(path) 會傳回與指定 XPath 運算式相符的 DOM 元素陣列。

舉例來說，下列指令會傳回網頁上的所有 <p> 元素：
$x("//p")



以下範例會傳回包含 <a> 元素的所有 <p> 元素：
$x("//p[a]")



與其他選取器函式類似，$x(path) 提供選用的第二個參數 startNode，用於指定要從哪個元素或節點搜尋元素。



clear()

clear() 會清除相關記錄的控制台。
clear();

copy(物件)

copy(object) 會將指定物件的字串表示法複製到剪貼簿。
copy($0);

debug(函式)

呼叫指定的函式時，系統會叫用偵錯工具，並在「Sources」面板的函式中損毀，逐步執行程式碼並偵錯。
debug(getData);



使用 undebug(fn) 即可停止在函式上破壞，或使用 UI 停用所有中斷點。

如要進一步瞭解中斷點，請參閱使用中斷點暫停程式碼。

dir(object)

dir(object) 會顯示所有指定物件屬性的物件樣式清單。這個方法是 Console API console.dir() 方法的捷徑。

以下範例顯示直接透過指令列評估 document.body，以及使用 dir() 顯示相同元素之間的差異：
document.body;
dir(document.body);



詳情請參閱 Console API 中的 console.dir() 項目。

dirxml(物件)

dirxml(object) 會顯示指定物件的 XML 表示法，如「Elements」面板中所示。這個方法相當於 console.dirxml() 方法。

inspect(object/function)

inspect(object/function) 會開啟並在適當面板中選取指定元素或物件：DOM 元素的「元素」面板，或 JavaScript 堆積物件的「設定檔」面板。

以下範例會在「Elements」面板中開啟 document.body：
inspect(document.body);



傳遞要檢查的函式時，函式會在「Sources」面板中開啟文件，供您檢查。

getEventListeners(object)

getEventListeners(object) 會傳回指定物件上註冊的事件監聽器。回傳值是一個物件，其中包含了各個已註冊事件類型 (例如 click 或 keydown) 的陣列。每個陣列的成員都是物件，用來描述針對各類型註冊的事件監聽器。例如，以下範例會列出在文件物件中註冊的所有事件監聽器：
getEventListeners(document);



如果指定物件上註冊了多個事件監聽器，則陣列會包含每個事件監聽器的成員。在以下範例中，系統為 click 事件的文件元素註冊了兩個事件監聽器：



您可以進一步展開每個物件，探索這些物件的屬性：



詳情請參閱「檢查物件屬性」。

key(物件)

keys(object) 會傳回一個陣列，其中包含指定物件的屬性名稱。如要取得相同屬性的值，請使用 values()。

舉例來說，假設您的應用程式定義以下物件：
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

假設 player 已在全域命名空間中定義 (為簡單起見)，在 Console 中輸入 keys(player) 和 values(player) 會產生下列結果：



monitor(function)

呼叫指定的函式時，系統會將訊息記錄在主控台中，並在訊息中指出函式名稱，以及在呼叫函式時傳遞至函式的引數。
function sum(x, y) {
  return x + y;
}
monitor(sum);



使用 unmonitor(function) 停止監控。

monitorEvents(object [, events])

當指定物件發生其中一個指定事件時，系統會將事件物件記錄到控制台。您可以指定單一事件加以監控、事件陣列，或是對應至預先定義事件集合的其中一個一般事件「類型」。請參閱以下範例。

以下會監控視窗物件上的所有調整大小事件。
monitorEvents(window, "resize");



下列指令會定義陣列，以監控視窗物件上的「resize」和「scroll」事件：
monitorEvents(window, ["resize", "scroll"])

您也可以指定其中一個可用的事件「類型」，也就是對應至預先定義事件集的字串。下表列出可用的事件類型及相關事件對應：

事件類型和對應的對應事件
老鼠
「mousedown」、「mouseup」、「click」、「dblclick」、「mousemove」、「mouseover」、「mouseout」、「mouse 買方」
金鑰
「keydown」、「keyup」、「keypress」、「textInput」
觸控輸入
「touchstart」、「touchmove」、「touchend」、「touchcancel」
控制
「重新大小」、「捲動」、「縮放」、「對焦」、「模糊」、「選取」、「變更」、「提交」、「重設」

舉例來說，以下程式碼使用「鍵」事件類型，針對目前在「Elements」(元素) 面板中選取的輸入文字欄位，使用所有對應的重要事件。
monitorEvents($0, "key");

以下是在文字欄位輸入字元後的輸出範例：



使用 unmonitorEvents(object[, events]) 停止監控。

個人資料([name]) 和 profileEnd([name])

profile() 會使用選用名稱啟動 JavaScript CPU 剖析工作階段。profileEnd() 會完成設定檔，並在「Performance」 >「Main」測試群組中顯示結果。



開始剖析：
profile("Profile 1")

如要停止剖析並查看結果，請依序前往「Performance」 >「Main」軌：
profileEnd("Profile 1")

「Performance」 >「Main」測試群組的結果：

 主要軌道。" width="800" height="606">

您也可以將設定檔設為巢狀結構舉例來說，這將按任何順序運作：
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

從主控台呼叫 queryObjects(Constructor)，傳回使用指定建構函式建立的物件陣列。例如：


queryObjects(Promise)。傳回 Promise 的所有例項。
queryObjects(HTMLElement)。傳回所有 HTML 元素。
queryObjects(foo)，其中 foo 是類別名稱。傳回透過 new foo() 執行個體化的所有物件。


queryObjects() 的範圍是目前在控制台中選取的執行環境。

table(資料 [, 資料欄])

傳入具有選用欄標題的資料物件傳入資料物件，以設定表格格式記錄物件資料。這是「console.table()」的捷徑。

例如，如要在主控台中使用資料表顯示名稱清單，請執行下列步驟：
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(函式)

undebug(function) 會停止對指定函式的偵錯，因此在呼叫函式後，系統就不會再叫用偵錯工具。這會與 debug(fn) 搭配使用。
undebug(getData);

unMonitor(函式)

unmonitor(function) 會停止監控指定函式。這會與 monitor(fn) 搭配使用。
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) 會停止監控指定物件和事件的事件。舉例來說，以下程式碼會停止視窗物件上的所有事件監控：
unmonitorEvents(window);

您也可以選擇性停止監控物件上的特定事件。舉例來說，以下程式碼會開始監控目前所選元素上的所有滑鼠事件，然後停止監控「mousemove」事件 (或許是為了減少主控台輸出內容中的雜訊)：
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

Value(物件)

values(object) 會傳回一個陣列，其中包含指定物件所有屬性的值。
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);