瀏覽器控制台命令調試——console

控制台命令調試時通過瀏覽器開發工具中的控制台命令嵌入到JavaScript中，輸出特定的信息或日志，從而達到調試的目的。

我們常用的Chrome和FireFox，都可以通過F12來打開開發工具。

下面簡要介紹幾個常用的控制台命令：

（1）常規信息輸出

console.log()是我們最常用的命令，只需要將我們希望輸出的內容傳進入即可：

console.log("這是我要輸出的信息");

除了console.log()命令外，我們還有其它三種命令：

console.info("這是我要輸出的信息");

console.error("錯誤信息");

 

console.warn("警告信息");

從這四種命令的名稱就可以看出來它們的作用，它們是用來展示不同類型信息，使得我們的信息輸出更加規范（個人觀點）。

（2）常規信息分組輸出

大量的信息輸出，我們可以使用分組輸出來對它們進行分組，方便我們查看：

console.group("第一組開始");
console.log("第一組第一條");
console.log("第一組第二條");
console.groupEnd();

console.group("第二組開始");
console.log("第二組第一條");
console.log("第二組第二條");
console.groupEnd();

console.group()命令用於分組的開始，console.groupEnd()用來結束分組。

（3）對象輸出

console.dir()是專門輸出對象所有方法和屬性的，我們就可以不用自己遍歷就查看對象的信息：

var obj = {
    name: "haha",
    desc: "doubi"
};
console.dir(obj);

（4）DOM輸出

console.dirxml()命令是專門輸出某個節點（node）所包含的html/xml代碼：

var div = document.getElementById("demo");
console.dirxml(div);

由於內容過多，圖片並沒有截全。

（5）函數調用軌跡監測

var x = test3(1);

function test(a) {
    console.trace();
    return a;
}

function test1(a) {
    return test(a);
}

function test2(a) {
    return test1(a);
}

function test3(a) {
    return test2(a);
}

（6）計時功能

有時我們需要監測一段代碼花費的時間，我們通常可以這樣做：

var time1 = new Date();
for (var i = 0; i < 100; i++) {

}
var time2 = new Date();
console.log(time2 - time1);

我們還可以通過console.time()和console.timeEnd()幫助我們完成這件事：

console.time("計時器");
for (var i = 0; i < 100; i++) {

}
console.timeEnd("計時器");

需要注意的是，這兩個命令里面的參數要一致，才會輸出計時信息。

好了，在下了解的console常用命令就這些啦，如果有遺漏的console相關的其它常用命令，也歡迎大家來補充哦。