你不知道的浏览器 Console 玩法

2023-10-27
广东
本文字数：912 字
阅读完需：约 3 分钟

在做前端开发过程中，用的最多的应该就是使用浏览器的 console 查看相关的信息，最基本的都是用 console.info("hello world")，但是它还有其他好用的一些功能，可以让控制台的输出信息更加易于查看和丰富。

1、console 也跟后端开发一样，支持不同级别的输出信息，包括

debug
info
warn
error

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

复制代码

2、以 table 的样式输出对象或者数组，console.info 会以 json 字符串的形式输出对象，或者数据，但是 console.table 会以 table 的样式输出对象或者数据，你还可以对 table 输出的数据进行排序。

const o = { a: "a", b: "b" }console.info(o)console.table(o)
const arr = [{ a: "a", b: "b" }, { a: "aa", b: "bb" }]console.info(arr)console.table(arr)

复制代码

3、日志分组，在某些情况下我们需要按照自定义的分组来显示日志，这时候你可以通过 console.group 来实现。

console.group("group_a")console.info("a")console.info("b")console.groupEnd()
console.groupCollapsed("group_b") //默认折叠console.info("aa")console.info("bb")console.groupEnd()

复制代码

4、循环计数，有时候我们需要知道循环了多少次，这时候你可以通过 console.count 来简单的统计。

const arr = [{ a: "a", b: "b" }, { a: "aa", b: "bb" }]arr.forEach(x => {  console.count()})console.countReset()

复制代码

5、断言，当断言失败的时候，会在控制台输出错误信息以及调用堆栈，在长链条的调用过程中，使用 console.assert 可以更快速的定位问题。

const sum = (a: number, b: number) => {  return a + b}console.assert(sum(1, 2) === 4)

复制代码

6、dir，当我们将函数输出的时候，console.info 会将函数当作字符串输出，而 console.dir 会将函数以对象形式输出。

const sum = (a: number, b: number) => {  return a + b}console.info(sum)
console.dir(sum)

复制代码

7、不实用的功能，但是可以更好的可视化你的日志，在输出日志里面加上日志样式，在日志信息前面加上`%c`。

const style = "color: green; font-size:large"console.info("%cI am green and large", style)

复制代码

相信通过上面的这些 Console 的命令，可以让你调试问题更加的方便快捷。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/fab47731cf391a946a541ca13】。

Kevin_913

关注

纸上得来终觉浅，绝知此事要躬行。 2019-02-25 加入

专注于代码和设计15+年。主要涉及Java，Golang，云平台。

发布

暂无评论

创作场景

你不知道的浏览器 Console 玩法

Kevin_913

评论