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

發行項
07/24/2024

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

選取並檢查 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()`。
檢查 (物件/函式)	在 Elements 工具中開啟並選取指定的 DOM 專案，或記憶體工具中指定的 JavaScript 堆積物件。
getEventListeners (物件)	傳回在指定對象上註冊的事件接聽程式。
索引鍵 (物件)	傳回數位，其中包含屬於指定物件之屬性的名稱。
監視 (函式)	將訊息記錄到主控台，指出函式名稱，以及在要求中傳遞給函式的自變數。
monitorEvents (object[， events])	當指定的物件上發生其中一個指定的事件時，事件對象會記錄到主控台。
配置檔 ([name])	使用選擇性名稱啟動 JavaScript CPU 分析工作階段。
profileEnd ([name])	完成 JavaScript CPU 分析工作階段，並在效能工具中顯示結果。
queryObjects (建構函式)	傳回指定建構函式所建立之對象的陣列。
數據表 (數據[，資料行])	記錄指定之數據對象的物件數據，格式化為具有數據行標題的數據表。
取消偵錯 (函式)	停止指定函式的偵錯，如此一來，當要求函式時，就不會再叫用調試程式。
unmonitor (函式)	停止監視指定的函式。
unmonitorEvents (object[， events])	停止監視指定之物件和事件的事件。
物件) (值	傳回數位，其中包含屬於指定物件之所有屬性的值。

最近評估的表達式： $_

$_ 會傳回最近評估之表達式的值。

語法：

$_

範例 1

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

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

範例 2

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的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 回第二個最近選取的專案，依此類推。 $0、$1、$2、 $3和 $4 變數可作為在 Elements 工具內檢查的最後五個 DOM 元素的歷史參考，或記憶體工具中選取的最後五個 JavaScript 堆積物件。

語法

$0

範例

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

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

$0 會參考新選取的專案，也就是 <div> 元素。
輸入$1，然後按下 [Enter]。

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

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

$(selector) 會傳回第一個符合指定 CSS 選取器 selector之 DOM 項目的參考。

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

如果您使用使用的 jQuery 之類的連結庫， $則會覆寫功能，並對 $ 應至該連結庫的實作。

語法

$(selector, [parentElement])

範例 1

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

範例 2

函 $() 式會接受第二個參數 parentElement，指定要搜尋的父元素。參數的預設值為 document，這表示預設會搜尋整個網頁。藉由指定父元素，您可以在網頁的特定部分內搜尋元素。

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

會重構符合第一個元素 input 中找到之 CSS 選取器的第一個 ul 元素：

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

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

此函式類似於 document.querySelectorAll () 但會傳回 array 專案的，而不是 NodeList。

語法

$$(selector, [parentElement])

範例 1

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

範例 2

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

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

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

$x(path) 會傳回符合指定之 XPath 運算式的 DOM 項目陣列 path。

語法

$x(path, [parentElement])

範例 1

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

範例 2

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

類似於其他選取器命令， $x(path) 具有選擇性的第二個參數 parentElement，指定要在其中搜尋元素的項目或節點。

clear()

clear() 清除其歷程記錄的主控台。

語法

clear()

範例

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

複製 (物件)

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

語法

copy(object)

範例

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

偵錯 (函式)

debug(function)呼叫該函式時，會在Sources工具的指定函function式內暫停。

調試程序暫停之後，您就可以逐步執行程式碼並進行偵錯。

語法

debug(function)

範例

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

除錯程式會在 Sources 工具的 updateList() 函式內暫停：

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

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

dir (物件)

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

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

語法

dir(object)

範例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的DevTools中開啟。
在 主控台 工具中，輸入 document.head ，然後按 Enter。

隨即 <head> 顯示專案的 HTML 表示法。
輸入 dir(document.head) ，然後按 Enter。

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

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

dirxml (物件)

dirxml(object) 會列印指定之物件的 XML 表示，如專案工具中所示，例如 console.dirxml()。

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

語法

dirxml(object)

檢查 (物件/函式)

inspect(element/function) 會在 Elements 工具中 開啟並選取指定的 DOM 專案，或在 Sources 工具中選取指定的 JavaScript 函式。

針對 DOM 元素，此函式會開啟，並在 Elements 工具中選取指定的 DOM 專案。
對於 JavaScript 函式，此函式會在 Sources 工具中開啟指定的 JavaScript 函式。

語法

inspect(element/function)

範例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的DevTools中開啟。
在 主控台 工具中，輸入 inspect(document.body) ，然後按 Enter。

[ 元素] 工具隨即開啟， <body> 並選取元素：

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

getEventListeners (物件)

getEventListeners(object) 會傳回在指定對象上註冊的事件接聽程式。

傳回值是物件，其中包含每個已註冊事件類型 (的陣列，例如 click 或 keydown) 。每個陣列中的專案都是對象，這些物件描述為每個類型註冊的接聽程式。

語法

getEventListeners(object)

範例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的DevTools中開啟。
在 主控台 工具中，輸入 getEventListeners($('form')) ，然後按 Enter。

第一個 <form> 元素上註冊的事件接聽程式隨即顯示：

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

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

索引鍵 (物件)

keys(object) 會傳回數位，其中包含屬於指定物件之屬性的名稱。

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

語法

keys(object)

範例

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

監視 (函式)

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

語法

monitor(function)

範例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的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

若要監視單一事件：

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的DevTools中開啟。
在 主控台 工具中，輸入下列程式代碼，然後按 Enter：
```
monitorEvents(window, "resize");
```
先前的代碼段會監視視窗物件上的所有重設大小事件。
調整視窗大小，例如讓 DevTools 變大或縮小。調整事件大小會出現在 主控台 工具中：

範例 2

若要監視多個事件：

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具會在網頁旁的DevTools中開啟。
在 主控台 工具中，輸入下列程式代碼，然後按 Enter：
```
monitorEvents(window, ["resize", "scroll"]);
```
先前的代碼段會定義事件名稱的數位，以監視 resize 窗口物件上的和 scroll eevent。
調整視窗的大小，例如讓視窗變短，然後捲動轉譯的網頁。 主控台工具中會顯示重設大小和捲動事件：

範例 3

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

事件類型	對應的對應事件
`mouse`	“click”、“dblclick”、“mousedown”、“mousemove”、“mouseout”、“mouseover”、“mouseup”、“mousewheel”
`key`	“keydown”、“keypress”、“keyup”、“textInput”
`touch`	“touchcancel”、“touchend”、“touchmove”、“touchstart”
`control`	“blur”、“change”、“focus”、“reset”、“resize”、“scroll”、“select”、“submit”、“zoom”

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

profile ([name])

profile([name]) 會啟動具有選擇性名稱的 JavaScript CPU 分析會話。

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

語法

profile([name])

範例

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

設定檔案結果會出現在效能工具中：

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

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

profileEnd ([name])

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

若要呼叫此函式，您必須執行配置檔 ([name]) 函式。

語法

profileEnd([name])

如需詳細資訊，請參閱上方的配置檔 ([name]) 。

queryObjects (建構函式)

queryObjects(constructor) 會傳回指定建構函式所建立之對象的陣列。

的範圍 queryObjects() 是 主控台中目前選取的運行時間內容。

語法

queryObjects(constructor)

範例

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

其他範例：

如果您的網頁使用物件，Promise請使用 queryObjects(Promise)Promise 傳回物件的所有實例。
如果您的網頁使用 JavaScript 類別，ClassName請使用 queryObjects(ClassName) 傳回類別的所有實例。

數據表 (數據[，資料行])

table(data[, columns]) 記錄指定之數據對象的物件數據，格式化為具有數據行標題的數據表。

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

語法

table(data[, columns])

範例

若要將人員名稱清單顯示為資料表，請在 主控台中：

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

取消偵錯 (函式)

undebug(function) 會停止指定函式的偵錯，因此當函式執行時，調試程式不會再在函式中暫停。

如需詳細資訊，請參閱上述 (函式) 偵錯。

語法

undebug(function)

unmonitor (函式)

unmonitor(function) 停止監視指定的函式。

如需詳細資訊，請參閱上方的監視 (函式) 。

語法

unmonitor(function)

unmonitorEvents (object[， events])

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

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

語法

unmonitorEvents(object[, events])

物件) (值

values(object) 會傳回數位，其中包含屬於指定物件之所有屬性的值。

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

語法

values(object)

範例

請參閱上述索引鍵 (物件) 範例。

另請參閱

主控台功能參考
控制台物件 API 參考 - console.* 函式，例如 console.log() 與 console.error()。

注意事項

此頁面的部分是根據Google所建立和共用的工作進行修改，並根據 Creative Commons Attribution 4.0 國際授權中所述的條款使用。原始頁面可在這裡找到，並由 Basques 撰寫。

此工作是根據 Creative Commons Attribution 4.0 International License 授權。

共用方式為

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

摘要

最近評估的表達式： $_

範例 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

profile ([name])

語法

範例

profileEnd ([name])

語法

queryObjects (建構函式)

語法

範例

數據表 (數據[， 資料行])

語法

範例

取消偵錯 (函式)

語法

unmonitor (函式)

語法

unmonitorEvents (object[， events])

語法

物件) (值

語法

範例

另請參閱

意見反應

其他資源

數據表 (數據[，資料行])