本頁面由 Cloud Translation API 翻譯而成。

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

Kayce Basques

Sofia Emelianova

Console Utilities API 提供一系列可執行常見工作的便利函式工作：選取和檢查 DOM 元素、查詢物件、以可讀取的格式顯示資料、停止與啟動分析器、監控 DOM 事件和函式呼叫等等。

在尋找 console.log()、console.error() 和其餘 console.* 函式嗎？詳情請見 Console API 參考資料。

$_

$_ 會傳回最近評估的運算式值。

在以下範例中，會評估簡單的運算式 (2 + 2)。接著，$_ 屬性為，這個數字包含相同的值：

$_ 是最近評估的運算式。

在下一個範例中，評估的運算式一開始會包含名稱陣列。評估中 $_.length 會找出陣列的長度，$_ 中儲存的值會變更為最新的值經評估的運算式，4：

$_ 會隨著評估新指令而改變。

NT$0 - NT$120 元

$0、$1、$2、$3 和 $4 指令可做為最近五個 DOM 的歷史參照在「元素」Elements面板中檢查的元素，或是已選取的最近五個 JavaScript 堆積物件「Profiles」(設定檔) 面板。$0 會傳回最近選取的元素或 JavaScript 物件 $1 會傳回第二個選取的版本，依此類推。

在以下範例中，於「Elements」(元素)Elements 面板中選取 img 元素。在「Console」導覽匣中 $0 已經過評估，並顯示相同的元素：

範例：$0。

下圖顯示在同一頁面中選取的不同元素。$0 現在參照了而 $1 會傳回先前選取的元素：

範例：$1。

$(selector [, startNode])

$(selector) 會傳回含有指定 CSS 選取器的第一個 DOM 元素的參照。時間這個函式是 document.querySelector() 函式的捷徑。

以下範例會傳回文件中第一個 <img> 元素的參照：

$('img') 的範例。

在傳回的結果上按一下滑鼠右鍵，然後選取「在元素面板中顯示」，即可在 DOM 中找到該結果，或是 捲動至「檢視畫面」即可在頁面上顯示。

以下範例會傳回目前所選元素的參照，並顯示其 src 資源：

$('img').src 的範例。

這個函式也支援第二個參數 startNode，用於指定「元素」或節點來源用來搜尋元素此參數的預設值為 document。

以下範例會傳回一個參照，該元素是 devsite-header-background 子系的第一個 img 元素，且會顯示其 src 屬性：

$('img', div).src 的範例。

注意：如果您使用的是使用 $ 的 jQuery 等程式庫，此功能將而 $ 會對應至該程式庫的實作內容。

$$(selector [, startNode])

$$(選取器) 會傳回符合指定 CSS 選取器的元素陣列。這項指令相當於呼叫 Array.from(document.querySelectorAll())。



以下範例使用 $$() 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);
}

&lt;img&gt;個元素
出現在目前文件中的所選節點後方：
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



注意：在控制台中按下 Shift + Enter 鍵，即可開始操作
在不執行指令碼的情況下增加一行。

$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

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



傳送要檢查的函式時，函式會在「來源」面板中開啟文件
瀏覽網站。

getEventListeners(object)

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



如果指定物件上註冊了多個事件監聽器，就表示陣列會包含成員
各個事件監聽器在下例中，有兩個事件接聽程式登錄在
click 事件的文件元素：



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



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

key(物件)

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

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

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



Monitor(函式)

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



使用 unmonitor(function) 停止監控。

monitorEvents(object [, events])

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

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



以下定義用於監控兩個「重新調整大小」的陣列以及「捲動」呼叫視窗物件的事件：
monitorEvents(window, ["resize", "scroll"])

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

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

例如，下列指令使用「key」事件類型，根據輸入文字的所有對應重要事件
目前在「元素」面板中選取的欄位。Elements
monitorEvents($0, "key");

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



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

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

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

注意：profile() 和 profileEnd() 是 console.profile() 和 console.profileEnd() 的簡寫。

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

如要停止剖析並查看結果，請前往「Performance」(效能) >主要測試群組：
profileEnd("Profile 1")

「成效」中的結果 >主要測試群組：



您也可以將設定檔設為巢狀結構舉例來說，這將按任何順序運作：
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
敬上
注意：可一次操作多個 CPU 設定檔，但不必逐一關閉
建立順序。

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

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