作为 JavaScript 环境的控制台The Console as a JavaScript environment

浏览器**** DevTools 中的控制台工具是一个REPL环境。The Console tool inside the browser DevTools is a REPL environment. 这意味着你可以编写控制台中立即 运行 的任何 JavaScript。It means that you may write any JavaScript in the Console that runs immediately.

若要尝试,请完成以下操作。To try it, complete the following actions.

  1. 打开“控制台”。Open the Console.
    • 选择 Control + Shift + J (Windows、Linux) 或 Command + Option + J (macOS)。Select Control+Shift+J (Windows, Linux) or Command+Option+J (macOS).
  2. 键入 2 + 2Type 2 + 2. 当您键入时,控制台 4 已经在下一行上显示结果。The Console already displays the result 4 on the next line while you type it. 该功能 Eager evaluation 可帮助你编写有效的 JavaScript。The Eager evaluation feature helps you write valid JavaScript. 键入错误或有效结果是否存在时,它将显示结果。It displays the result while you type whether it's wrong or if a valid result exists.

控制台在键入时显示 2 + 2 实时的结果

如果选择 , Enter 控制台 将运行 JavaScript 命令,为你提供结果,并允许编写下一个命令。If you select Enter, the Console runs the JavaScript command, gives you the result, and allows you to write the next command.

连续运行多个 JavaScript 表达式

编写复杂表达式的自动完成Autocompletion to write complex expressions

最后一个示例可能看起来不令人难看,但 控制台 可帮助你使用出色的自动完成功能编写复杂的 JavaScript。The last example may seem scary, but the Console helps you write complex JavaScript using an excellent autocompletion feature. 此功能是了解以前不知道的方法的一种好方法。This feature is a great way to learn about methods you didn't know before.

若要尝试,请完成以下操作。To try it, complete the following actions.

  1. 键入 docType doc.
  2. document 下拉菜单中选择。Choose document from the dropdown menu.
  3. 选择 tab 密钥进行选择。Select the tab key to choose it.
  4. 键入 .boType .bo.
  5. 选择 tab 获取 document.bodySelect tab to get document.body.
  6. 键入另 . 一个,获取当前网页正文中可用的可能属性和方法的大型列表。Type another . to get a large list of possible properties and methods available on the body of the current webpage.

JavaScript 表达式的控制台自动完成

控制台历史记录Console history

与许多其他命令行体验一样,您也有命令历史记录。As with many other command-line experiences, you also have a history of commands. 选择 Arrow Up 以显示之前输入的命令。Select Arrow Up to display the commands you entered before. 自动完成还会保留以前键入的命令的历史记录。Autocompletion also keeps a history of the commands you previously typed. 可以键入之前命令的前几个字母,之前的选项会显示在文本框中。You may type the first few letters of earlier commands and your previous choices display in a textbox.

此外, 控制台 还提供了很多实用程序 方法 ,可简化您的生活。Also, the Console also offers quite a few utility methods that make your life easier. 例如, $_ 始终包含控制台 中运行的最后一个表达式 的结果For example, $_ always contains the result of the last expression you ran in the Console.

控制台中的 $_ 表达式始终包含最后的结果

多行编辑Multiline edits

默认情况下, 控制台只 为你提供一行来编写 JavaScript 表达式。By default, the Console only gives you one line to write your JavaScript expression. 选择 时,代码将运行 EnterYou code runs when you select Enter. 单行限制可能会使您费时无用。The one line limitation may frustrate you. 若要绕绕一行限制,请选择 Shift + Enter 而不是 EnterTo work around the one line limitation, select Shift+Enter instead of Enter. 在下面的示例中,显示的值是按顺序运行的所有行的结果。In the following example, the value displayed is the result of all the lines run in order.

选择 Shift+Enter 可编写几行 JavaScript,并按顺序运行生成的值

如果在控制台中启动多行 语句,它将自动识别并缩进。If you start a multiline statement in the Console, it gets automatically recognized and indented. 例如,如果启动带大括号的块语句。For example, if you start a block statement with a curly brace.

控制台已使用大括号和缩进来识别多行表达式

使用顶级 await 请求的网络 () Network requests using top-level await()

除了在你自己的脚本中, 控制台支持顶级 await 在它内运行任意异步 JavaScript。Other than in your own scripts, Console supports top level await to run arbitrary asynchronous JavaScript in it. 例如,使用 API 时 fetch 无需使用 await async 函数包装语句。For example, use the fetch API without wrapping the await statement with an async function.

若要获取 Microsoft Edge 开发人员工具 Visual Studio Code GitHub存储库上归档的最后 50 个问题,请完成以下操作。To get the last 50 issues filed on the Microsoft Edge Developer Tools for Visual Studio Code GitHub repo, complete the following actions.

  1. 打开“控制台”。Open the Console.

  2. 复制并粘贴以下代码段,获取包含 10 个条目的对象。Copy and paste the following code snippet to get an object that contains 10 entries.

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

控制台显示顶级异步提取请求的结果

这 10 个条目很难识别,因为会显示大量信息。The 10 entries are hard to recognize, since a lot of information is displayed. 幸运的是,您可以使用 log 方法仅 console.table() 接收您感兴趣的信息。Luckily enough, you may use the console.table() log method to only receive the information in which you're interested.

使用 console.table 以人工可读格式显示最后的结果

若要重用从表达式返回的数据,可以使用 copy() 控制台 的实用程序 方法To reuse the data returned from an expression, you may use the copy() utility method of the Console. 以下代码段发送请求并将响应数据复制到剪贴板。The following code snippet sends the request and copies the data from the response to the clipboard.

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

使用 控制台 作为实践 JavaScript 功能和进行一些快速计算很好的方法。Use the Console as a great way to practice JavaScript functionality and to do some quick calculations. 真正的功能是,您有权访问 window 对象。The real power is the fact that you have access to the window object. 你可以 与控制台 中的 DOM 交互You may interact with the DOM in Console.

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标