在控制台中运行 JavaScript

凯斯·巴斯克 (Kayce Basques)
Kayce Basques
Twitter GitHub Glitch

本互动教程介绍了如何在 Chrome 开发者工具控制台中运行 JavaScript。请参阅记录消息使用入门，了解如何将消息记录到控制台。如需了解如何暂停 JavaScript 代码并一次单步调试，请参阅开始使用 JavaScript 调试。

控制台。

图 1. 控制台。

概览

控制台是一个 REPL，代表“读取”、“评估”、“打印”和“循环”。它会读取您输入的 JavaScript 代码，评估代码，输出 expression 的结果，然后循环回第一步。

设置开发者工具

本教程旨在让您打开演示版并自行尝试所有工作流。如果实际操作起来，您稍后更有可能记住工作流。

  1. 按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、ChromeOS）即可在此页面上打开控制台。

    本教程为左侧，开发者工具位于右侧。

    图 2. 本教程为左侧，开发者工具位于右侧。

查看和更改网页的 JavaScript 或 DOM

构建或调试网页时，在控制台中运行语句通常有助于更改网页的外观或运行方式。

  1. 请注意下方按钮中的文字。

  2. 在控制台中输入 document.getElementById('hello').textContent = 'Hello, Console!'，然后按 Enter 键对表达式求值。请注意按钮内的文本发生了怎样的变化。

    控制台在评估上述表达式后将如何处理。

    图 3. 控制台在评估上述表达式后将如何处理。

    在您评估的代码下方，您会看到 "Hello, Console!"。回顾 REPL 的 4 个步骤：读取、评估、输出、循环。对代码求值后，REPL 会输出表达式的结果。因此，"Hello, Console!" 必须是 document.getElementById('hello').textContent = 'Hello, Console!' 求值的结果。

运行与网页无关的任意 JavaScript

有时，您只是想提供一个代码园地，您可以在其中测试一些代码，或尝试您不熟悉的新 JavaScript 功能。控制台是进行这类实验的理想之选。

  1. 在控制台中输入 5 + 15。结果 20 将显示在表达式下方（除非表达式的求值时间过长）。
  2. 按 Enter 可对表达式求值。控制台会在代码下方输出表达式的结果。下面的图 4 显示了您的控制台在评估此表达式后应如何处理。

  3. 在控制台中输入以下代码。请尝试逐个字符地输入文本，而不是复制粘贴文本。

    function add(a, b=20) {
  return a + b;
}

    如果您不熟悉 b=20 语法，请参阅为函数参数定义默认值。

  4. 现在，调用您刚刚定义的函数。

    add(25);

    控制台在对上述表达式求值后将如何处理。

    图 4. 控制台在对上述表达式求值后将如何处理。

    add(25) 的求值结果为 45，因为在没有第二个参数的情况下调用 add 函数时，b 默认为 20。

在您的函数返回之前，您无法在此控制台会话中运行任何代码。如果花费的时间太长，您可以使用任务管理器取消耗时的计算；不过，这也会导致当前页面失败，并且您输入的所有数据都将丢失。

后续步骤

请参阅运行 JavaScript，以探索与在控制台中运行 JavaScript 相关的更多功能。

借助开发者工具，您可以在脚本执行过程中暂停脚本执行。暂停后，您可以立即使用控制台查看和更改页面的 window 或 DOM。这为强大的调试工作流提供了助力。如需查看交互式教程，请参阅调试 JavaScript 入门。

控制台还支持一组格式说明符。请参阅在控制台中设置消息格式和样式，探索设置控制台消息格式和样式的所有方法。

除此之外，控制台还有一组便捷功能，可让您更轻松地与网页互动。例如：

  • 只需输入 $() 即可选择元素，而无需输入 document.querySelector()。此语法源自 jQuery，但实际上并不是 jQuery。而只是 document.querySelector() 的别名。
  • debug(function) 可在相应函数的第一行有效地设置断点。
  • keys(object) 会返回包含指定对象的键的数组。

如需探索所有便捷功能，请参阅 Console Utilities API 参考文档。