js除錯命令，不止於console.log()

沉_默發表於2020-10-29
JS除錯

通常情況下，我們在除錯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"
        );

 

這裡也就跟大家講一些，常用的東西！

 

相關文章