Chrome Console命令

顯示信息

---

console.log('log');            //最經常使用
console.info('info');
console.error('error');
console.warn('warn');

效果:

佔位符

---

console上述的集中度支持printf的佔位符格式，支持的佔位符有:字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）

console.log("%d年%d月%d日",2016,6,1);

效果:

信息分組

---

console.group("第一組信息");
console.log("第一組第一條:個人主頁(http://h5demo.xyz)");
console.log("第一組第二條:個人博客(http://blog.h5demo.xyz)");
console.groupEnd();
console.group("第二組信息");
console.log("第二組第一條:Leo Angel");
console.log("第二組第二條:前端工做者");
console.groupEnd();

效果:

查看對象的信息

---

console.dir()能夠顯示一個對象全部的屬性和方法

var info = {
       index: "http://h5demo.xyz",
    blog: "http://blog.h5demo.xyz",
    info: "前端愛好者歡迎你的加入"
};
console.dir(info);

效果:

顯示某個節點的內容

---

console.dirxml()用來顯示網頁的某個節點所包含的html/xml代碼

var info = document.getElementById("info");
console.dirxml(info)

效果:

判斷變量是不是真

---

console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否，則在控制檯輸出一條相應信息，而且拋出一個異常

var result = 1;
console.assert(result);
var year = 2016;
console.assert(year == 2018);

1是非0值，是真；而第二個判斷是假，在控制檯顯示錯誤信息
效果:

追蹤函數的調用軌跡

---

console.trace()用來追蹤函數的調用軌跡

function add(a, b) {
    console.trace();
    return a + b;
}
var x = add3(1, 1);
function add3(a, b) {
    return add2(a, b);
}
function add2(a, b) {
    return add1(a, b);
}
function add1(a, b) {
    return add(a, b);
}

效果:

計時功能

---

console.time()和console.timeEnd()，用來顯示代碼的運行時間

console.time("計時器一");
for (var i = 0; i < 1000; i++) {
    for (var j = 0; j < 1000; j++) {}
}
console.timeEnd("計時器一");

運行時間是8.745ms
效果:

console.profile()的性能分析

---

性能分析就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()

function All() {
    alert(11);
    for (var i = 0; i < 10; i++) {
        funcA(1000);
    }
    funcB(10000);
}
function funcA(count) {
    for (var i = 0; i < count; i++) {}
}
function funcB(count) {
    for (var i = 0; i < count; i++) {}
}
console.profile('性能分析器');
All();
console.profileEnd();

效果:

CSS樣式

---

具體來講，是能夠對輸出到console控制檯的文字進行CSS控制。
格式以下：

console.log("%c須要輸出的信息 ", "css 代碼");

3D 文字

漸變背景

彩虹文字