瀏覽器控制檯命令調試——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相關的其它經常使用命令，也歡迎你們來補充哦。