摘要：調(diào)試各種姿勢(shì)指南作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)?，F(xiàn)在你看到的是這系列指南的第篇。完整中文版指南及視頻教程在從零到壹全棧部落。項(xiàng)目效果各種調(diào)試正確姿勢(shì)的更多用法這個(gè)是最常用的，但它還有一些更多功能比如參數(shù)支持類(lèi)似語(yǔ)言的字符串替換模式。

作者：?liyuechun  
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫(xiě)東西，不借助框架和庫(kù)，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 9 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

這個(gè)是最常用的，但它還有一些更多功能：比如參數(shù)支持類(lèi)似 C 語(yǔ)言的字符串替換模式。

%s 字符串

%d 整數(shù)

%f 浮點(diǎn)值

%o Object

%c 設(shè)定輸出的樣式，在之后的文字將按照第二個(gè)參數(shù)里的值進(jìn)行顯示

console.log("I am a String: %s ", "log"); //log
console.log("I am a int number: %d ", 1); //1
console.log("I am a float number: %d ", 1.23); //1.23
let dog = {name: "Lucky",age: "5"};
console.log("%o",dog);
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

要清空已經(jīng)打印輸出的內(nèi)容，有兩種方式，一種是 JavaScript 語(yǔ)句： console.clear()。另一個(gè)是快捷鍵 Ctrl ＋ L。

除了常規(guī)的 log 之外，還有一些其他已設(shè)定好的樣式，區(qū)別在于圖標(biāo)或者顏色不一樣：

// warning!
console.warn("用于輸出警示信息");
// Error :|
console.error("用于輸出錯(cuò)誤信息");
// Info
console.info("用于輸出提示性信息");
//debug
console.debug("用于輸出調(diào)試信息");

獲取 DOM 元素之后，可以直接打印輸出。

const p = document.querySelector("p");
console.log(p);
console.dir(p);

.log 輸出這個(gè) DOM 的 HTML 標(biāo)簽。

.dir 則會(huì)輸出這個(gè) DOM 元素的屬性列表。

console.asset(arg1,arg2)方法接受一個(gè)表達(dá)式作為參數(shù)，如果參數(shù)返回值是false，則會(huì)輸出第二個(gè)參數(shù)中的內(nèi)容。

const p = document.querySelector("p");
console.assert(p.classList.contains("ouch"), "That is wrong!");

console.table()方法，可以將數(shù)組、對(duì)象以表格的形式打印輸出，如果只輸出其中的某一列，可以加上第二個(gè)參數(shù)，如下所示：

console.table(dogs);
console.table(dogs, ["age"]);

const dogs = [{ name: "Snickers", age: 2 }, { name: "hugo", age: 8 }];
dogs.forEach(dog => {
    console.group(`${dog.name}`);        
//  console.groupCollapsed(`${dog.name}`);  // 列表默認(rèn)疊起狀態(tài)
    console.log(`${dog.name}`);
    console.log(`${dog.age}`);
    console.log(`${dog.name} 有 ${dog.age} 歲了`);
    console.groupEnd();
});

group()方法中可以傳入這個(gè)分組的名稱(chēng)。group()/groupCollapsed() 與 groupEnd() 之間的內(nèi)容會(huì)自動(dòng)分組，區(qū)別在于是否能自動(dòng)折疊。

通過(guò)console.count()可以對(duì)輸出的對(duì)象進(jìn)行計(jì)數(shù)。但需要注意的是這里的計(jì)數(shù)對(duì)象僅限于由 count() 輸出的內(nèi)容，并非所有 console 中的輸出。

用 time("name") 和 timeEnd("name") 分別控制開(kāi)始點(diǎn)和結(jié)束點(diǎn)，它們兩的參數(shù)表示當(dāng)前計(jì)時(shí)的名稱(chēng)，可以自定義但需要保持相同。所以如果想看異步獲取數(shù)據(jù)花了多場(chǎng)時(shí)間，可以這樣寫(xiě)：

console.time("fetch my data");
fetch("https://api.github.com/users/soyaine")
  .then(data => data.json())
  .then(data => {
  console.timeEnd("fetch my data");
  console.log(data);
});

如果 timeEnd 中的名稱(chēng)如果和上面不一樣，得到的數(shù)據(jù)是系統(tǒng)當(dāng)前時(shí)間換算后的毫秒值。

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽(yù)：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號(hào)：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書(shū)學(xué)習(xí)筆記