主控台工具公用程式、函數和選取器

主控台公用程式 API 包含一組方便變數和函式，可用於執行一般工作，例如：

透過 CSS 選取器選取和檢查 DOM 元素。
以可讀的格式顯示資料。
停止並啟動分析工具。
監視 DOM 事件。

這些變數和函式只能透過直接輸入 DevTools 主控台來運作;您無法使用變數並從指令碼呼叫函數。

摘要

變數或函數	描述
最近評估的運算式：$_	傳回最近評估運算式的值。
最近選取的元素或 JavaScript 物件：$0-$4	傳回最近選取的元素或 JavaScript 物件。
查詢選取器：$ (選取器)	查詢選取器;傳回對具有指定 CSS 選擇器的第一個 DOM 元素的引用，例如 `document.querySelector()`。
查詢選取器全部：$$ (選取器，[startNode])	查詢選取器全部;傳回符合指定 CSS 選取器的元素陣列，例如 `document.querySelectorAll()`。
XPath：$x (路徑，[startNode])	傳回符合指定 XPath 運算式的 DOM 元素陣列。
clear()	清除主機的歷程記錄。
複製 (物件)	將指定物件的字串表示法複製到剪貼簿。
偵錯 (函數)	呼叫指定的函式時，會叫用偵錯工具，並在 [來源] 面板上的函式內中斷。
dir (物件)	顯示指定物件所有內容的物件樣式清單，例如 `console.dir()`。
dirxml (物件)	列印指定物件的 XML 表示法，如 [元素 ] 工具中所顯示，例如 `console.dirxml()`。
檢查 (物件/函數)	開啟並選取 [元素] 工具中指定的 DOM 元素，或在 [ 記憶體 ] 工具中選取指定的 JavaScript 堆積物件。
getEventListeners (物件)	傳回在指定物件上登錄的事件接聽程式。
物件) (索引鍵	傳回包含屬於指定物件之屬性名稱的陣列。
監控 (功能)	將訊息記錄到主控台，指出函數名稱，以及作為要求的一部分傳遞給函數的引數。
monitorEvents (object[， events])	當指定物件上發生其中一個指定事件時，該事件物件會記錄到主控台。
設定檔 ([名稱])	使用選用名稱啟動 JavaScript CPU 分析工作階段。
profileEnd ([名稱])	完成 JavaScript CPU 分析工作階段，並在 [ 效能 ] 工具中顯示結果。
queryObjects (建構函式)	傳回指定建構函式所建立物件的陣列。
資料表 (data[， columns])	記錄指定資料物件的物件資料，格式化為具有欄標題的表格。
取消偵錯 (函數)	停止指定函式的偵錯，使得當要求函式時，不再叫用偵錯工具。
取消監視 (函數)	停止指定功能的監視。
unmonitorEvents (object[， events])	停止監視指定物件和事件的事件。
物件) (值	傳回包含屬於指定物件之所有屬性值的陣列。

最近評估的運算式：$_

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

語法：

$_

範例 1

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中輸入運算式 2+2，然後按 Enter。

會評估運算式，並顯示結果。 $_變數也會設定為運算式的結果。
輸入 $_，然後按下 Enter：

範例 2

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
將下列程式碼貼到主機，然後按 Enter：
```
["john", "paul", "george", "ringo"]
```
評估的運算式是名稱陣列。
在主機中輸入下列程式碼，然後按下 ENTER：
```
$_.length
```
運算式 $_.length 會進行評估並 4 顯示在 主控台 中，因為 $_ 參照先前評估的運算式，也就是名稱陣列。 $_.length 是名稱陣列的長度。
在主機中輸入下列程式碼，然後按下 ENTER：
```
$_
```
$_ 一律參照先前評估的運算式，現在是數字 4。

最近選取的元素或 JavaScript 物件：$0-$4

$0、、$1、 $2$3，並$4傳回最近選取的元素或 JavaScript 物件。

$0 傳回最近選取的元素或 JavaScript 物件， $1 傳回第二個最近選取的元素或 JavaScript 物件，依此類推。 $0、$1、$2$3、及$4變數可做為「元素」工具中檢查的最後五個 DOM 元素或「記憶體」工具中選取的最後五個 JavaScript 堆積物件的歷史參照。

語法

$0

範例

若要開啟 DevTools，請以滑鼠右鍵按一下網頁，然後選取 [檢查]。或者，在 Windows (按 Ctrl+Shift+I，Linux) 或 (macOS) 按 Command+Option+I。 DevTools 隨即開啟。
在 [元素] 工具中，選取元素，例如元素 <input> 。
在 [開發工具] 底部的 [快速檢視] 面板中開啟主控台工具。
輸入$0主控台工具，然後按下 Enter。

變數會 $0 傳回選取 <input> 的元素：
在 [元素] 工具中選取不同的元素，例如元素 <div> 。
在 主控台 工具中輸入 $0，然後按下 Enter。

$0 指的是新選擇的元素，也就是元素 <div> 。
輸入$1，然後按下 [Enter]。

$1 指的是先前選取的元素，也就是元素 <input> ：

查詢選取器：$ (選取器)

$(selector) 傳回對符合指定 CSS 選取器的 selector第一個 DOM 元素的引用。

此函數類似於 document.querySelector () 函數。

如果您使用的函式庫，例如 jQuery 使用 $，則功能會被覆寫，並 $ 對應至該函式庫的實作。

語法

$(selector, [parentElement])

範例 1

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中輸入 $('input')。顯示符合 CSS 選取器的第一個元素 input ：
以滑鼠右鍵按一下傳回的結果，然後選取 [ 在元素面板中顯示 ] 以在 DOM 中尋找該結果，或 捲動至 [檢視 ] 以在頁面上顯示該結果。

範例 2

此 $() 函數接受第二個參數 parentElement，可指定要搜尋的父元素。參數的預設值為 document，表示預設搜尋整個網頁。透過指定父元素，您可以搜尋網頁特定部分中的元素。

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中，輸入 $('input', $('ul'))

與第一個ul元素中找到的 input CSS 選取器相符的第一個元素會重新執行：

查詢選取器全部：$$ (選取器，[startNode])

$$() 會傳回符合指定 CSS 選取器的元素清單，例如 document.querySelectorAll()。

此函數類似於 document.querySelectorAll () ，但會傳回 array of 元素，而不是 NodeList.

語法

$$(selector, [parentElement])

範例 1

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中輸入 $$('button')。 <button>網頁中的所有元素都會顯示：

範例 2

此 $$() 函數也支援第二個參數， parentElement可指定要搜尋的父元素。參數的預設值為 document，表示預設搜尋整個網頁。透過指定父元素，您可以搜尋網頁特定部分中的元素。

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中輸入 $$('button', $('li.task'))。 <button>會顯示第一個<li class="task">元素的所有子系元素：

XPath：$x (路徑，[startNode])

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

語法

$x(path, [parentElement])

範例 1

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中輸入 $x("//li")。 <li>網頁中的所有元素都會顯示：

範例 2

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中輸入 $x("//li[button]")。顯示包含元素的所有<li><button>元素：

與其他選取器指令類似， $x(path) 具有選用的第二個參數 parentElement，可指定要搜尋元素的元素或節點。

clear()

clear() 清除主機的歷程記錄。

語法

clear()

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
若要在 主控台 工具中建立歷程記錄，請輸入多個 JavaScript 運算式。例如：
```
for (let i = 0; i < 10; i++) {
    console.log(i);
}
```
若要清除歷程記錄， clear() 請輸入 [主控台 ] 工具，然後按下 Enter：

複製 (物件)

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

語法

copy(object)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中輸入下列程式碼，然後按下 Enter：
```
copy($$('*').map(element => element.tagName));
```
程式碼片段會使用 function 選取 $$(selector) 網頁中的所有元素，然後將 tagName 每個元素的屬性對應至陣列。然後使用函數 copy() 將陣列複製到剪貼簿。
將剪貼簿的內容貼入文字編輯器。剪貼簿的內容是網頁中所有 HTML 標籤的清單，例如：
```
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
```

偵錯 (函數)

debug(function)呼叫 [來源] 工具中的指定函數後，會在該函數function內暫停。

偵錯工具暫停之後，您可以逐步執行程式碼並進行偵錯。

語法

debug(function)

範例

開啟新的索引標籤或視窗，然後前往包含您要偵錯之 JavaScript 函數的頁面。例如，移至 TODO 應用程式示範頁面。
Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 主控台 工具中輸入 debug(updateList)。
在轉譯的網頁中，在 [新增工作] 文字欄位中輸入 test，然後按 Enter，將新的待辦事項項目新增至清單。

偵錯工具會在 [來源] 工具的函式內updateList()暫停：

用 undebug(function) 來停止函數的中斷，或使用 UI 關閉所有中斷點。

如需中斷點的詳細資訊，請參閱使用中斷點暫停程式碼。

dir (物件)

dir(object) 顯示指定物件所有屬性的物件樣式清單，例如 console.dir()。

此函數是 console.dir () 的別名。

語法

dir(object)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入 document.head 並按下 Enter。

隨即顯示元素的 <head> HTML 表示法。
Enter dir(document.head) 然後按下 Enter。

隨即顯示元素 <head> 所有屬性的物件樣式清單：

如需詳細資訊，請參閱主控台 API 中的 console.dir () 。

DIRXML (物件)

dirxml(object) 列印指定物件的 XML 表示法，如 [元素] 工具中所顯示，例如 console.dirxml()。

此函數相當於 console.dirxml () 。

語法

dirxml(object)

檢查 (物件/功能)

inspect(element/function) 開啟並在 [元素 ] 工具中選取指定的 DOM 元素，或在 [來源 ] 工具中選取指定的 JavaScript 函數。

對於 DOM 元素，此函數會開啟並在 「元素」 工具中選取指定的 DOM 元素。
若是 JavaScript 函式，此函式會在 [來源 ] 工具中開啟指定的 JavaScript 函式。

語法

inspect(element/function)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入 inspect(document.body) 並按下 Enter。

「 元素」 工具隨即開啟，且 <body> 已選取元素：

傳遞要檢查的函式時，函式會在 [來源 ] 工具中開啟網頁供您檢查。

getEventListeners (物件)

getEventListeners(object) 傳回在指定物件上登錄的事件接聽程式。

傳回值是一個物件，其中包含每個已註冊事件類型的陣列 (click 例如或 keydown) 。每個陣列中的項目都是描述為每種類型註冊的接聽程式的物件。

語法

getEventListeners(object)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入 getEventListeners($('form')) 並按下 Enter。

顯示在第一個 <form> 元素上登錄的事件接聽程式：

如果在指定的物件上註冊多個接聽程式，則陣列包含每個接聽程式的成員。在下圖中，在事件的click元素上document註冊了兩個事件接聽程式：

在 'click' 事件的 'document' 元素上註冊多個事件接聽程式

物件) (索引鍵

keys(object) 傳回包含屬於指定物件之屬性名稱的陣列。

若要取得相同屬性的相關聯值，請參閱下方物件 ) (值。

語法

keys(object)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入下列程式碼，然後按下 Enter：
```
var player1 = {"name": "Ted", "level": 42}
```
上述程式碼片段在全域命名空間 player1中定義名為的物件，其中包含兩個屬性。
若要取得屬於player1物件的屬性名稱，請在 [主控台] 工具中輸入keys(player1)，然後按 Enter：
若要取得屬於物件的player1屬性值，請在 [主控台] 工具中輸入values(player1)，然後按下 Enter：

監控 (功能)

monitor(function) 每次呼叫指定函數時，將訊息記錄到主控台。該訊息會指出函數名稱和傳遞給函數的引數。

語法

monitor(function)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入下列程式碼，然後按下 Enter：
```
function sum(x, y) {
  return x + y;
}
```
上述程式碼片段定義名為的函數 sum，它接受兩個引數。
若要開始監視sum函數，請在主控台工具中輸入monitor(sum)，然後按下 Enter：
若要呼叫函數，請輸入 sum(1, 2) ，然後按 Enter。此時會出現一則訊息，指出 sum 函數已呼叫，且引數已傳遞給函數：

若要結束監視，請使用 unmonitor(function)。

monitorEvents (object[， events])

monitorEvents(object[, events]) 每次指定的物件上發生指定的事件時，將事件物件記錄到主控台。

您可以指定要監視的單一事件、事件陣列，或對映至預先定義事件集合的其中一個一般事件類型。

語法

monitorEvents(object[, events])

範例 1

若要監視單一事件：

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入下列程式碼，然後按下 Enter：
```
monitorEvents(window, "resize");
```
前面的程式碼片段會監視視窗物件上的所有調整大小事件。
調整視窗大小，例如讓 DevTools 變大或變小。調整大小事件會顯示在 主控台 工具中：

範例 2

若要監視多個事件：

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入下列程式碼，然後按下 Enter：
```
monitorEvents(window, ["resize", "scroll"]);
```
前面的程式碼片段定義了一個事件名稱陣列，以監視 resize 視窗物件上的和 scroll eevents。
例如，將視窗變短，調整視窗大小，然後在轉譯的網頁中捲動。調整大小和捲動事件會顯示在 主控台 工具中：

範例 3

您也可以使用其中一個預先定義的事件集來指定事件集合。下表顯示可用的事件類型和相關聯的事件對應：

事件類型	對應的事件
`mouse`	“click”， “dblclick”， “mousedown”， “mousemove”， “mouseout”， “mouseover”， “mouseup”， “mousewheel”
`key`	“keydown”， “keypress”， “keyup”， “textInput”
`touch`	“TouchCancel”、“TouchEnd”、“TouchMove”、“TouchStart”
`control`	「模糊」、「變更」、「焦點」、「重設」、「調整大小」、「捲動」、「選取」、「提交」、「縮放」

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在 [主控台 ] 工具中，輸入下列程式碼，然後按下 Enter：
```
monitorEvents(window, "key");
```
前面的程式碼片段會監視視窗物件上的所有鍵盤事件。
在轉譯的網頁中，按任意鍵。鍵盤事件會顯示在 主控台 工具中：

設定檔 ([名稱])

profile([name]) 使用選用名稱啟動 JavaScript CPU 分析工作階段。

若要完成設定檔並在 [效能 ] 工具中顯示結果，請呼叫 profileEnd ([名稱]) 。

語法

profile([name])

範例

在新的索引標籤或視窗中開啟您要分析的頁面。例如，移至 Sluggish Animation 示範頁面。
Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
若要啟動分析，請在 [主控台 ] 工具中輸入 profile("My profile)，然後按下 Enter。
若要停止分析，請在一段時間後輸入 profileEnd("My profile")，然後按下 Enter。

設定檔結果會顯示在 [效能 ] 工具中：

您可以同時建立多個設定檔，而且不需要按建立順序結束每個設定檔。例如，下列程式碼會建立兩個設定檔，然後以相反的順序結束：

profile('A');
profile('B');
profileEnd('B');
profileEnd('A');

profileEnd ([名稱])

profileEnd([name]) 完成 JavaScript CPU 分析工作階段，並在 [ 效能 ] 工具中顯示結果。

若要呼叫此函數，您必須執行設定檔 ([name]) 函數。

語法

profileEnd([name])

如需詳細資訊，請參閱上面的設定檔 ([名稱]) 。

queryObjects (建構函式)

queryObjects(constructor) 傳回指定建構函式所建立物件的陣列。

的 queryObjects() 範圍是 主控台中目前選取的執行階段內容。

語法

queryObjects(constructor)

範例

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
若要傳回 HTML 元素的所有執行個體，請在主控台工具中輸入queryObjects(HTMLElement)，然後按下 Enter：

其他範例：

如果您的網頁使用Promise物件，請使用來queryObjects(Promise)傳回物件的所有Promise執行個體。
如果您的網頁使用 JavaScript 類別，請使用來 queryObjects(ClassName) 傳回類別的所有 ClassName 執行個體。

資料表 (data[， columns])

table(data[, columns]) 記錄指定資料物件的物件資料，格式化為具有欄標題的表格。

此函數是 console.table () 的別名。

語法

table(data[, columns])

範例

若要在主機中以表格顯示人員名稱清單：

Windows (按 Ctrl+Shift+J，Linux) 按 Ctrl+Shift+J，或 (macOS) 按 Command+Option+J。主控台工具隨即會在網頁旁邊的 DevTools 中開啟。
在主機中輸入下列程式碼，然後按下 Enter：
```
var names = {
  0: {
    firstName: "John",
    lastName: "Smith"
  },
  1:  {
    firstName: "Jane",
    lastName: "Doe"
  }
};
```
上述程式碼片段在全域命名空間 names中定義名為的物件，其中包含兩個屬性。
若要將物件顯示names為表格，請在 [主控台] 中輸入table(names)，然後按 Enter：

取消偵錯 (函數)

undebug(function) 停止指定函式的偵錯，使得當函式執行時，偵錯工具不再在函式中暫停。

如需詳細資訊，請參閱上方的 debug (function) ，。

語法

undebug(function)

取消監視 (功能)

unmonitor(function) 停止監視指定的功能。

如需詳細資訊，請參閱上方的 monitor (function) 。

語法

unmonitor(function)

unmonitorEvents (object[， events])

unmonitorEvents(object[, events]) 停止監視指定物件的事件和事件。

如需詳細資訊，請參閱上方的 monitorEvents (object[， events]) 。

語法

unmonitorEvents(object[, events])

值 (物件)

values(object) 傳回一個陣列，其中包含屬於指定物件的所有屬性值。

若要取得相同屬性的相關聯索引鍵，請參閱上方的物件 ) (索引鍵。

語法

values(object)

範例

請參閱上述 keys (object) 中的範例。

另請參閱

主機功能參考
主控台物件 API 參考 - console.* 函數，例如 console.log()console.error()和。

注意事項

本頁面的部分內容是根據 Google 建立和分享的作品進行修改，並根據知識共享署名 4.0 國際授權條款中所述的條款使用。原始頁面可在此處找到，由 Kayce Basques 撰寫。

本作品已根據知識共享署名 4.0 國際許可證獲得許可。

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-09-11

主控台工具公用程式、函數和選取器

摘要

最近評估的運算式：$_

範例 1

範例 2

最近選取的元素或 JavaScript 物件：$0-$4

語法

範例

查詢選取器：$ (選取器)

語法

範例 1

範例 2

查詢選取器全部：$$ (選取器，[startNode])

語法

範例 1

範例 2

XPath：$x (路徑，[startNode])

語法

範例 1

範例 2

clear()

語法

範例

複製 (物件)

語法

範例

偵錯 (函數)

語法

範例

dir (物件)

語法

範例

DIRXML (物件)

語法

檢查 (物件/功能)

語法

範例

getEventListeners (物件)

語法

範例

物件) (索引鍵

語法

範例

監控 (功能)

語法

範例

monitorEvents (object[， events])

語法

範例 1

範例 2

範例 3

設定檔 ([名稱])

語法

範例

profileEnd ([名稱])

語法

queryObjects (建構函式)

語法

範例

資料表 (data[， columns])

語法

範例

取消偵錯 (函數)

語法

取消監視 (功能)

語法

unmonitorEvents (object[， events])

語法

值 (物件)

語法

範例

另請參閱

意見反應

其他資源