js調試命令，不止於console.log()
通常情況下，我們在調試js程式的時候一般都使用console.log()來進行程式的調試，列印自己所需要的內容什麼的。
那麼js的調試命令可不止一個console.log()
分類輸出
console.log('文字資訊');
console.info('提示資訊');
console.warn('警告資訊');
console.error('錯誤資訊');
分組輸出
我們還可以使用Console.group()和Console.groupEnd()進行包裹，分組
console.group('第一個組');
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
分組還可以進行嵌套
console.group('1');
console.group("1-1");
console.group("1-1-1");
console.log('text');
console.groupEnd();
console.groupEnd();
console.group("1-2");
console.log('text');
console.log('text');
console.log('text');
console.groupEnd();
console.groupEnd();
輸出表格
使用console.table()可以將傳入的對象，或數組以表格形式輸出。適合排列整齊的元素
var Obj = {
Obj1: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj2: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj3: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj4: {
a: "aaa",
b: "bbb",
c: "ccc"
}
}
console.table(Obj);
var Arr = [
["aa","bb","cc"],
["dd","ee","ff"],
["gg","hh","ii"],
]
console.table(Arr);
條件輸出
可以使用console.assert()進行條件輸出
- 當第一個參數或返回值為真時，不輸出內容
- 當第一個參數或返回值為假時，輸出後面的內容並拋出異常
console.assert(true, "你永遠看不見我");
console.assert(false, "你可以看見我");
如下圖：
格式化輸出
| 佔位符 | 含義 |
|---|---|
| %s | 字元串輸出 |
| %d or %i | 整數輸出 |
| %f | 浮點數輸出 |
| %o | 列印javascript對象，可以是整數、字元串以及JSON數據 |
var arr = ["馬化騰", "馬雲"];
console.log("%s：騰訊！%s：阿里巴巴", arr[0], arr[1]);
console.log("圓周率整數部分：%d，帶上小數是：%f", 3.1415, 3.1415);
自定義樣式
使用%c為列印內容定義樣式,再輸出資訊前加上%c，後面寫上標準的css樣式，就可以為輸出的資訊添加樣式了
又時候會覺得，log光是純文本比較丑，這時候我們可以考慮美化一下，如：
這時候我們的程式碼就可以這樣寫
console.log(
"%c 版本%c1.0%c",
"background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;",
"background:red; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;",
"background:transparent"
);
這裡也就跟大家講一些，常用的東西！
