发布于 2026-01-06 0 阅读
0

Javascript console Methods: A Cheat Sheet for Developers DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

JavaScript 控制台方法:开发者速查表

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

Javascript 控制台对象是一个全局对象,它提供对浏览器调试控制台的访问。

我们大多数人都使用过 console.log() 函数将消息打印到控制台。但是,还有许多其他方法可以帮助我们轻松地调试代码。

事不宜迟,让我们来学习一下控制台方法。

信息()

它类似于 log(),但用于打印信息消息。

console.info("Hello World");
Enter fullscreen mode Exit fullscreen mode

警告()

它用于打印警告信息。它会打印一条彩色(黄色)警告信息,通常用于指示某些地方出了问题。

console.warn("Hello World");
Enter fullscreen mode Exit fullscreen mode

错误()

它用于打印错误信息。它会打印一条彩色(红色)错误信息,通常用于指示出现了问题。

console.error("Something went wrong");
Enter fullscreen mode Exit fullscreen mode

桌子()

它用于打印表格数据,有助于以表格形式可视化数据。

const user = {
  name: "John",
  age: 30,
};

console.table(user);
Enter fullscreen mode Exit fullscreen mode

时间()

它用于打印自调用 time() 方法以来经过的时间。这有助于了解某个操作需要多长时间。

console.time("TIME");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("TIME"); // TIME: 2.655029296875ms
Enter fullscreen mode Exit fullscreen mode

清除()

它用于清空控制台。当您想在打印新消息之前清空控制台时,它非常有用。

console.log("Old Message");
console.clear();
console.log("New Message"); // New Message
Enter fullscreen mode Exit fullscreen mode

dir()

它用于打印对象的属性。查看对象的属性很有用。

console.log(document.body); // <html>....</html>

console.dir(document.body); // body{...}
Enter fullscreen mode Exit fullscreen mode

断言()

它用于在断言失败时打印错误消息。它可用于检查某个条件是否为真。

console.assert(1 === 2, "1 is not equal to 2"); // Assertion failed: 1 is not equal to 2

console.assert(1 !== 2, "1 is not equal to 2"); // nothing
Enter fullscreen mode Exit fullscreen mode

数数()

它用于打印函数被调用的次数。查看函数被调用的次数很有用。

const exec = (label) => console.count(label);

exec(); // default: 1
exec(); // default: 2
Enter fullscreen mode Exit fullscreen mode

团体()

它用于打印一组消息。将消息分组在一起非常有用。

console.group("USER API");
console.log("Name: John");
console.log("Age: 20");
console.groupEnd();
console.group("PRODUCT API");
console.log("Name: Laptop");
console.log("Price: 20");
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

轮廓()

它用于打印自调用 profile() 方法以来经过的时间。这有助于了解某个操作需要多长时间。

console.profile("PROFILE");
for (let i = 0; i < 1000000; i++) {}
console.profileEnd("PROFILE");
Enter fullscreen mode Exit fullscreen mode
注意:要查看分析结果,您需要打开浏览器的分析器。

痕迹()

它用于打印调用堆栈。查看调用堆栈很有用。

function foo() {
  console.trace("TRACE");
}
foo();
Enter fullscreen mode Exit fullscreen mode

日志()

在控制台记录一条消息。

const greet = "Hello";
console.log("Hello World"); // Hello World
console.log("%s World", greet); // Hello World
console.log("%cHello %cWorld", "color: red", "color: green"); // Hello(red) World(green)
Enter fullscreen mode Exit fullscreen mode

如果你还没读过,一定要读!

来抓我吧

YouTube、 GitHub、 LinkedIn、 Medium、 Stackblitz、 Hashnode、 HackerNoon

文章来源:https://dev.to/devsmitra/javascript-console-methods-a-cheat-sheet-for-developers-44mc