在 JavaScript 开发过程中,在代码的不同位置进行调试以了解运行情况会非常有帮助。
我们来看看几种检查 JavaScript 代码状态的方法。
服务端 vs 客户端
调试 PHP 和 JavaScript 的主要区别之一在于,PHP 是一种服务端语言,因此你可以将消息记录到服务器上的文件中。
而 JavaScript 是一种客户端语言,因此你不能像 PHP 那样轻松地将消息记录到文件中。
幸运的是,我们可以使用浏览器的开发者工具(特别是控制台选项卡)来检查 JavaScript 代码的状态。
打开浏览器的开发者工具
大多数现代浏览器都内置了开发者工具,允许你检查和调试网页元素。
根据你使用的浏览器和操作系统,通常可以通过按下特定键来打开开发者工具,例如 F12、Ctrl+Shift+I 或 Cmd+Option+I。
如果你不确定如何在浏览器中打开开发者工具,可以在 MDN Web Docs 网站上找到便捷的说明,路径为:指南 > 常见问题 > 工具与设置 > 什么是浏览器开发者工具?。
[注意:引导用户完成导航路径,找到该页面]
打开开发者工具后,切换到“控制台”选项卡,页面上的所有错误都会记录在这里。
同时,你也可以在这里从 JavaScript 代码中记录消息,以帮助调试。
console 对象
console 对象允许你将消息记录到浏览器的控制台。它提供了多种方法,用于记录不同类型的消息。
以下是一些最常用的方法:
console.log() 方法是最常用的,因为它几乎可以记录任何内容到控制台。你可以向它传递各种数据类型,例如字符串、数字、数组或对象。
下面是一个将简单字符串变量记录到控制台的示例。
(function() {
let hello = 'Hello, World!';
console.log(hello)
})();
如果你打开开发者工具并选择“控制台”选项卡,变量的内容就会被记录到控制台中。
控制台输出还包含一个指向源文件中代码位置的链接,这有助于追踪消息是从哪里记录的。
你还可以记录更复杂的数据类型,例如数组或对象。
(function() {
let fruits = [ 'apple', 'banana', 'orange' ];
console.log( fruits );
let person = {
firstName: "Jane",
lastName: "Smith",
age: 30,
eyeColor: "brown"
}
console.log( person );
})();
在控制台中查看时,你会看到数组和对象按预期被记录。你还可以展开数组或对象以查看其属性,以及该数据类型可用的任何 JavaScript 方法。
还有许多其他方法可用于将消息记录到控制台,例如 console.error()、console.warn() 和 console.info()。
其中一个最被低估的方法是 console.table(),它可以将数组或对象以表格形式记录,使其更易于阅读。
(function() {
let people = [
{ name: 'Jane', age: 30 },
{ name: 'John', age: 40 },
{ name: 'Alice', age: 25 }
];
console.table( people );
})();
当你有一个对象数组,并且希望以更易读的格式查看数据时,这个方法尤其有用。
延伸阅读
要了解更多关于浏览器 console 对象及其方法的信息,请务必访问 MDN Web Docs 页面。该页面包含了所有 console 方法的完整列表以及有用的示例。