在控制台中运行 JavaScript

Kayce Basques

本互动教程介绍了如何在 Chrome 开发者工具控制台中运行 JavaScript。请参阅 开始使用记录消息，了解如何将消息记录到控制台。请参阅使用入门 使用 JavaScript 调试了解如何暂停 JavaScript 代码，然后访问以下代码行 。

控制台。

图 1. 控制台。

概览

控制台是一个 REPL，代表读取、评估、输出和循环。它会读取 您可以输入到其中的 JavaScript、评估代码、输出 expression，然后循环到第一步。

设置开发者工具

本教程旨在让您打开演示并自行尝试所有工作流。时间 你会更有可能记住工作流。

  1. 按 Command+Option+J (Mac) 或 Ctrl+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 实用程序 API 参考文档。