控制台概览

Kayce Basques
Kayce Basques
X GitHub

使用控制台测试和调试 JavaScript Web 应用。

概览

本页介绍了 Chrome 开发者工具的控制台如何简化网页开发。控制台有 2 种主要用途：查看已记录的消息和运行 JavaScript。

打开控制台

您可以将 Console 作为面板或抽屉中的标签页打开。如需了解具体方法，请参阅功能参考中的打开控制台。

查看记录的消息

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 秒钟后 Console 的显示效果。尝试找出哪些代码行导致浏览器记录了消息。