你不知道的console，讓js調(diào)試更簡(jiǎn)單

adie 發(fā)布于2019-08-26 10:19 / 2034人閱讀

摘要：對(duì)于前端的各位工程師，肯定不會(huì)對(duì)陌生，但是，你又能了解多少呢，今天就讓小鵬來(lái)一窺大前世界。則沒(méi)有任何反應(yīng)分組在控制臺(tái)創(chuàng)建一個(gè)分組，直到調(diào)用之后分組結(jié)束今日事項(xiàng)吃飯睡覺(jué)打豆豆明日事項(xiàng)賞花賞月賞秋香喜歡就點(diǎn)贊收藏一下咯參考文獻(xiàn)

對(duì)于前端的各位工程師，肯定不會(huì)對(duì)console陌生，但是，你又能了解多少呢，今天就讓小鵬來(lái)一窺大前世界。

Chrome控制臺(tái)-開(kāi)發(fā)者工具

windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打開(kāi)控制臺(tái)

1. 向 Web 控制臺(tái)輸出一條消息

console.log("Hello world!");
console.info("Hello world!");
console.warn("Hello world!");
console.error("Hello world!");
console.debug("Hello world!");

2. console.dir() 顯示一個(gè)對(duì)象對(duì)所有屬性和方法

console.dir(document);

3. console.table() 將數(shù)據(jù)以表格的形式顯示

這個(gè)方法需要一個(gè)必須參數(shù)data，data必須是一個(gè)數(shù)組或者一個(gè)對(duì)象

var names = [
    {
        name: "小明",
        age: 20,
        gender: "男"
    },
    {
        name: "小紅",
        age: 18,
        gender: "女"
    },
    {
        name: "小李",
        age: 22,
        gender: "男"
    }
]

console.table(names)

4. 計(jì)算操作占用的時(shí)常

注意：每一個(gè)定時(shí)器必須擁有唯一的名字

console.time("本次代碼運(yùn)行時(shí)間");
let count = 0;
for (let i=0; i<100; i++) {
    count++;
}
console.timeEnd("本次代碼運(yùn)行時(shí)間");

5. 輸出被調(diào)用的次數(shù)

console.count() 此函數(shù)接受一個(gè)可選參數(shù) label

let user = "";
function greate () {
    console.count(user);
    return "hi" + user;
}

user = "Bob";
// 此時(shí)的lable是Bob
greate();

user = "John";
// 此時(shí)的lable是John
greate();
greate();
console.count("John");

6. 判斷斷言是否為真

console.assert() 如果斷言為false，則將一個(gè)錯(cuò)誤消息寫入控制臺(tái)，如果斷言為true。則沒(méi)有任何反應(yīng)

console.assert(1==1, "Success");
console.assert(1==2, "Error");

7. 分組

console.group()在控制臺(tái)創(chuàng)建一個(gè)分組，直到調(diào)用console.groupEnd()之后分組結(jié)束

console.group("今日事項(xiàng)");
    console.log("吃飯");
    console.log("睡覺(jué)");
    console.log("打豆豆");
console.groupEnd();

console.group("明日事項(xiàng)");
    console.log("賞花");
    console.log("賞月");
    console.log("賞秋香");
console.groupEnd();

喜歡就點(diǎn)贊收藏一下咯

參考文獻(xiàn)：

MDN: https://developer.mozilla.org...