console常用命令總結筆記

AnneBai發表於2019-04-19
筆記

不同瀏覽器的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;')
複製程式碼

console常用命令總結筆記
在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"); // 斷言失敗，列印資訊
複製程式碼

console常用命令總結筆記

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);
複製程式碼

console常用命令總結筆記

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

// 列印
console.dir(testDiv) // 輸出js物件
console.dirxml(testDiv) // 輸出HTML表示
複製程式碼

console常用命令總結筆記

console常用命令總結筆記

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();
複製程式碼

console常用命令總結筆記
chrome也支援console.groupCollapse(), 會輸出摺疊的分組,可以展開檢視內部內容; 如果有的瀏覽器不支援該命令就和console.group()效果相同.

12. 輸入二維陣列，可以輸出表格檢視：

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

console常用命令總結筆記

謝謝你看到這裡，這是個人總結筆記，如有不對的地方希望及時指出。 :)

參考資料：

  1. Getting creative with the Console API!
  2. Console-MDN
    console常用命令總結筆記

相關文章