Web瀏覽器開(kāi)發(fā)人員控制臺(tái)是強(qiáng)大的調(diào)試工具，從簡(jiǎn)單的錯(cuò)誤記者到全面的記錄系統(tǒng)發(fā)展。他們跟蹤網(wǎng)絡(luò)活動(dòng)，安全問(wèn)題等等，並允許JavaScript通過(guò)console對(duì)象輸出調(diào)試信息。儘管在瀏覽器之間基本一致，但存在細(xì)微的視覺(jué)和功能差異。本指南重點(diǎn)介紹了Firefox和Chrome，基於鉻的邊緣的行為與Chrome相似。 WhatWG規(guī)範(fàn)提供了更多詳細(xì)信息。

• 記錄基礎(chǔ)知識(shí)
• 控制臺(tái)清除
• 常見(jiàn)的記錄方法
• 字符串格式
• 樣式輸出
• 斷言
• 計(jì)數(shù)發(fā)生
• 檢查屬性
• 分組輸出
• 表輸出
• 定時(shí)操作
• 堆棧跟蹤
• 與debugger一起調(diào)試
• 其他控制臺(tái)實(shí)用程序

使用console.log()登錄

首先檢查console對(duì)象本身：

 console.log（console）;

這揭示了對(duì)象的屬性，主要是函數(shù)，並具有較小的瀏覽器特異性變化。例如，Chrome包含“內(nèi)存”屬性，而Firefox提供了“名稱(chēng)”屬性。這些差異通常很小。

清除控制臺(tái)： console.clear()

一個(gè)混亂的控制臺(tái)阻礙了調(diào)試。使用：

 console.clear（）;

這清除了控制臺(tái)輸出並顯示確認(rèn)消息（例如，“控制臺(tái)已清除”）。

通用日誌函數(shù)： debug() ， error() ， info() ， log() ， warn()

五個(gè)功能看起來(lái)相似，但提供了特定於瀏覽器的增強(qiáng)功能：

 console.debug（）;
console.error（）;
console.info（）;
console.log（）;
console.warn（）;

這些功能在鍍鉻和Firefox方面在顏色編碼和圖標(biāo)使用方面略有不同，並在提供的細(xì)節(jié)級(jí)別（例如，錯(cuò)誤的錯(cuò)誤痕跡）。瀏覽器提供過(guò)濾選項(xiàng)以控制每個(gè)日誌類(lèi)型的可見(jiàn)性。

這些功能接受各種JavaScript數(shù)據(jù)類(lèi)型（字符串，數(shù)字，對(duì)象，數(shù)組）作為參數(shù)。在內(nèi)聯(lián)顯示多個(gè)參數(shù)。

字符串替換

增強(qiáng)的日誌記錄涉及弦替換以進(jìn)行清晰的輸出：

 console.log（'這是一個(gè)字符串：％s'，'string'）;
console.log（'這是一個(gè)數(shù)字：％i'，42）;
console.log（'這是一個(gè)對(duì)象：％o'，{對(duì)象：'對(duì)象'}）;

支持的替代類(lèi)型包括%s （字符串）， %i （整數(shù)）， %o （對(duì)象）等。模板文字提供了更簡(jiǎn)潔的替代方法：

 console.log（`這是一個(gè)字符串：$ {'string'}`）;
console.log（`這是一個(gè)數(shù)字：$ {42}`）;
console.log（`這是一個(gè)對(duì)象：$ {object：'object'}}`）;

兩種方法都可以合併以進(jìn)行柔性格式。

造型控制臺(tái)輸出

應(yīng)用CSS樣式來(lái)增強(qiáng)可讀性：

 console.log（'％c是大紅色文本'，'顏色：紅色；字體大?。?0px;'）;

可能會(huì)發(fā)生較小的瀏覽器特定渲染差異。多個(gè)%c佔(zhàn)位符允許在單個(gè)日誌語(yǔ)句中進(jìn)行多樣化的樣式。變量可用於存儲(chǔ)和重複使用樣式，改善代碼組織。

斷言： console.assert()

console.assert()採(cǎi)用布爾條件。如果為false，它將輸出錯(cuò)誤消息；否則，它無(wú)濟(jì)於事。這簡(jiǎn)化了條件錯(cuò)誤記錄：

令值= 10;
console.Assert（值<p> Chrome為失敗的斷言提供了堆棧跟蹤，而Firefox則沒(méi)有。</p><h3>計(jì)數(shù)事件： <code>count()</code>和<code>countReset()</code>
</h3><p>使用<code>console.count()</code>跟蹤函數(shù)呼叫或事件發(fā)生?？蛇x標(biāo)籤允許單獨(dú)計(jì)數(shù)：</p><pre class="brush:php;toolbar:false"> Console.Count（'myFunction'）;
Console.Count（'myFunction'）;
console.count（'另一個(gè)功能'）;

console.countReset()重置特定計(jì)數(shù)器。瀏覽器特定的差異存在於視覺(jué)上的重置方式中。

檢查對(duì)象： dir()和dirxml()

console.dir()在類(lèi)似樹(shù)的結(jié)構(gòu)中顯示對(duì)象屬性，而console.dirxml()旨在用於XML/HTML元素。 Firefox將兩者都視為console.log()的別名。 Chrome的console.dir()對(duì)於檢查DOM元素，提供詳細(xì)的屬性信息特別有用。

分組輸出： group() ， groupCollapsed() ， groupEnd()

使用console.group() （可選地）與標(biāo)籤一起組織控制臺(tái)輸出。 console.groupCollapsed()最初倒塌了。 console.groupEnd()關(guān)閉一個(gè)組。支持築巢。造型可以應(yīng)用於組標(biāo)籤。

表輸出： console.table()

使用console.table()以表格格式顯示數(shù)組和對(duì)象。對(duì)象陣列用鍵作為列標(biāo)題渲染。複雜的數(shù)據(jù)結(jié)構(gòu)（數(shù)組的數(shù)組，具有數(shù)組值的對(duì)象）導(dǎo)致更精細(xì)的表。瀏覽器差異存在於表中嵌套對(duì)象的處理方式中。

定時(shí)操作： time() ， timeLog() ， timeEnd()

使用console.time() ， console.timeLog()和console.timeEnd()測(cè)量代碼執(zhí)行時(shí)間。 console.timeLog()提供中間的定時(shí)更新。存在較小的瀏覽器特定於輸出格式的差異。

堆棧跟蹤： console.trace()

生成堆棧跟蹤以查明特定日誌語(yǔ)句的來(lái)源。

與debugger一起調(diào)試

debugger聲明停止執(zhí)行，並在該線(xiàn)路上打開(kāi)調(diào)試器。這不是console對(duì)象方法，而是與控制臺(tái)集成的強(qiáng)大調(diào)試工具。

其他控制臺(tái)實(shí)用程序

存在幾個(gè)瀏覽器特定的公用事業(yè)：

• $0 ， $1等：訪(fǎng)問(wèn)檢查員中選定的DOM元素的快捷方式。
• $('element') ， $$('elements') ： document.querySelector()和document.querySelectorAll() 。
• $x('xpath') ：xpath表達(dá)式評(píng)估器。
• clear() ：無(wú)消息清除控制臺(tái)。
• getEventListeners(object) ：列出附加到DOM元素（僅Chrome）的事件偵聽(tīng)器。

該綜合指南為利用瀏覽器控制臺(tái)命令提供有效調(diào)試和開(kāi)發(fā)奠定了堅(jiān)實(shí)的基礎(chǔ)。進(jìn)一步的探索將揭示其他特定於瀏覽器的功能。

以上是控制臺(tái)命令指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！