Skip to main content
On this page

使用控制台 API 进行更好的调试

控制台 API 的一部分对 Web 开发者来说可能已经是肌肉记忆了,但它不仅仅是给你用的 console.log()。Deno 对这个 API 提供了很好的支持,所以不管你是在为浏览器还是为服务器编写 JavaScript,都值得学习这些有用的工具。

让我们来看看该 API 中一些最有用的方法。你的调试会变得轻松许多!

console.log() Jump to heading

你好,老朋友!你很可能会用它来输出日志消息到控制台,帮助你调试。

console.log("Hello, world!"); // "Hello, world!"

你可以通过逗号分隔来输出多个项目,例如:

const person = { "name": "Jane", "city": "New York" };
console.log("Hello, ", person.name, "from ", person.city); // "Hello, Jane from New York"

或者你也可以使用字符串字面量:

const person = { "name": "Jane", "city": "New York" };
console.log(`Hello ${person.name} from ${person.city}`); // "Hello, Jane from New York"

你还可以使用 %c 指令,通过 CSS 应用一些样式

console.log("Wild %cblue", "color: blue", "yonder"); // 将蓝色文本颜色应用到单词“blue”

但使用控制台 API 你还可以做得更多。

console.table() Jump to heading

table 方法对于输出诸如对象这类结构化数据很有帮助,便于更轻松地检查。

const people = {
  "john": {
    "age": 30,
    "city": "New York",
  },
  "jane": {
    "age": 25,
    "city": "Los Angeles",
  },
};

console.table(people);

/*
┌───────┬─────┬───────────────┐
│ (idx) │ age │ city          │
├───────┼─────┼───────────────┤
│ john  │ 30  │ "New York"    │
│ jane  │ 25  │ "Los Angeles" │
└───────┴─────┴───────────────┘
*/

你也可以指定想要包含在表格中的对象属性。非常适合用来检查这些详细对象的汇总信息,从而看到你关心的那一部分。

console.table(people, ["city"]);

/* 输出
┌───────┬───────────────┐
│ (idx) │ city          │
├───────┼───────────────┤
│ john  │ "New York"    │
│ jane  │ "Los Angeles" │
└───────┴───────────────┘
*/

计时器方法 Jump to heading

理解你应用程序中哪些特定部分耗时多久,对于移除性能瓶颈和昂贵操作至关重要。如果你曾经为了计时而去用 JavaScript 的日期方法,那么你会希望早就知道这个方法。它更方便,也更准确。

请尝试改用 console.time()console.timeLog(),以及 console.timeEnd()

console.time("My timer"); // 启动一个标为“My timer”的计时器
// 执行一些工作...
console.timeLog("My timer"); // 输出当前计时器的值,例如“My timer: 9000ms”
// 再做一些工作...
console.timeEnd("My timer"); // 停止“My timer”并报告其值,例如“My timer: 97338ms”

你可以创建多个计时器,每个计时器都有自己的标签。非常实用!

使用 console.count() 进行计数 Jump to heading

在你的代码中,记录特定操作执行了多少次通常很有帮助。与其手动去做,你可以使用 console.count(),它可以根据你提供的标签为你维护多个计数器。

// 增加默认计数器
console.count();
console.count();
console.count();

/*
"default: 1"
"default: 2"
"default: 3"
*/

这在函数内部非常好用,并且你可以传入一个标签,例如:

function pat(animal) {
  console.count(animal);
  return `Patting the ${animal}`;
}

pat("cat");
pat("cat");
pat("dog");
pat("cat");

/*
"cat: 1"
"cat: 2"
"dog: 1"
"cat: 3"
*/

使用 console.trace() 更深入地排查问题 Jump to heading

为了详细了解你应用程序中发生了什么,你可以使用 console.trace() 将堆栈追踪信息输出到控制台:

// main.js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

/*
Trace
    at bar (file:///PATH_TO/main.js:3:13)
    at foo (file:///PATH_TO/main.js:5:3)
    at file:///PATH_TO/main.js:8:1
*/

当然还有更多内容值得探索,但这些实用的方法可以让你的 JavaScript 调试更上一层楼,并且你可以随时在浏览器里或你的 Deno 应用中直接使用它们。

请在 API Reference 文档中查看 console 支持情况 以了解更多。

Last updated on

你找到了你需要的东西吗?

编辑此页面
隐私政策