? ? Console?對象提供了瀏覽器控制臺調(diào)試的接口（如：Firefox 的?Web Console）。在不同瀏覽器上它的工作方式可能不一樣，但通常都會提供一套共性的功能。

? ? Console?對象可以從任何全局對象中訪問到，如 瀏覽器作用域上的?Window，以及通過屬性控制臺作為 workers 中的特定變體的?WorkerGlobalScope?？梢酝ㄟ^?Window.console?引用，也可以簡單的通過?console?引用。例：

console.log("Failed to open the specified link")

? ?? ? 本頁面記錄了?Console?對象上的方法并給出了幾個?Usage?（用例）。

? ? ? ?PS：?此特性在?Web Worker?中可用

? ? ? ?PS：?實際的?console?接口被定義為全小寫的形式（比如不是這種形式?Console?），這是歷史原因?qū)е碌摹?/p>

方法

Console.assert()

如果第一個參數(shù)為?false?，則將消息和堆棧跟蹤記錄到控制臺。

Console.clear()

清空控制臺，并輸出?Console was cleared。

Console.count()

以參數(shù)為標(biāo)識記錄調(diào)用的次數(shù)，調(diào)用時在控制臺打印標(biāo)識以及調(diào)用次數(shù)。

Console.countReset()

重置指定標(biāo)簽的計數(shù)器值。

Console.debug()

在控制臺打印一條?"debug"?級別的消息。

Console.dir()

顯示一個由特定的 Javascript 對象列表組成的可交互列表。這個列表可以使用三角形隱藏和顯示來審查子對象的內(nèi)容。.

Console.dirxml()

打印 XML/HTML 元素表示的指定對象，否則顯示 JavaScript 對象視圖。

Console.error()

打印一條錯誤信息，使用方法可以參考?string substitution。

Console.exception()?非標(biāo)準(zhǔn)?已棄用

error()?方法的別稱。

Console.group()

創(chuàng)建一個新的內(nèi)聯(lián)?group, 后續(xù)所有打印內(nèi)容將會以子層級的形式展示。調(diào)用?groupEnd()來閉合組。

Console.groupCollapsed()

創(chuàng)建一個新的內(nèi)聯(lián)?group。使用方法和?group()?相同，不同的是，groupCollapsed()?方法打印出來的內(nèi)容默認(rèn)是折疊的。調(diào)用groupEnd()來閉合組。

Console.groupEnd()

閉合當(dāng)前內(nèi)聯(lián)?group。

Console.info()

打印資訊類說明信息，使用方法可以參考?string substitution。

Console.log()

打印內(nèi)容的通用方法，使用方法可以參考?string substitution。

Console.profile()?非標(biāo)準(zhǔn)

Starts the browser's built-in profiler (for example, the?Firefox performance tool). You can specify an optional name for the profile.

Console.profileEnd()?非標(biāo)準(zhǔn)

Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the?Firefox performance tool).

Console.table()

將列表型的數(shù)據(jù)打印成表格。

Console.time()

啟動一個以入?yún)⒆鳛樘囟Q的計時器，在顯示頁面中可同時運行的計時器上限為 10,000.

Console.timeEnd()

結(jié)束特定的?計時器?并以毫秒打印其從開始到結(jié)束所用的時間。

Console.timeLog()

打印特定?計時器?所運行的時間。

Console.timeStamp()?非標(biāo)準(zhǔn)

添加一個標(biāo)記到瀏覽器的?Timeline?或?Waterfall?工具。

Console.trace()

輸出一個?stack trace。

Console.warn()

打印一個警告信息，可以使用?string substitution?和額外的參數(shù)。

示例

輸出文本到控制臺

console 對象中較多使用的主要有四個方法?console.log(),?console.info(),?console.warn(), 和console.error()。每一個結(jié)果在日志中都有不同的樣式，可以使用瀏覽器控制臺的日志篩選功能篩選出感興趣的日志信息。

有兩種途徑使用這些方法，可以簡單的傳入一組對象，其中的字符串對象會被連接到一起，輸出到控制臺?；蛘呖梢詡魅氚銈€或多個的替換的字符串，后面跟著被替換的對象列表。

打印單個對象

The simplest way to use the logging methods is to output a single object:

var someObject = { str: "Some text", id: 5 };
console.log(someObject);

Copy to Clipboard

打印結(jié)果類似下面：

[09:27:13.475] ({str:"Some text", id:5})

打印多個對象

可以打印多個對象，就像下面一樣：

var car = "Dodge Charger";
var someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

Copy to Clipboard

打印結(jié)果類似下面：

[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})

使用字符串替換

可以在傳遞給 console 的方法的時候使用下面的字符以期進(jìn)行參數(shù)的替換。

備注：?Chrome 不支持精確格式化。

當(dāng)要替換的參數(shù)類型和預(yù)期的打印類型不同時，參數(shù)會被轉(zhuǎn)換成預(yù)期的打印類型。

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}

輸出樣例如下所示：

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

為控制臺定義樣式

可以使用?%c?為打印內(nèi)容定義樣式：

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

Copy to Clipboard

指令前的文本不會受到影響，但指令后的文本將會使用參數(shù)中聲明的 CSS 樣式。

%c?語法可用的屬性如下 (至少在 Firefox 中是這樣，別的瀏覽器會有諸多不同）：

• background?與其全寫版本。
• border?與其全寫版本。
• border-radius
• box-decoration-break
• box-shadow
• clear?和?float
• color
• cursor
• display
• font?與其全寫版本。
• line-height
• margin
• outline?與其全寫版本。
• padding
• text-transform?這類?text-*?屬性
• white-space
• word-spacing?和?word-break
• writing-mode

PS：控制臺信息的默認(rèn)行為與行內(nèi)元素相似。為了應(yīng)用?padding、margin?這類效果，你應(yīng)當(dāng)這樣設(shè)置display: inline-block。

在 console 中使用編組

可以使用嵌套組來把視覺上相關(guān)的元素合并，以協(xié)助組織你的輸出。使用console.group()創(chuàng)建新的嵌套塊，或者用console.groupCollapsed()?創(chuàng)建默認(rèn)折疊的塊，這種塊需要點擊閉合按鈕來展開才能讀到。

直接調(diào)用?console.groupEnd().就可以退出當(dāng)前組。比如下面的代碼：

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

Copy to Clipboard

執(zhí)行結(jié)果：

定時器

你可以使用定時器來計算一段特定操作的周期。使用?console.time()?方法以創(chuàng)建一個計時器，其唯一的參數(shù)表示了計時器的名字。使用?console.timeEnd()?方法以關(guān)閉計時器，并獲取經(jīng)過的毫秒數(shù)，其同樣以計時器的名字作為參數(shù)。一個頁面最多同時只能有 10,000 個計數(shù)器運行。

示例：:

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

Copy to Clipboard

這段代碼將會打印需要用戶關(guān)閉 alert box 的時間，打印時間到控制臺上，等用戶關(guān)閉第二個 alert 后，把結(jié)束時間打印到控制臺。

注意無論在開始還是結(jié)束的時候都會打印計時器的名字。

備注：?如果使用計時器來記錄網(wǎng)絡(luò)時間請求的話下面的內(nèi)容很重要。計時器將會報告?zhèn)鬏斶^程的整個時間，而網(wǎng)絡(luò)面板里顯示的時間只計算了請求頭部所需要的時間。如果啟用了響應(yīng)體日志記錄，那么列出的響應(yīng)頭部和響應(yīng)體組合的時間應(yīng)該與在控制臺輸出中看到的時間相符。

堆棧跟蹤

控制臺也支持輸出堆棧，其將會顯示到調(diào)用?console.trace()?的點的調(diào)用路徑。如下所示：

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

Copy to Clipboard

控制臺的輸出：

文章來源地址http://www.zghlxwxcb.cn/news/detail-742051.html

注意

• 在 Firefox 瀏覽器中，如果頁面中自己定義了?console?對象，那么它會覆蓋掉瀏覽器內(nèi)置的?console對象，在其他瀏覽器可能也是。

到了這里，關(guān)于前端常識-console控制臺打印調(diào)試的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！