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

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

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

%s 字符串

%d 整數(shù)

%f 浮點值

%o Object

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

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 語句： console.clear()。另一個是快捷鍵 Ctrl ＋ L。

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

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

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

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

.log 輸出這個 DOM 的 HTML 標簽。

.dir 則會輸出這個 DOM 元素的屬性列表。

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

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

console.table()方法，可以將數(shù)組、對象以表格的形式打印輸出，如果只輸出其中的某一列，可以加上第二個參數(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}`);  // 列表默認疊起狀態(tài)
    console.log(`${dog.name}`);
    console.log(`${dog.age}`);
    console.log(`${dog.name} 有 ${dog.age} 歲了`);
    console.groupEnd();
});

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

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

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

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 中的名稱如果和上面不一樣，得到的數(shù)據(jù)是系統(tǒng)當前時間換算后的毫秒值。

Github Source Code

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