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

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(object)

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

debug(function)

呼叫指定函式時，系統會叫用偵錯工具，並在「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(object)

dirxml(object) 會輸出指定物件的 XML 表示法，如「Elements」面板所示。這個方法等同於 console.dirxml() 方法。

inspect(object/function)

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

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



將函式傳遞至檢查時，函式會在「來源」面板中開啟文件，供您檢查。

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])

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

以下程式碼會監控視窗物件上的所有大小調整事件。
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()
完成剖析後，會自動開啟「Performance」面板，並在「Main」軌跡中顯示結果。



如要開始剖析，請按照下列步驟操作：
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);



如要將記錄的表格複製到剪貼簿，並格式化為 Markdown 表格或 CSV 資料，請在「控制台」中的表格上按一下滑鼠右鍵，然後從內容選單中選取對應的複製選項。

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);