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

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

正在尋找 console.log()console.error() 和其餘 console.* 函式嗎?請參閱 Console API 參考資料

$_

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

在下列範例中,系統會評估簡單的運算式 (2 + 2)。接著會評估 $_ 屬性,其中包含相同的值:

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

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

評估新指令時,$_ 會變更。

$0 美元至 $4 美元

$0$1$2$3$4 指令可做為歷史記錄參考,用來查看「元素」面板中檢查的最後五個 DOM 元素,或是「設定檔」面板中選取的最後五個 JavaScript 堆積物件。$0 會傳回最近選取的元素或 JavaScript 物件,$1 則會傳回第二個最近選取的元素或物件,依此類推。

在下列範例中,img 元素是在「元素」面板中選取。在「Console」抽屜中, $0 已評估並顯示相同元素:

例如 $0 美元。

下圖顯示在同一頁面中選取不同元素。$0 現在是指新選取的元素,而 $1 則會傳回先前選取的元素:

例如 $1 美元。

$(selector [, startNode])

$(selector) 會傳回參照,指向具有指定 CSS 選擇器的第一個 DOM 元素。使用一個引數呼叫時,這個函式是 document.querySelector() 函式的捷徑。

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

$(&#39;img&#39;) 的範例。

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

以下範例會傳回目前所選元素的參照,並顯示其 src 屬性:

$(&#39;img&#39;).src 的範例。

這個函式也支援第二個參數 startNode,可指定要從哪個「元素」或節點搜尋元素。這個參數的預設值是 document

以下範例會傳回 devsite-header-background 後代的第一個 img 元素參照,並顯示其 src 屬性:

$(&#39;img&#39;, div).src 的範例。

$$(selector [, startNode])

$$(selector) 會傳回與指定 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);
}

所選節點後出現在目前文件中的 使用<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> 建立所有 <code translate=<img> 元素:

let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}

以下範例說明如何使用 $() 選取文件中 select div 元素後顯示的所有圖片,並顯示圖片來源。

$x(path [, startNode])

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

舉例來說,下列程式碼會傳回網頁上的所有 <p> 元素:

$x("//p")

使用 XPath 選擇器的範例。

以下範例會傳回包含 <a> 元素的所有 <p> 元素:

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

使用更複雜的 XPath 選擇器範例。

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

使用 XPath 選擇器和 startNode 的範例。

clear()

clear() 會清除主控台的記錄。

clear();

copy(object)

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

copy($0);

debug(function)

呼叫指定函式時,系統會叫用偵錯工具,並在「來源」面板的函式內中斷,方便逐步執行程式碼並進行偵錯。

debug(getData);

使用 debug() 在函式內中斷。

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

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

dir(object)

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

以下範例顯示直接在指令列中評估 document.body,以及使用 dir() 顯示相同元素之間的差異:

document.body;
dir(document.body);

使用和不使用 dir() 函式記錄 document.body。

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

dirxml(object)

dirxml(object) 會列印指定物件的 XML 表示法,如「元素」面板所示。 這個方法等同於 console.dirxml() 方法。

inspect(object/function)

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

以下範例會在「元素」面板中開啟 document.body

inspect(document.body);

使用 inspect() 檢查元素。

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

getEventListeners(object)

getEventListeners(object) 會傳回在指定物件上註冊的事件監聽器。傳回值是物件,其中包含每個已註冊事件類型的陣列 (例如 clickkeydown)。每個陣列的成員都是物件,用於說明為每種型別註冊的接聽器。舉例來說,下列程式碼會列出在文件物件上註冊的所有事件監聽器:

getEventListeners(document);

使用 getEventListeners() 的輸出內容。

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

多個監聽器。

您可以進一步展開每個物件,查看其屬性:

展開的接聽器物件檢視畫面。

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

keys(object)

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

舉例來說,假設您的應用程式定義了下列物件:

let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

假設 player 是在全域命名空間中定義 (為求簡單),在 Console 中輸入 keys(player)values(player) 會產生下列結果:

keys() 和 values() 方法的範例。

monitor(function)

呼叫指定的函式時,系統會將訊息記錄到控制台中,指出函式名稱,以及呼叫函式時傳遞至函式的引數。

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

monitor() 方法範例。

使用 unmonitor(function) 停止監控。

monitorEvents(object [, events])

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

下列程式碼會監控視窗物件的所有大小調整事件。

monitorEvents(window, "resize");

監控視窗大小調整事件。

以下定義的陣列會監控視窗物件上的「resize」和「scroll」事件:

monitorEvents(window, ["resize", &quot;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")

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

「效能」主軌中的設定檔 1。

設定檔也可以是巢狀結構。舉例來說,以下程式碼可依任何順序運作:

profile('A');
profile('B');
profileEnd('A&#39;);
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);

table() 方法的範例。

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, &quot;mousemove");

values(object)

values(object) 會傳回陣列,其中包含指定物件的所有屬性值。

let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

值(播放器) 的結果。