Console Utilities API 提供一系列方便執行一般工作的便利函式:選取和檢查 DOM 元素、查詢物件、以可讀取的格式顯示資料、停止和啟動分析器、監控 DOM 事件和函式呼叫等等。
在尋找 console.log()
、console.error()
和其餘 console.*
函式嗎?請參閱管理中心 API 參考資料。
$_
$_
會傳回最近評估的運算式值。
在以下範例中,會評估簡單的運算式 (2 + 2
)。接著,系統會評估 $_
屬性,其中包含相同的值:
在下一個範例中,評估的運算式一開始會包含名稱陣列。評估 $_.length
以找出陣列的長度,儲存在 $_
中的值會變更為最新評估的運算式。4:
NT$0 - NT$120 元
$0
、$1
、$2
、$3
和 $4
指令可做為歷來參照,用來參照在「元素」面板中檢查的最後五個 DOM 元素,或「設定檔」面板中選取的最後五個 JavaScript 堆積物件。$0
會傳回最近選取的元素或 JavaScript 物件,$1
會傳回第二個選取的元素,依此類推。
在以下範例中,於「Elements」(元素) 面板中選取 img
元素。在控制台導覽匣中,系統會評估 $0
並顯示同一個元素:
下圖顯示在同一頁面中選取的不同元素。$0
現在參照新選取的元素,$1
則會傳回先前選取的元素:
$(selector [, startNode])
$(selector)
會傳回含有指定 CSS 選取器的第一個 DOM 元素的參照。當呼叫一個引數時,此函式是 document.querySelector() 函式的捷徑。
以下範例會傳回文件中第一個 <img>
元素的參照:
在傳回的結果上按一下滑鼠右鍵,然後選取「Reveal in Elements Panel」 (在元素面板中顯示) 即可在 DOM 中查看,或是「Scroll in to View」在頁面顯示該結果。
下例會傳回目前所選元素的參照,並顯示其 src
屬性:
此函式也支援第二個參數 startNode
,用於指定要從中搜尋元素的「元素」或「節點」。此參數的預設值為 document
。
以下範例會傳回第一個 img
元素的參照 (該元素的參照是 devsite-header-background
的子系),並顯示其 src
屬性:
$$(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);
}
l10n-placeholder3() 建立陣列,包含所選節點之後,會顯示在目前文件中的所有 <img>
元素:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$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」面板中開啟 document.body
:
inspect(document.body);
傳遞要檢查的函式時,函式會在「Sources」面板中開啟文件,供您檢查。
getEventListeners(object)
getEventListeners(object)
會傳回指定物件上註冊的事件監聽器。回傳值是一個物件,其中包含了各個已註冊事件類型 (例如 click
或 keydown
) 的陣列。每個陣列的成員都是物件,用來描述針對各類型註冊的事件監聽器。例如,以下範例會列出在文件物件中註冊的所有事件監聽器:
getEventListeners(document);
如果指定物件上註冊了多個事件監聽器,則陣列會包含每個事件監聽器的成員。在以下範例中,系統為 click
事件的文件元素註冊了兩個事件監聽器:
您可以進一步展開每個物件,探索這些物件的屬性:
詳情請參閱「檢查物件屬性」。
key(物件)
keys(object)
會傳回一個陣列,其中包含指定物件的屬性名稱。如要取得相同屬性的值,請使用 values()
。
舉例來說,假設您的應用程式定義以下物件:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
假設 player
已在全域命名空間中定義 (為簡單起見),在 Console 中輸入 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」、「mouse 買方」 |
金鑰 | 「keydown」、「keyup」、「keypress」、「textInput」 |
觸控輸入 | 「touchstart」、「touchmove」、「touchend」、「touchcancel」 |
控制 | 「重新大小」、「捲動」、「縮放」、「對焦」、「模糊」、「選取」、「變更」、「提交」、「重設」 |
舉例來說,以下程式碼使用「鍵」事件類型,針對目前在「Elements」(元素) 面板中選取的輸入文字欄位,使用所有對應的重要事件。
monitorEvents($0, "key");
以下是在文字欄位輸入字元後的輸出範例:
使用 unmonitorEvents(object[, events])
停止監控。
個人資料([name]) 和 profileEnd([name])
profile()
會使用選用名稱啟動 JavaScript CPU 剖析工作階段。profileEnd()
會完成設定檔,並在「Performance」 >「Main」測試群組中顯示結果。
開始剖析:
profile("Profile 1")
如要停止剖析並查看結果,請依序前往「Performance」 >「Main」軌:
profileEnd("Profile 1")
「Performance」 >「Main」測試群組的結果:
您也可以將設定檔設為巢狀結構舉例來說,這將按任何順序運作:
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(資料 [, 資料欄])
傳入具有選用欄標題的資料物件傳入資料物件,以設定表格格式記錄物件資料。這是「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);