console經常使用命令總結筆記

不一樣瀏覽器的console實現可能有一些差別，但一些主要方法基本相同。如下主要以Chrome爲例進行總結：

tips:

• 能夠直接打開console運行示例查看效果。

1. 快捷鍵：

ctrl+shift+I 或 F12;

2. 打印基本信息：

console.log()和console.info(),其中的參數能夠爲多個，將會以空格間隔進行打印；

3. 格式化打印：

格式說明符以%開頭，後面添加：

• s 字符串
• d or i 整數
• f 浮點值
• o DOM元素以HTML/XML形式輸出，JS對象以可展開的對象字面量形式輸出(相似console.dirxml的處理)
• O DOM元素或JS對象以可展開的Object形式輸出(相似console.dir的處理)
• c 使用提供的CSS樣式格式化輸出

console.log('this object is %o which should have a name property.',
{name: "Anne", color: "white"})

console.log('this object is %O which should have a name property.',
{name: "Anne", color: "white"})

console.log('%cThis is the %cbest time',
'color:#a25354; font-size:20px;',
'color:#4345a2; font-weight: bold; font-size:20px;')
複製代碼

在FireFox中，數值的格式化支持 %.2d表明把對應數值輸出爲兩位整數，如 1.1 --> 01；而 %.2f表明把對應數值輸出爲兩位精度的小數，如 1.1 --> 1.10. 這在chrome中不支持。

另外%c格式化輸出對CSS的格式支持有限，並不支持全部有效的CSS樣式；

4. 斷言-自定義錯誤消息：

console.assert()，接收2個及以上參數；第一個參數是斷言表達式，若是其解析爲true則不打印消息，若是解釋爲false說明斷言失敗，輸出第二個及以後參數中傳入的信息；

let a = 3;
console.assert(a > 2, "a is less than or equal 2") // 斷言經過，不會打印信息
console.assert(a % 2 === 0, "oops, a is odd"); // 斷言失敗，打印信息
複製代碼

5. 清除控制檯的輸出：

console.clear(), chrome中可使用快捷鍵ctrl + L;

6. 返回代碼中調用函數的次數：

console.count()

function clickHandler(){
    console.count(`click handler called`)
}     
for (var i = 0; i < 3; i++) {
    clickHandler()
}
// 每次調用輸出調用次數
Click handler called: 1
Click handler called: 2
Click handler called: 3
複製代碼

7. 打印對象

• console.dir(): 以交互式對象屬性列表的形式輸出,能夠摺疊和展開對象查看其中的屬性；

• console.dirxml(): 若是可能，會輸出元素的HTML/XML形式，不然就輸出JavaScript對象；

例如：

1. 打印Array類(也是對象)：

console.dir(Array);
console.dirxml(Array);
複製代碼

2. 打印DOM元素：

// 新建一個DOM元素
var testDiv = document.createElement("div");
testDiv.id = "test";
testDiv.innerHTML = "<p>這是一個例子</p>";

// 打印
console.dir(testDiv) // 輸出js對象
console.dirxml(testDiv) // 輸出HTML表示
複製代碼

8. 控制檯報錯/警告：

這個咱們應該常常會看到。

• console.error("error info");
• console.warn("warning info");

9. 計時器

• console.time(label)爲開始計時，console.timeEnd(label)爲結束計時; 能夠計算代碼執行所用時間，這兩個方法應傳遞相同的label參數(字符串)，表明同一個計時器；

FireFox中 console.timeLog(label) 能夠用於打印某個計時器的具體時間， chrome沒有支持。

10. 打印調用堆棧

console.trace()： 能夠獲取該調用所在的文件及代碼具體位置;

11. 分組輸出

console.group()和console.groupEnd()分別做爲分組開始和結束的標誌，能夠嵌套分組;

console.group()還能夠傳入1或多個參數，會被以空格分隔輸出字符串做爲分組的名稱。

console.group("group", 1);
console.log("this is in group 1");
console.group("group", 2);
console.log("this is in group 2");
console.groupEnd();
console.log("this is also in group 1");
console.groupEnd();
複製代碼

chrome也支持 console.groupCollapse(), 會輸出摺疊的分組,能夠展開查看內部內容; 若是有的瀏覽器不支持該命令就和 console.group()效果相同.

12. 輸入二維數組，能夠輸出表格視圖：

console.table([["a", "b", "c", "d"], [1, 2, 3, 4]])
複製代碼

謝謝你看到這裏，這是我的總結筆記，若有不對的地方但願及時指出。 :)

參考資料：

1. Getting creative with the Console API!
2. Console-MDN