本页介绍 Chrome 开发者工具控制台如何让您更轻松地开发网页。控制台有两个主要用途：查看记录的消息和运行 JavaScript。
查看记录的消息
Web 开发者经常将消息记录到控制台，以确保其 JavaScript 按预期运行。如需记录消息，您可以在 JavaScript 中插入类似 console.log('Hello, Console!') 的表达式。当浏览器执行 JavaScript 并看到这样的表达式时，它就会知道应该将消息记录到控制台中。例如，假设您正在为某个网页编写 HTML 和 JavaScript 代码：
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
图 1 显示了加载页面并等待 3 秒后控制台的界面。尝试找出是哪行代码导致浏览器记录这些消息的。
图 1. “控制台”面板。
Web 开发者记录消息的一般原因有 2 个：
- 确保代码以正确的顺序执行。
- 检查特定时间点的变量值。
请参阅日志记录消息使用入门，亲身体验日志记录功能。如需浏览 console 方法的完整列表，请参阅 Console API 参考文档。这两种方法之间的主要区别在于它们如何显示您要记录的数据。
运行 JavaScript
控制台也是一个 REPL。您可以在控制台中运行 JavaScript，以与正在检查的网页进行交互。例如，图 2 显示了开发者工具首页旁边的控制台，图 3 显示了使用控制台更改页面标题后的同一页面。
图 2. 开发者工具首页旁边的“Console”面板。
图 3. 使用控制台更改网页的标题。
可以通过控制台修改该页面，因为控制台拥有对页面的 window 的完整访问权限。开发者工具具有一些便捷函数，可让您更轻松地检查页面。例如，假设您的 JavaScript 包含一个名为 hideModal 的函数。运行 debug(hideModal) 会在下次调用 hideModal 时在第一行暂停代码。如要查看实用函数的完整列表，请参阅 Console Utilities API 参考文档。
运行 JavaScript 时，您无需与网页交互。您可以使用控制台试用与页面无关的新代码。例如，假设您刚刚了解了内置的 JavaScript Array 方法 map()，并且想尝试使用该方法。控制台是您试用该功能的理想之地。
请参阅运行 JavaScript 使用入门，亲身体验在控制台中运行 JavaScript 的经验。