你所不知道 ? Console

lovXin 發(fā)布于2019-08-01 15:41 / 1765人閱讀

前言

console.log 可以是在日常 Web 開(kāi)發(fā)中最常用的方法了，但是你應(yīng)該知道 console 比你想象的強(qiáng)。

1.凡人視角 打印字符串

代碼：

console.log("I am a 凡人");

打印提示消息

代碼：

console.info("Yes, you are a 凡人");

打印警告消息

代碼：

console.warn("凡人你居然敢窺視我");

打印錯(cuò)誤消息

代碼：

console.error("天兵天將，把這個(gè)凡人給我打入地獄");

打印調(diào)試信息

console.debug("我就是傳說(shuō)中的debug");

2.上帝視角 查看所有方法

console 除了上面的幾個(gè)方法還有什么方法呢？log 除了能打印字符串外，還能打印出對(duì)象，我們可以利用 console.log 打印自己。

代碼：

console.log(console);

輸出：

Object {
    assert: ...,
    clear: ...,
    count: ...,
    debug: ...,
    dir: ...,
    dirxml: ...,
    error: ...,
    group: ...,
    groupCollapsed: ...,
    groupEnd: ...,
    info: ...,
    log: ...,
    markTimeline: ...,
    profile: ...,
    profileEnd: ...,
    table: ...,
    time: ...,
    timeEnd: ...,
    timeStamp: ...,
    timeline: ...,
    timelineEnd: ...,
    trace: ...,
    warn: ...
}

啊咧咧？怎么這么多方法。其實(shí)上面的 console 方法 不一定每個(gè)瀏覽器 都有實(shí)現(xiàn)，我這邊使用的是 chrome瀏覽器 。所以說(shuō)，這個(gè)特性是非標(biāo)準(zhǔn)的，請(qǐng)盡量不要在 生產(chǎn)環(huán)境 中使用它。

但是我們可以在 開(kāi)發(fā)環(huán)境 中，合理的利用 這些方法來(lái)幫助我們開(kāi)發(fā)。

清理控制臺(tái)

如果我們?cè)诳刂婆_(tái)調(diào)試的時(shí)候，難免 強(qiáng)迫癥 發(fā)作想清理掉已經(jīng)亂七八糟的控制臺(tái)。瀏覽器和命令行 clear 一樣提供了一個(gè)清理函數(shù) console.clear() 。

console.clear()

當(dāng)然我們也可以用 chrome 的 command line api 來(lái)清理控制臺(tái)。

clear()

又或者可以使用按鍵Mac上 cmd + k ，Win ctrl + l（我用的是chrome瀏覽器）。

分組

當(dāng)代碼非常長(zhǎng)，或者我們需要把一個(gè)函數(shù)，或者一個(gè)文件中的函數(shù)等區(qū)分出來(lái)。我們可以使用分組來(lái)實(shí)現(xiàn)。

代碼：

console.group("凡人");
console.log("手");
console.log("腳");
console.groupEnd();

console.group("神");
console.log("法力無(wú)邊");
console.log("騰云架霧");
console.groupEnd();

輸出：

如果想要輸出為折疊，我們可以使用 console.groupCollapsed ，用法和 console.group 類似。

查看對(duì)象信息

有時(shí)候我們需要打印出對(duì)象信息,可以使用 console.log 來(lái)進(jìn)行簡(jiǎn)單的輸出。

代碼：

var person = {
    head: 1,
    hand: 2,
    leg: 2
};
console.log(person);

嗚嗚，可是這個(gè)顯示得好丑，我們這個(gè)時(shí)候就可以使用傳說(shuō)中的神器 console.table 來(lái)幫助我們清楚的顯示 關(guān)聯(lián)數(shù)組信息。

var data = [
    {
        "姓名": "幼兒園", 
        "性別": "女"
    },
    {
        "姓名": "李狗嗨",
        "數(shù)量": 1
    }
];
console.table(data);

輸出：

但是如果想要看詳細(xì)的對(duì)象信息，我們可以使用 console.dir，將一個(gè) JavaScript 對(duì)象的所有屬性和屬性值顯示成一個(gè)可交互的列表，它還能打印出函數(shù)等。

console.dir(clear);

什么？你想看某個(gè)節(jié)點(diǎn)中的html代碼？沒(méi)事，我們可以用 console.dirxml 來(lái)查看頁(yè)面中對(duì)應(yīng)元素的 html/xml 內(nèi)容。

html代碼：


    I am a 凡人

javascirpt代碼：

var person = document.getElementById("person");
console.dirxml(person)；

性能測(cè)試

雷軍粑粑老是喜歡說(shuō)：“不服？跑個(gè)分。”有時(shí)候，我們也需要對(duì)代碼跑個(gè)分。這個(gè)時(shí)候，我們可以使用console.time和console.timeEnd，他們可以記錄代碼運(yùn)行所花費(fèi)的時(shí)間。

console.time("神機(jī)妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.timeEnd("神機(jī)妙算");

啊咧咧？你這個(gè)頂多就是 計(jì)時(shí)器 怎么能說(shuō)是 性能測(cè)試 。客官別急，我們這還有一個(gè)叫做 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("神機(jī)妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.profileEnd("神機(jī)妙算");

輸出會(huì)顯示在 profile

什么還是不夠？你還想知道運(yùn)行時(shí)的結(jié)果棧？可以可以，我們這還有一位 console.trace 哦。他可以看透大爺你的一局一動(dòng)哦。
代碼：

function add(num) {
    if (0 < num) {
        console.trace("現(xiàn)在num的值為", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

輸出：

判斷真假

平時(shí)我們?cè)趯?xiě)代碼是時(shí)候，經(jīng)常需要判斷一下當(dāng)前值的真假情況，使用if或者三元表達(dá)式來(lái)達(dá)到目的。我們現(xiàn)在也可以使用 console.assert 來(lái)判斷，該方法會(huì)在條件為錯(cuò)誤時(shí)，返回一個(gè) console.error 的輸出。

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

統(tǒng)計(jì)次數(shù)

有時(shí)候我們需要統(tǒng)計(jì)一個(gè)函數(shù)或者被調(diào)用了幾次，我們通常會(huì)增加一個(gè)變量 count 來(lái)記錄，然后在控制臺(tái)中查看。這樣相當(dāng)?shù)穆闊覀兛梢允褂?console.count 函數(shù)來(lái)幫忙我們記錄次數(shù)，并輸出。

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

for(var i = 0; i < 10; i++) {
    if(i < 4) {
        hi("person");
    } else {
        hi("god");
    }
}

總結(jié)

console 中有很多對(duì)我們調(diào)試代碼有幫助的函數(shù)，我們可以在開(kāi)發(fā)環(huán)境中配合 console 來(lái)調(diào)試代碼，使得我們測(cè)試更加便利。

一起成長(zhǎng)

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來(lái)自 PushMeTop

GPU云服務(wù)器云服務(wù)器你所 console console.log console.log()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/50044.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lovXin

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【平衡小車】前言

閱讀 1581·2021-11-16 11:44
ip地址怎么判斷主機(jī)地址-如何判斷一個(gè)ip地址是不是有效主機(jī)地址？

閱讀 7423·2021-09-22 15:00
虛擬機(jī)wmware workstation pro 16.1.2 Build 17966106官方版

閱讀 4462·2021-09-02 10:20
知名開(kāi)源軟件廠商 Grafana Labs 完成5000萬(wàn)美元B輪融資，估值已達(dá)30億美元

閱讀 1944·2021-08-27 16:20
【JavaScript系列】vue項(xiàng)目中實(shí)現(xiàn)滾動(dòng)條（具體視窗口的滾動(dòng)條）操作：（1）置底，（2）置于

閱讀 2385·2019-08-26 14:00
高級(jí) Angular 組件模式 (4)

閱讀 2905·2019-08-26 11:44
websocket pc端調(diào)試成功，手機(jī)端不可通信

閱讀 1627·2019-08-23 18:33
自開(kāi)發(fā)的EasyCanvas繪圖庫(kù)實(shí)踐、Pixeler項(xiàng)目開(kāi)發(fā)小結(jié)

閱讀 1853·2019-08-22 17:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

你所不知道 ? Console

相關(guān)文章

**前端面試你所不知道系列**