像专业人士一样使用 Javascript 控制台

2025-05-28

像专业人士一样使用 Javascript 控制台

每个JavaScript 开发人员都使用过 `console.log("message")`。

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

在本文中,我们将讨论每个人都应该开始使用的大多数控制台方法。

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

默认值: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")
Enter fullscreen mode Exit fullscreen mode

默认控制台类型

样式控制台输出👻

您可以使用 %c 指令将 CSS 样式应用于控制台输出

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

造型控制台类型

我们可以多次添加 %c。

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

多种控制台类型的样式

1. console.table()

console.table() 允许我们在控制台中生成表格。输入必须是数组或对象,并以表格形式显示。

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

控制台

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

为了组织控制台,我们使用 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()
Enter fullscreen mode Exit fullscreen mode

控制台组和 groupEnd

3. console.dir()

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

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

控制台目录

4. console.assert()

如果第一个参数为假,则将消息和堆栈跟踪记录到控制台。

它只会打印错误的参数。如果第一个参数为真,它什么也不做。

console.assert(false, "Log me!")
Enter fullscreen mode Exit fullscreen mode

例子:

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

控制台断言

5. console.count()

此函数记录此特定调用的调用次数 count() 。此函数接受一个可选参数 label

如果 提供了,该函数将记录 使用该特定 调用的 label 次数 count()label

console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")
Enter fullscreen mode Exit fullscreen mode

带标签的控制台计数

如果 省略,函数将记录 在此特定行被调用的label 次数 count()

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

不带标签的控制台数量

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")
Enter fullscreen mode Exit fullscreen mode

控制台时间和 timeEnd

参考🧐

🌟推特 👩🏻‍💻suprabha.me 🌟 Instagram
文章来源:https://dev.to/suprabhasupi/use-javascript-console-like-pro-3j1h
PREV
面向 Web 开发者的超棒 GitHub 仓库 - 第一部分
NEXT
如何在 2023 年成为一名出色的 Web 开发人员(前端和后端技巧)