建站
咨詢
售后
建站咨詢
新聞中心
如果你以前開發(fā)過web應(yīng)用程序，那么一定熟悉console.log(...)，這是一種將數(shù)據(jù)打印到開發(fā)者控制臺的方法：可用于調(diào)試、日志記錄和測試。
金湖網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),金湖網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為金湖近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個(gè)售后服務(wù)好的金湖做網(wǎng)站的公司定做！
運(yùn)行console.log(console)，還可以查看console對象的更多功能。
這篇文章簡要概述了可用于提升日志記錄體驗(yàn)的10大技巧。
一起來看看吧。
打印表格
console.table()方法將對象/數(shù)組打印為格式整齊的表格。
console.table({
'Time Stamp': new Date().getTime(),
'OS': navigator['platform'],
'Browser': navigator['appCodeName'],
'Language': navigator['language'],
});分組
使用console.group()可將相關(guān)的控制臺語句與可折疊章節(jié)組合在一起。
你可以選擇通過傳遞字符串作為參數(shù)來為章節(jié)指定標(biāo)題?？梢栽诳刂婆_中折疊和展開章節(jié)，但默認(rèn)情況下也可以使用groupCollapsed取代group來折疊章節(jié)。你還可以在章節(jié)內(nèi)嵌套子章節(jié)，但務(wù)必記住使用groupEnd關(guān)閉每個(gè)組。
以下示例將輸出一個(gè)打開的包含一些信息的章節(jié)。
console.group('URL Info');
console.log('Protocol', window.location.protocol);
console.log('Host', window.origin);
console.log('Path', window.location.pathname);
console.groupCollapsed('Meta Info');
console.log('Date Fetched', new Date().getTime());
console.log('OS', navigator['platform']);
console.log('Browser', navigator['appCodeName']);
console.log('Language', navigator['language']);
console.groupEnd();
console.groupEnd();帶樣式的日志輸出
可以使用一些基本的CSS來設(shè)置日志輸出的樣式，例如顏色、字體、文本樣式和大小。
例如，嘗試運(yùn)行以下命令：
console.log(
'%cHello World!',
'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);
得到輸出如下：
很酷吧？但是還可以做更多事情！
比如說改變字體，樣式，背景顏色，添加陰影和曲線......
時(shí)間
另一種常見的調(diào)試技術(shù)是計(jì)算程序執(zhí)行時(shí)間，以跟蹤操作所需的時(shí)間。這可以通過使用console.time()啟動(dòng)計(jì)時(shí)器并傳入標(biāo)簽，然后通過相同的標(biāo)簽使用console.timeEnd()結(jié)束計(jì)時(shí)器來實(shí)現(xiàn)。甚至還可以使用console.timeLog()在長時(shí)間運(yùn)行的操作中添加標(biāo)記。
console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
output += i;
}
console.timeEnd("concatenation");concatenation: 1206ms - timer ended
還有一個(gè)非標(biāo)準(zhǔn)方法——console.timeStamp()，在性能選項(xiàng)卡中添加標(biāo)記，因此可以將代碼中的點(diǎn)與時(shí)間軸中記錄的其他事件（如繪制和布局事件）相關(guān)聯(lián)。
斷言
如果你只想在發(fā)生錯(cuò)誤或特定條件為真/假時(shí)登錄到控制臺，那么可以使用console.assert()來完成，除非第一個(gè)參數(shù)為false，否則不會(huì)將任何內(nèi)容記錄到控制臺。
第一個(gè)參數(shù)是要檢查的布爾條件，后跟0或要打印的多個(gè)數(shù)據(jù)點(diǎn)，最后一個(gè)參數(shù)是要輸出的消息。例如console.assert(false, 'Value was false')將輸出消息，因?yàn)榈谝粋€(gè)參數(shù)是false。
const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
console.log(`the # is ${num}`);
console.assert(num % 2 === 0, { num }, errorMsg);
}
計(jì)數(shù)
還在手動(dòng)遞增數(shù)字進(jìn)行日志記錄嗎？console.count()可幫助用于跟蹤某些內(nèi)容的執(zhí)行次數(shù)，或代碼塊的輸入頻率。
你可以選擇為計(jì)數(shù)器指定一個(gè)標(biāo)簽，以便管理多個(gè)計(jì)數(shù)器并使輸出更清晰。
計(jì)數(shù)器將始終從1開始。你可以隨時(shí)使用console.countReset()重置計(jì)數(shù)器，該函數(shù)也接受可選的標(biāo)簽參數(shù)。
以下代碼最終值將為8。
const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
console.count();
});
下面是標(biāo)記計(jì)數(shù)器的示例輸出。
如果使用值，則不會(huì)傳入標(biāo)簽，而是為每個(gè)條件值提供一個(gè)單獨(dú)的計(jì)數(shù)器。例如：
console.count(NaN); // NaN: 1
console.count(NaN+3); // NaN: 2
console.count(1/0); // Infinity: 1
console.count(String(1/0)); // Infinity: 2
堆棧跟蹤
在JavaScript中，我們經(jīng)常會(huì)用到深度嵌套的方法和對象。你可以使用console.trace()遍歷堆棧跟蹤，并輸出調(diào)用了哪些方法。
還可以選擇將數(shù)據(jù)與堆棧跟蹤一起輸出。
dir
如果將大型對象記錄到控制臺，則可能會(huì)變得難以讀取。幸而我們可以通過console.dir()方法以可擴(kuò)展的樹結(jié)構(gòu)進(jìn)行格式化。
以下是目錄樣式控制臺輸出的示例：
你還可以使用console.dirxml()以類似的方式打印基于XML或HTML的樹。
調(diào)試
你可能在應(yīng)用中設(shè)置了一些日志記錄，且在開發(fā)過程中依賴這些日志記錄，但不希望用戶看到。用console.debug()替換日志語句就可以做到這一點(diǎn)，它的功能與console.log完全相同，但可以被大多數(shù)構(gòu)建系統(tǒng)所刪除，或者在生產(chǎn)模式下運(yùn)行時(shí)被禁用。
日志級別
注意到瀏覽器控制臺中有若干過濾器（信息、警告和錯(cuò)誤）了嗎？它們允許你更改記錄數(shù)據(jù)的詳細(xì)程度。要使用這些過濾器，只需切換日志語句即可：
console.info() - 用于記錄通知消息，通常包括一個(gè)小的“i”和或藍(lán)色背景
console.warn() - 用于記錄警告或非嚴(yán)重錯(cuò)誤信息，通常包括三角感嘆號和或黃色背景
console.error() - 用于記錄可能影響功能的錯(cuò)誤信息，通常包括圓形感嘆號和或紅色背景
在生產(chǎn)環(huán)境中運(yùn)行時(shí)，Node.js中不同的日志級別會(huì)寫入不同的流，例如error()會(huì)寫入stderr，而日志輸出會(huì)寫入stdout，但在開發(fā)中它們都會(huì)如常出現(xiàn)在控制臺中。
多值日志
console對象上的大多數(shù)函數(shù)接受多個(gè)參數(shù)，因此你可以添加標(biāo)簽到輸出，或一次打印多個(gè)數(shù)據(jù)點(diǎn)，例如：console.log('User: ', user.name);
但是，打印多個(gè)標(biāo)記值的更簡單方法是使用對象解構(gòu)。例如，如果有三個(gè)變量（x、y和z），那么可以將它們記錄為一個(gè)用大括號括起來的對象，這樣就能輸出每個(gè)變量的名稱和值——如console.log( { x, y, z } );
日志字符串格式
如果需要輸出格式化的字符串，可以使用C語言樣式的printf格式修飾符來實(shí)現(xiàn)。
支持的格式修飾符有：
- %s - 字符串或轉(zhuǎn)換為字符串的任何其他類型
- %d / %i - 整數(shù)
- %f - 浮點(diǎn)數(shù)
- %o - 使用最佳格式
- %O - 使用默認(rèn)格式
- %c - 使用自定義格式
例如
console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!當(dāng)然，你也可以使用模板文字來實(shí)現(xiàn)相同的目的，如果是較短的字符串，可能更容易閱讀。
清除
最后，當(dāng)查找事件的輸出時(shí)，你可能希望刪除頁面首次加載時(shí)記錄到控制臺的所有內(nèi)容。這可以通過console.clear()來完成，它將清除所有內(nèi)容，不會(huì)重置任何數(shù)據(jù)。
通常還可以通過單擊Bin圖標(biāo)來清除控制臺，以及使用篩選器文本輸入進(jìn)行搜索。
特殊瀏覽器方法
直接在瀏覽器控制臺中運(yùn)行代碼時(shí)，還可以訪問速記方法，這些方法對于調(diào)試、自動(dòng)化和測試非常有用。
其中最有用的是：
- $() - Document.querySelector()的簡寫（選擇DOM元素，jQuery-style！）
- $$() - 與上面相同，但selectAll用于在數(shù)組中返回多個(gè)元素時(shí)使用
- $_ - 返回上次計(jì)算表達(dá)式的值
- $0 - 返回最近選擇的DOM元素（在檢查器中）
- $1...$4 - 也可用于抓取以前選擇的UI元素
- $x() - 允許你使用Xpath查詢選擇DOM元素
- keys()和values() - Object.getKeys()的簡寫，將返回包含obj鍵或值的數(shù)組
- copy() - 將內(nèi)容復(fù)制到剪貼板
- monitorEvents() - 每次觸發(fā)給定事件時(shí)運(yùn)行命令
- 對于某些常見的控制臺命令（如console.table()），你不需要鍵入前面的console，只需運(yùn)行table()
警告！這些只能在開發(fā)工具控制臺中工作，在代碼中不起作用！
最后再快速介紹一些最佳實(shí)踐...
- 定義lint規(guī)則，以防止任何console.log語句合并到主分支中
- 編寫包裝函數(shù)來處理日志記錄，這樣你就可以根據(jù)環(huán)境啟用/禁用調(diào)試日志，也可以使用適當(dāng)?shù)娜罩炯墑e，以及應(yīng)用任何格式。這也可集成到第三方日志記錄服務(wù)，只需在一個(gè)位置進(jìn)行代碼更新即可
- 切勿記錄任何敏感信息，任何已安裝的擴(kuò)展程序都可以捕獲瀏覽器日志，因此并不安全
- 始終使用正確的日志級別（如info、warn、error）來簡化篩選和禁用
- 遵循一致的格式，以便在需要時(shí)可以由計(jì)算機(jī)解析日志
- 日志消息應(yīng)簡短、有意義
- 在日志中包含上下文或類別
- 不要過度使用，只記錄有用的信息
網(wǎng)站題目：原來 Console 還可以這么玩
當(dāng)前路徑：http://www.dlmjj.cn/article/coidhgh.html
