es6 console 控制台

不念不忘少年蓝@ 2022-10-16 07:37 350阅读 0赞

每个JavaScript开发人员都曾用到过`console.log("message")`这个方法。

它提供了一个简单的调试控制台，类似于web浏览器提供的JavaScript控制台机制。

在本文中，我们将讨论一些常用的JS控制台方法。

以下所有方法在全局实例控制台中可用 ，因此不需要控制台模块。

## 默认值：`console.log()` | `info()` | `debug()` | `warn()` | `error()` ##

这些控制台方法将根据提供的事件类型直接以适当的颜色打印原始字符串。

console.log("console log")
    console.info("console info")
    console.debug("console debug")
    console.warn("console warn")
    console.error("console error")

![图片][6048ebd828b0e80c0e550e72ecd2d35c.png]

## 样式化控制台输出 ##

你可以使用`%c`指令应用CSS样式到控制台输出。

console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")

![图片][9ef5070091ee4d0e689d2c46bd27c214.png]

我们可以多次添加`%c`。

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

![图片][195abb967500db04f76f93b36067b397.png]

## 1. console.table() ##

`console.table()`允许我们在控制台内部生成表格。输入必须是一个数组或一个将显示为表格的对象。

let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
    console.table(info)

##  ##

![图片][91c036dea0f46a98d4bbafd79489a1cf.png]

## 2. console.group("group") & console.groupEnd("group") ##

为了组织控制台，可以使用`console.group()`和`console.groupEnd()`。

通过使用控制台组，控制台日志会被分组在一起，且每次分组都会在层次结构中创建新的层次。调用一次`groupEnd`减少一个层次。

console.group()
        console.log("Test 1st message")
        console.group("info")
            console.log("Suprabha")
            console.log("Frontend Engineer")
        console.groupEnd()
    console.groupEnd()

##  ##

![图片][83003d935a6dbc19c53ab8b8c28dadde.png]

## 3. console.dir() ##

打印指定对象的JSON表示形式。

let info = {
        "name": "Suprabha", 
        "designation": "Frontend Engineer",
        "social": "@suprabhasupi"    
    }
    console.dir(info)

##  ##

![图片][0f32e8b9b42e324dd0920bbcb2529954.png]

## 4. console.assert() ##

如果第一个参数为false，则记录一条消息并将堆栈跟踪记录到控制台。

它默认只打印false参数。如果第一个参数为true，则完全不执行任何操作。

console.assert(false, "Log me!")

举个例子：

let name = "supi"
    let msg = "Its not a number"
    console.assert(typeof msg === "number", {name: name, msg: msg})

##  ##

![图片][06b2903dadfa6e87d7ed844a9604c428.png]

## 5. console.count() ##

此函数将记录这个特定的`count()`方法已被调用的次数。函数带有可选的参数`label`。

如果提供了`label`，则此函数记录调用带有此特定`label`的`count()`的次数。

console.count("Hey")
    console.count("Hey")
    console.count("Hey")
    console.count("Hey")

![图片][72d22a1775a55838b02214bd920f8c6d.png]

如果省略了`label`，则该函数记录在此指定行上调用`count()`的次数。

for (let i = 0; i < 5; i++) {
        console.count()
    }

##  ##

![图片][e111c7d0e69d7c418e9ff9538bb2dc5c.png]

## 6. console.time()和console.timeEnd() ##

在执行时检查代码的性能。

`console.time()`可以更好地跟踪JavaScript执行所花费的时间。

console.time("Time")
    let l = 0;
    for (let i = 0; i < 5; i++) {
       l += i
    }
    console.log("total", l)
    console.timeEnd("Time")

![图片][3ddeaa3c1f0b01fe1a84495d9be3a413.png]

[6048ebd828b0e80c0e550e72ecd2d35c.png]: /images/20221014/e682635094fc47d086e6bd4ebe9ea4b4.png
[9ef5070091ee4d0e689d2c46bd27c214.png]: /images/20221014/4ab2c1c0db114bdaa071c4582afd8558.png
[195abb967500db04f76f93b36067b397.png]: /images/20221014/2354ddf4e57f43b1bb3d23724de31e75.png
[91c036dea0f46a98d4bbafd79489a1cf.png]: /images/20221014/1def2f177f5b438988ebf57bfcb8c2d0.png
[83003d935a6dbc19c53ab8b8c28dadde.png]: /images/20221014/a4044b65498e40b987a68397a3d10c29.png
[0f32e8b9b42e324dd0920bbcb2529954.png]: /images/20221014/06b75322909342a29fbadf2093235ded.png
[06b2903dadfa6e87d7ed844a9604c428.png]: /images/20221014/0756649e7add4cbdbc9c47881f9b2966.png
[72d22a1775a55838b02214bd920f8c6d.png]: /images/20221014/dcc7ecde655e47ac84fd9cd94d4445c6.png
[e111c7d0e69d7c418e9ff9538bb2dc5c.png]: /images/20221014/6375573b21f34434bd353d1c4e8440c0.png
[3ddeaa3c1f0b01fe1a84495d9be3a413.png]: /images/20221014/0ee6c6a164d0477cadd58b813ae61c6a.png