第一篇
Console【控制台】
控制台概覽
本頁面介紹了 Chrome DevTools Console 如何讓開發網頁變得更容易。 控制台有兩個主要用途：檢視記錄的消息和運作 JavaScript。
檢視記錄的消息
Web 開發人員經常将消息記錄到控制台，以確定他們的 JavaScript 按預期工作。 要記錄消息，請在 JavaScript 中插入一個類似于 console.log('Hello, Console!') 的表達式。 當浏覽器執行您的 JavaScript 并看到這樣的表達式時，它知道它應該将消息記錄到控制台。
運作 JavaScript
控制台也是一個 REPL。 您可以在控制台中運作 JavaScript 以與您正在檢查的頁面進行互動。
控制台中的日志消息
此互動式教程向您展示如何在 Chrome DevTools 控制台中記錄和過濾消息。
設定【demo】和 DevTools
本教程旨在讓您可以打開示範并自己嘗試所有工作流程。 當您實際跟随時，您以後更有可能記住工作流程。
1，打開demo。
2，按 Control+Shift+J 或 Command+Option+J (Mac) 打開 DevTools。 預設情況下，DevTools 在右側打開。
檢視從 JavaScript 記錄的消息
您在控制台中看到的大多數消息來自編寫頁面 JavaScript 的 Web 開發人員。 本節的目标是向您介紹您可能會在控制台中看到的不同消息類型，并解釋如何從您自己的 JavaScript 中自行記錄每種消息類型。
1，在【demo】頁面點選【Log Info】按鈕。
2，控制台中單擊 【log.js:2】。 Sources 面闆打開并突出顯示導緻消息被記錄到控制台的代碼行。 當頁面的 JavaScript 調用 【console.log('Hello, Console!')】 時記錄該消息。
3，使用以下任一工作流導航回控制台：
A，單擊控制台頁籤。
B，按 Control+[ 或 Command+[ (Mac)，直到【Console】面闆獲得焦點。
C，打開指令菜單，輸入 Console，選擇 Show Console Panel 指令，然後按 Enter。
4，單擊【demo】中的【Log Warning】按鈕。 像這樣格式化的消息是警告。
5， 點選警告消息前的箭頭，用來顯示導緻警告消息的跟蹤。
6，單擊【demo】中的【Log Error】按鈕。 像這樣格式化的消息是錯誤。
7，單擊【demo】中的【Log Table 】按鈕。 顯示表格化的消息。
8，單擊【demo】中的【Log Group】按鈕。顯示組格式化的消息。
9，單擊【demo】中的【Log Custom】按鈕。 帶有紅色邊框和藍色背景的消息會記錄到控制台。
這裡的主要思想是，當您想從 JavaScript 将消息記錄到控制台時，您可以使用其中一種控制台方法。 每種方法都以不同的方式格式化消息。
還有比本節中示範的方法更多的方法。 在本教程結束時，您将學習如何探索其餘方法。
檢視浏覽器記錄的消息
浏覽器也将消息記錄到控制台。 這通常發生在頁面出現問題時。
1，單擊【demo】中的【Cause 404】按鈕。浏覽器會記錄 404 網絡錯誤，因為頁面的 JavaScript 試圖擷取不存在的檔案。
2，單擊【demo】中的【Cause Error】按鈕。 浏覽器會記錄未捕獲的 TypeError，因為 JavaScript 正在嘗試更新不存在的 DOM 節點。
3，單擊 【Log Levels】 下拉菜單，如果已禁用，則啟用 【Verbose】 選項。 您将在下一節中了解有關過濾的更多資訊。 您需要這樣做以確定您記錄的下一條消息可見。
注意：如果預設級别下拉菜單被禁用，您可能需要關閉控制台側欄。 按下面的消息源過濾以擷取有關控制台側邊欄的更多資訊。
4，單擊【demo】中的【Cause Violation】按鈕。 頁面在幾秒鐘内無響應，然後浏覽器将消息 [Violation] 'click' handler take 3000ms 記錄到控制台。 确切的持續時間可能會有所不同。
Chrome DevTools第一篇Console【控制台】 過濾消息
在某些頁面上，您會看到控制台充斥着消息。 DevTools 提供了許多不同的方法來過濾掉與手頭任務無關的消息。
1，過濾普通【log】。
每個控制台方法都配置設定了一個嚴重性級别：詳細【Verbose】、資訊【Info】、警告【Warning】或錯誤【Error】。 例如，console.log() 是資訊【Info】級别的消息，而 console.error() 是錯誤【Error】級别的消息。
單擊【Log Levels】下拉清單并禁用錯誤【Error】。 當級别旁邊不再有複選标記時，級别将被禁用。 錯誤級别消息消失。
2，按文本過濾。
如果您隻想檢視包含确切字元串的消息，請在過濾器文本框中鍵入該字元串。
3，按正規表達式過濾。
如果要顯示包含文本模式而非特定字元串的所有消息，請使用正規表達式。
參考：正規表達式文法 檢證正規表達式
4，按消息來源過濾。
如果您隻想檢視來自某個 URL 的消息，請使用側邊欄。
5，按使用者消息過濾。
Chrome DevTools第一篇Console【控制台】 将控制台與任何其他面闆一起使用
如果您正在編輯樣式，但需要快速檢查控制台日志中的某些内容，該怎麼辦？ 使用抽屜。
1，單擊【Elements】頁籤。
2，按【ESC】。 抽屜的控制台頁籤打開。 它具有您在本教程中一直使用的控制台面闆的所有功能。
在控制台中運作 JavaScript
此互動式教程向您展示如何在 Chrome DevTools 控制台中運作 JavaScript。
概述
控制台是一個 REPL，代表讀取、評估、列印和循環。 它讀取您輸入的 JavaScript，評估您的代碼，列印出您的表達式的結果，然後循環回到第一步。
設定開發者工具
本教程旨在讓您可以打開示範并自己嘗試所有工作流程。 當您實際跟随時，您以後更有可能記住工作流程。
1，按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、Chrome OS）打開控制台。
檢視和更改頁面的 JavaScript 或 DOM
在建構或調試頁面時，在控制台中運作語句以更改頁面的外觀或運作方式通常很有用。
1，注意下面按鈕中的文字。
2，輸入 【document.getElementById('hello').textContent = 'Hello, Console!'】 在控制台中，然後按 【Enter】 計算表達式。 注意按鈕内的文本是如何變化的。
運作與頁面無關的任意 JavaScript
有時，您隻想要一個代碼遊樂場，您可以在其中測試一些代碼，或者嘗試您不熟悉的新 JavaScript 功能。 控制台是進行此類實驗的理想場所。
1，在控制台中鍵入 【5 + 15】 并按 Enter 以計算表達式。 控制台列印出代碼下面的表達式的結果。
2，在控制台中鍵入以下代碼。 嘗試逐個字元地輸入它，而不是複制粘貼它。
function add(a, b=20) {
return a + b;
}
3，現在，調用您剛剛定義的函數。
Chrome DevTools第一篇Console【控制台】
附錄
1，您可以輸入 【$()】，而不是鍵入 【document.querySelector()】 來選擇元素。 此文法受 jQuery 啟發，但實際上并非 jQuery。 它隻是 【document.querySelector()】 的别名。
2，【debug(function)】 在該函數的第一行有效地設定了一個斷點。
3，【keys(object)】 傳回一個包含指定對象鍵的數組。
控制台功能參考
此頁面是與 Chrome DevTools 控制台相關的功能參考。
打開控制台
您可以将控制台作為面闆或抽屜中的頁籤打開。
1，打開控制台面闆。
A，按 Control+Shift+J 或 Command+Option+J (Mac)。
B，要從指令菜單打開控制台面闆，請開始輸入【Console】，然後運作旁邊帶有【Panel】标志的【Show Console】指令。
2，打開抽屜中的控制台頁籤。
按 【Escape】 或單擊 【Customize And Control DevTools】 然後選擇 【Show Console Drawer】。
【Drawer】 在您的 DevTools 視窗底部彈出，并打開 Console 頁籤。
要從指令菜單打開控制台頁籤，請開始鍵入控制台，然後運作旁邊帶有抽屜标志的顯示控制台指令。
3，打開控制台設定。
點選【Console Settings】。
4，打開控制台側邊欄。
單擊 【Show Console Sidebar】 以顯示側邊欄，這對過濾很有用。
檢視消息
此部分包含更改消息在控制台中的顯示方式的功能。
1，禁用消息分組
打開控制台設定并禁用組類似于禁用控制台的預設消息分組行為。
2，記錄 XHR 和 Fetch 請求
打開控制台設定并啟用 【Log XMLHttpRequests】 以在發生時将所有 XMLHttpRequest 和 Fetch 請求記錄到控制台。
3，跨頁面加載保持消息
預設情況下，每當您加載新頁面時，控制台都會清除。 要跨頁面加載保留消息，請打開控制台設定，然後啟用保留日志複選框。
4，隐藏網絡消息
預設情況下，浏覽器将網絡消息記錄到控制台。 隐藏網絡消息：打開控制台設定。啟用隐藏網絡複選框。
過濾消息
有很多方法可以過濾掉控制台中的消息。
1，過濾浏覽器消息
打開控制台邊欄并單擊使用者消息以僅顯示來自頁面 JavaScript 的消息。
2，按日志級别過濾
DevTools 為每個 【console.*】 方法配置設定一個嚴重性級别。 有 4 個級别：詳細、資訊、警告和錯誤。 例如，console.log() 在 Info 組中，而 console.error() 在 Error 組中。 控制台 API 參考描述了每種适用方法的嚴重性級别。 浏覽器記錄到控制台的每條消息也有一個嚴重性級别。 您可以隐藏您不感興趣的任何級别的消息。
A，您還可以通過打開控制台邊欄，然後單擊錯誤、警告、資訊或詳細資訊來按日志級别進行過濾。
B，單擊日志級别下拉清單以啟用或禁用詳細、資訊、警告或錯誤消息。
3，按 URL 過濾消息
鍵入 url: 後跟一個 URL 以僅檢視來自該 URL 的消息。 輸入 url 後：DevTools 會顯示所有相關的 URL。
例如，
A，如果 【https://example.com/a.js】 和 【https://example.com/b.js】 正在記錄消息，則 【url:https://example.com】 使您能夠專注于來自這兩個的消息 腳本。
B，輸入 【-url】: 以隐藏來自該 URL 的消息。 這稱為否定 URL 過濾器。
您還可以通過打開控制台邊欄，展開使用者消息部分，然後單擊包含要關注的消息的腳本的 URL 來顯示來自單個 URL 的消息。
4，過濾掉來自不同上下文的消息
假設您的網頁上有一則廣告。 該廣告嵌入在 <iframe> 中，并在您的控制台中生成大量消息。 由于此廣告位于不同的 JavaScript 上下文中，是以隐藏其消息的一種方法是打開控制台設定并啟用僅標明上下文複選框。
5，過濾掉與正規表達式模式不比對的消息
在過濾器文本框中鍵入正規表達式，例如 /[gm][ta][mi]/ 以過濾掉與該模式不比對的任何模式。 DevTools 檢查是否在消息文本或導緻記錄消息的腳本中找到該模式。
運作 JavaScript
本節包含與在控制台中運作 JavaScript 相關的功能。
1，重新運作曆史表達式
按向上箭頭鍵可循環浏覽您之前在控制台中運作的 JavaScript 表達式的曆史記錄。 按 Enter 再次運作該表達式。
2，使用 Live Expressions 實時觀察表達式的值
如果您發現自己在控制台中重複輸入相同的 JavaScript 表達式，您可能會發現建立實時表達式更容易。 使用 【Live Expressions】，您隻需輸入一次表達式，然後将其固定到控制台的頂部。 表達式的值近乎實時地更新。
3，禁用 Eager 評估
當您在控制台中鍵入 JavaScript 表達式時，【Eager Evaluation】 會顯示該表達式傳回值的預覽。 打開控制台設定并禁用 【Eager Evaluation】 複選框以關閉傳回值預覽。
4，從曆史中禁用自動完成
當您輸入表達式時，控制台的自動完成彈出視窗會顯示您之前運作的表達式。 這些表達式前面帶有 > 字元。 打開控制台設定并禁用從曆史記錄自動完成複選框以停止顯示曆史記錄中的表達式。
5，選擇 JavaScript 上下文
預設情況下，JavaScript 上下文下拉清單設定為頂部，代表主文檔的浏覽上下文。
假設您的網頁上有一個嵌入 <iframe> 的廣告。 您希望運作 JavaScript 以調整廣告的 DOM。 為此，您首先需要從 JavaScript 上下文下拉清單中選擇廣告的浏覽上下文。
清空控制台内容
您可以使用以下任何工作流程來清除控制台：
A，單擊清除控制台來清除控制台。
B，右鍵單擊消息，然後選擇清除控制台。
C，在控制台中鍵入 clear()，然後按 Enter。
D，從您網頁的 JavaScript 調用 console.clear()。
E，當控制台處于焦點時按 Control+L。
控制台 API 參考
使用控制台 API 從 JavaScript 将消息寫入控制台。
console.assert(expression, object)
當表達式的計算結果為 false 時，将錯誤寫入控制台。
const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});
console.clear()
清空控制台。
console.clear();
console.count([label]) console.countReset([label])
寫入 count() 在同一行和相同标簽被調用的次數。 調用 console.countReset([label]) 重置計數。
console.count();
console.count('coffee');
console.count();
console.count();
Chrome DevTools第一篇Console【控制台】
console.debug(object [, object, ...])
除了不同的日志級别外，與 【console.log(object [, object, ...])】 相同。
console.debug('debug');
console.dir(object)
列印指定對象的 JSON 表示。
console.dir(document.head);
console.dirxml(node)
列印節點後代的 XML 表示。
console.dirxml(document);
console.error(object [, object, ...])
将對象列印到控制台，将其格式化為錯誤，并包含堆棧跟蹤。
console.error("I'm sorry, Dave. I'm afraid I can't do that.");
console.group(label)
可視化地将消息組合在一起，直到調用 console.groupEnd(label)。
const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);
console.groupCollapsed(label)
與 console.group(label) 相同，除了組在登入到控制台時最初折疊。
const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);
Chrome DevTools第一篇Console【控制台】
console.groupEnd(label)
停止對消息進行視覺分組。
console.info(object [, object, ...])
與 console.log(object [, object, ...]) 相同。
console.info('info');
console.log(object [, object, ...])
向控制台列印一條消息。
console.log('log');
console.table(array)
将對象數組記錄為表。
console.table([
{
first: 'René',
last: 'Magritte',
},
{
first: 'Chaim',
last: 'Soutine',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Matisse',
}
]);
console.time([label])
啟動一個新的計時器。 調用 console.timeEnd([label]) 停止計時器并将經過的時間列印到控制台。
console.time();
for (var i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
console.timeEnd([label])
停止計時器。
console.trace()
将堆棧跟蹤列印到控制台。
const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();
console.warn(object [, object, ...])
向控制台列印警告。
console.warn('warn');
控制台實用程式 API 參考
控制台實用程式 API 包含一組用于執行常見任務的便捷函數：選擇和檢查 DOM 元素、以可讀格式顯示資料、停止和啟動分析器以及監視 DOM 事件。
警告：這些函數僅在您從 Chrome DevTools 控制台調用它們時才起作用。 如果您嘗試在腳本中調用它們，它們将不起作用。
$_
$_
傳回最近計算的表達式的值。
$0 - $4
$0、$1、$2、$3 和 $4 指令用作對在 Elements 面闆中檢查的最後五個 DOM 元素或在 Profiles 面闆中選擇的最後五個 JavaScript 堆對象的曆史參考。 $0 傳回最近選擇的元素或 JavaScript 對象，$1 傳回第二個最近選擇的元素，依此類推。
$(selector, [startNode])
$(selector) 傳回對具有指定 CSS 選擇器的第一個 DOM 元素的引用。 當使用一個參數調用時，此函數是 document.querySelector() 函數的别名。
此函數還支援第二個參數 startNode，它指定要從中搜尋元素的“元素”或節點。 該參數的預設值為文檔【document】。
注意：如果您正在使用使用 $ 的庫（例如 jQuery），則此功能将被覆寫，并且 $ 将對應于該庫的實作。
$$(selector, [startNode])
$$(selector) 傳回與給定 CSS 選擇器比對的元素數組。 此指令等效于調用 document.querySelectorAll()。
此函數還支援第二個參數 startNode，它指定要從中搜尋元素的元素或節點。 該參數的預設值為文檔【document】。
注意：在控制台中按 Shift + Enter 可在不執行腳本的情況下開始新行。
$x(path, [startNode])
$x(path) 傳回與給定 XPath 表達式比對的 DOM 元素數組。
clear()
清空控制台。
copy(object)
copy(object) 将指定對象的字元串表示複制到剪貼闆。
debug(function)
當指定的函數被調用時，調試器被調用并在 Sources 面闆上的函數内部中斷，允許單步執行代碼并調試它。
使用 undebug(fn) 停止中斷函數，或使用 UI 禁用所有斷點。
dir(object)
dir(object) 顯示所有指定對象屬性的對象樣式清單。 此方法是 Console API 的 console.dir() 方法的别名。
dirxml(object)
dirxml(object) 列印指定對象的 XML 表示，如元素頁籤中所示。 此方法等效于 console.dirxml() 方法。
inspect(object/function)
inspect(object/function) 打開并在适當的面闆中選擇指定的元素或對象：DOM 元素的 Elements 面闆或 JavaScript 堆對象的 Profiles 面闆。
getEventListeners(object)
【getEventListeners(object)】 傳回在指定對象上注冊的事件偵聽器。 傳回值是一個對象，其中包含每個注冊事件類型（例如，單擊或按鍵）的數組。 每個數組的成員都是描述為每種類型注冊的偵聽器的對象。
如果在指定對象上注冊了多個偵聽器，則數組包含每個偵聽器的成員。
keys(object)
keys(object) 傳回一個包含屬于指定對象的屬性名稱的數組。 要擷取相同屬性的關聯值，請使用 values()。
var player1 = { "name": "Ted", "level": 42 }
monitor(function)
調用指定的函數時，會在控制台中記錄一條消息，訓示函數名稱以及調用時傳遞給該函數的參數。
function sum(x, y) {
return x + y;
}
monitor(sum);
使用 【unmonitor(function)】 停止監視。
monitorEvents(object[, events])
當指定的事件之一發生在指定的對象上時，事件對象将記錄到控制台。 您可以指定要監視的單個事件、事件數組或映射到預定義事件集合的通用事件“類型”之一。
以下監控視窗對象上的所有調整大小事件。
monitorEvents(window, "resize");
您還可以指定一種可用的事件“類型”，即映射到預定義事件集的字元串。 下表列出了可用的事件類型及其關聯的事件映射：
| mouse | "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
| key | "keydown", "keyup", "keypress", "textInput" |
| touch | "touchstart", "touchmove", "touchend", "touchcancel" |
| control | "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset" |
profile([name]) and profileEnd([name])
profile() 使用可選名稱啟動 JavaScript CPU 分析會話。 profileEnd() 完成配置檔案并在“配置檔案”面闆中顯示結果。 （另請參閱加速 JavaScript 執行。）
queryObjects(Constructor)
從控制台調用 queryObjects(Constructor) 以傳回使用指定構造函數建立的對象數組。 例如：
1，【queryObjects(Promise)】。 傳回所有承諾。
2，【queryObjects(HTMLElement)】。 傳回所有 HTML 元素。
3，【queryObjects(foo)】，其中 foo 是函數名。 傳回所有通過 new foo() 執行個體化的對象。
【queryObjects()】 的範圍是控制台中目前選擇的執行上下文。
table(data[, columns])
通過傳入帶有可選列标題的資料對象，以表格格式記錄對象資料。
var names = {
0: { firstName: "John", lastName: "Smith" },
1: { firstName: "Jane", lastName: "Doe" }
};
table(names);
undebug(function)
【undebug(function)】 停止對指定函數的調試，以便在調用該函數時不再調用調試器。
unmonitor(function)
【unmonior(function)】 停止對指定函數的監視。 這與 【monitor(fn)】 一起使用。
unmonitorEvents(object[, events])
【unmonitorEvents(object[, events])】 停止監視指定對象和事件的事件。
您還可以有選擇地停止監視對象上的特定事件。 例如，以下代碼開始監視目前標明元素上的所有滑鼠事件，然後停止監視“mousemove”事件（可能是為了減少控制台輸出中的噪音）：
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
values(object)
values(object) 傳回一個數組，其中包含屬于指定對象的所有屬性的值。
使用 Live Expressions 實時觀察 JavaScript 值
如果您發現自己在控制台中重複輸入相同的 JavaScript 表達式，您可能會發現建立實時表達式更容易。 使用 Live Expressions，您隻需輸入一次表達式，然後将其固定到控制台的頂部。 表達式的值近乎實時地更新。
建立實時表達式
1，單擊建立實時表達式 【Create Live Expression】。 出現實時表達式文本框。
2，鍵入 Control+Enter 或 Command+Enter (Mac) 以儲存表達式，或單擊 Live Expression 文本框外部。