可以在 控制台 中输入任何 JavaScript 表达式、语句或代码片段,并在键入时立即以交互方式运行。 这是可能的,因为 DevTools 中的 控制台 工具是 REPL 环境。 REPL 代表“读取”、“评估”、“打印”和“循环”。

控制台

  • 读取在其中键入的 JavaScript。
  • 评估代码。
  • 输出表达式的结果。
  • 循环回到第一步。
  • 若要在 控制台 中以交互方式输入 JavaScript 语句和表达式,请执行以下操作:

  • 右键单击网页,然后选择“ 检查 ”。 DevTools 随即打开。 或者,按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) ,直接打开 DevTools 控制台。

  • 如有必要,请在 DevTools 中单击以使其具有焦点,然后按 Esc 打开 控制台

  • 控制台 中单击,然后键入 2+2 ,而不按 Enter

    键入时, 控制台 会在下一行中立即显示结果 4 。 此功能 Eager evaluation 可帮助你编写有效的 JavaScript。 无论 JavaScript 是否正确以及是否存在有效结果,控制台 都会在键入 时显示结果。

  • Enter 时, 控制台 (表达式或语句) 运行 JavaScript 命令,显示结果,然后向下移动光标以允许输入下一个 JavaScript 命令。

    用于编写复杂表达式的自动完成

    控制台 可帮助你使用自动完成编写复杂的 JavaScript。 此功能是了解以前不知道的 JavaScript 方法的好方法。

    若要在编写多部分表达式时尝试自动完成,

  • 类型 doc

  • 按箭头键在下拉菜单上突出显示 document

  • Tab 选择 document

  • 类型 .bo

  • Tab 选择 document.body

  • 键入另 . 一个 ,以获取当前网页正文上可用的可能属性和方法的大型列表。

    主机历史记录

    与许多其他命令行环境一样,输入的命令历史记录可供重复使用。 按 向上键 可显示之前输入的命令。

    同样,自动完成会保留以前键入的命令的历史记录。 可以键入早期命令的前几个字母,并且以前的选项将显示在文本框中。

    此外, 控制台 还提供了相当多的 实用工具方法 ,让你的生活更轻松。 例如, $_ 始终包含你在 控制台 中运行的最后一个表达式的结果。

    默认情况下, 控制台 仅提供一行用于编写 JavaScript 表达式。 按 Enter 时,代码将运行。 单行限制可能会让你感到沮丧。 若要解决单行限制,请按 Shift+Enter 而不是 Enter 。 在以下示例中,显示的值是) 按顺序运行的语句 (所有行的结果:

    如果在 控制台 中启动多行语句,则会自动识别并缩进代码块。 例如,如果通过输入大括号启动块语句,则会自动缩进下一行:

    使用顶级 await () 的网络请求

    除了在你自己的脚本中, 控制台 还支持 顶级 await ,以运行其中任意异步 JavaScript。 例如,使用 fetch API 而不用异步函数包装 await 语句。

    若要获取 Microsoft Edge Developer Tools for Visual Studio Code GitHub 存储库上提交的最后 50 个问题,请执行以下操作:

  • 在 DevTools 中,打开 控制台

  • 复制并粘贴以下代码片段以获取包含 10 个条目的对象:

    await ( await fetch(
    'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
    )).json();
    

    这 10 个条目很难识别,因为显示了大量信息。

  • (可选)使用 console.table() log 方法仅接收你感兴趣的信息:

    若要重用从表达式返回的数据,请使用 copy()Console 的实用工具方法。

  • 粘贴以下代码。 它会发送请求并将响应中的数据复制到剪贴板:

    copy(await (await fetch(
    'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
    )).json())
    

    控制台是练习 JavaScript 并执行一些快速计算的好方法。 真正的强大之处在于你有权访问 窗口 对象。 请参阅 使用控制台与 DOM 交互

  •