deno.com
本页内容

使用 console API 更好地调试

对于 Web 开发者来说,部分控制台 API 可能已成为一种肌肉记忆,但除了 console.log() 之外,还有许多功能可供你使用。Deno 对此 API 提供了出色的支持,因此无论你是为浏览器还是为服务器编写 JavaScript,都值得学习这些有用的工具。

让我们来看看这个 API 中一些最有用的方法。你的调试将会变得简单得多!

console.log() 跳转到标题

你好,老朋友!你很可能使用它来向控制台输出日志消息,以帮助你进行调试。

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"); // Applies a blue text color to the word "blue"

……但是你还可以用控制台 API 做更多事情。

console.table() 跳转到标题

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"]);

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

计时器方法 跳转到标题

了解应用程序特定部分花费的时间是消除性能瓶颈和昂贵操作的关键。如果你曾经使用过 JavaScript 的日期方法来制作计时器,你会希望你早点知道这个方法。它更方便、更准确。

请改用console.time()console.timeLog()console.timeEnd()

console.time("My timer"); // starts a timer with label "My timer"
// do some work...
console.timeLog("My timer"); // outputs the current timer value, e.g. "My timer: 9000ms"
// do more work...
console.timeEnd("My timer"); // stops "My timer" and reports its value, e.g. "My timer: 97338ms"

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

使用 console.count() 进行计数 跳转到标题

跟踪代码中特定操作执行的次数会很有帮助。除了手动操作,你还可以使用 console.count(),它能根据你提供的标签为你维护多个计数器。

// increment the default counter
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() 深入探索 跳转到标题

要详细了解应用程序中发生的情况,你可以使用 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 参考文档中的控制台支持

您找到所需内容了吗?

隐私政策