控制台公用程式 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);
}
在所選節點後方，目前文件中顯示的 <img> 元素：
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(path [, 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(function)

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



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

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

dir(<物件>)

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(物件/函式)

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

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



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

getEventListeners(object)

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



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



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



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

keys(object)

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

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

假設 player 是在全域命名空間中定義的 (為簡化起見)，在 控制台中輸入 keys(player) 和 values(player) 會產生以下結果：



monitor(function)

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



使用 unmonitor(function) 停止監控。

monitorEvents(object [, events])

當指定物件發生其中一個指定事件時，系統會將事件物件記錄到控制台。您可以指定要監控的單一事件、事件陣列，或其中一個一般事件「類型」(mapped to a predefined collection of events)。請參閱以下範例。

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



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

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

事件類型和對應的對應事件
老鼠
「mousedown」、「mouseup」、「click」、「dblclick」、「mousemove」、「mouseover」、「mouseout」、「mousewheel」
金鑰
"keydown"、"keyup"、"keypress"、"textInput"
觸控輸入
「touchstart」、「touchmove」、「touchend」、「touchcancel」
控制
「resize」、「scroll」、「zoom」、「focus」、「blur」、「select」、「change」、「submit」、「reset」

舉例來說，以下使用「key」事件類型，在目前在「Elements」面板中選取的輸入文字欄位上，找出所有對應的按鍵事件。
monitorEvents($0, "key");

以下是輸入文字欄位中的字元後，輸出內容的範例：



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

profile([name]) 和 profileEnd([name])

profile() 會啟動 JavaScript CPU 剖析工作階段，並提供選用名稱。profileEnd() 會完成設定檔，並在「成效」 >「主」軌道中顯示結果。



如要開始剖析，請按照下列步驟操作：
profile("Profile 1")

如要停止分析並在「Performance」 >「Main」追蹤記錄中查看結果，請按照下列步驟操作：
profileEnd("Profile 1")

在「成效」 >「主」追蹤中顯示的結果：



設定檔也可以巢狀。舉例來說，以下命令可在任何順序下執行：
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(data [, columns])

傳入含有選用欄標題的資料物件，以表格格式記錄物件資料。這是 console.table() 的快速鍵。

舉例來說，如要在控制台中使用表格顯示名稱清單，請執行以下操作：
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(function)

undebug(function) 會停止指定函式的偵錯作業，因此在呼叫函式時，偵錯工具就不會再叫用。此修飾符與 debug(fn) 搭配使用。
undebug(getData);

unmonitor(function)

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

unmonitorEvents(object [, events])

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

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

values(object)

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

values(player);