js console一些常用的功能

盡是妖發表於2020-05-15
JS

前言

很多時候我們在除錯的時候經常用console.log，我感覺其實一個就夠了，但是有時候你不可能寫一步就去除錯下，所以呢，經常用幾個console.log，有時候挺難找的，後面翻了翻console的這個知識的，發下還有很多可以用的，總結分享一下。

正文

和console.log的兄弟(同等級):

<script>
    console.log("log","log提示");
    console.info("info","info提示");
    console.warn("warn","warn提示");
    function error() {
        console.error("error", "error提示");
        alert("123");
    }
    error();
</script>

經過console並不會影響程式碼的允許過程，會彈出"123";

結果:

可以看到，他們的區別就是顏色的不同。給我們看到的資訊也是不同的。

隨著js的模組化，那麼我們能否根據某個不同的模組去劃分不同的log區域?如果可以區分不同模組的log，那麼我們定位問題debug的能力也會提高。

console.group("功能a塊");
console.log("功能a產生的資料");
console.groupEnd();
console.group("功能b塊");
console.log("功能b產生的資料");
console.groupEnd();

還有一個就是groupCollapsed

console.groupCollapsed("功能a塊");
console.log("功能a產生的資料");
console.groupEnd();
console.groupCollapsed("功能b塊");
console.log("功能b產生的資料");
console.groupEnd();
console.group("功能a塊");
console.log("功能a產生的資料");
console.groupEnd();
console.group("功能b塊");
console.log("功能b產生的資料");
console.groupEnd();

其實一個是閉合的一個是展開的。

同樣有時候我們檢視一些list的時候，如果資料太多，我們看起來是有點費勁的，那麼如果你使用console.table將會清晰一些:

var jsonarr=[{"name":"張三","age":"21"}];
console.table(jsonarr);
var arr=[
        ["aa","bb","cc"]
];
console.table(arr);

這個主要是為了看的方便，但是用完了關閉log功能，效能真的差。

接下來看一下:console.dir() console.dirxml()吧。

console.dir()來看一下吧:

console.log(document.location);
console.dir(document.location);

來看下有啥區別:

console.dirxml():

console.log(document.getElementById('test'));
console.dir(document.getElementById('test'));

console.assert()這個是按條件輸出的。

var numarr=[1,2,3,4,5,6,7,8,9];
console.assert((function () {
    if(numarr.length<100)
    {
        return false;
    }
    else
    {
        return true;
    };
})(),"陣列長度不大於100")

console.count("第幾次執行：");

後面自動會補充數字:

console.group()
console.count("第幾次執行：");
console.count("第幾次執行：");
console.count("第幾次執行：");
console.groupEnd()
console.group()
console.count("第幾次執行：");
console.count("第幾次執行：");
console.count("第幾次執行：");
console.groupEnd()

有點侷限性，就是他是全域性的，而不分組。


但是呢，我們可以重置:
console.countReset();

let user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();

結果為:

"default: 1"
"default: 2"
"default: 3"
"default: 4"
"default: 0"

console.trace();在這之前呼叫了啥，一個執行過程。

function  action()
{
console.trace("執行過程");
}
function actionparent()
{
  action();
}
actionparent();

console.time()和console.timeEnd();這個比較重要了，我們測試效能的必備。

console.time()
for (var i = 0; i < 1000; i++) {

}
console.timeEnd();

還有一個除錯非常需要用到的:console.clear() 清除前面的log,方便我們區域性測試。

console.log(1);
console.clear();
console.log(2);

相關文章