昨天我了解到Chrome調試工具一個小巧的調試方法,在WDCC期間, Marcus Ross(@zahlenhelfer) 介紹了,chrome調試工具各種調試方法,這個只是其中一種,現在我來給大家秀下。
想像下你建構如下數組
var languages = [ { name: "JavaScript", fileExtension: ".js" }, { name: "TypeScript", fileExtension: ".ts" }, { name: "CoffeeScript", fileExtension: ".coffee" } ];console.log(languages);
console.log() 會這樣展示數組
#這樣的展示形式對於開發很有用,但是我發現這樣還要手動去點每個Object有些笨重。這時候我覺得console.table()有點意思。
現在我們用console.table()試試看:
非常小巧有木有?
當然,console.table()比較適合,扁平列成表格式的數據,展現的更完美,否組你在如果每個數組元素都是不同結構,你的表格很多格子都是undefined。
console.table()另一個特性就是展示 object。
var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" } }; console.table(languages);
妥妥的。
如果你想限制console.table()顯示某一列, 你可以在參數中傳入關鍵字清單如下:
// Multiple property keys console.table(languages, ["name", "paradigm"]);
如果你想訪問一個屬性的話,一個參數就夠了,
// A single property key console.table(languages, "name");
我曾經以為我已經了解了Chrome 開發者工具絕大部分的功能,但是現在顯然我錯了, 騷年沒事去看看Chrome DevTools文件吧!
相關學習推薦:javascript影片教學
以上是javascript調試之console.table()的詳細內容。更多資訊請關注PHP中文網其他相關文章!