使用控制台Use the Console

DevTools 的控制台工具可帮助你完成多项任务。 ****The Console tool of the DevTools helps you with several tasks. 以下列表包含一些任务。The following list includes some of the tasks.

控制台 一款很好的配套工具,可用于其他工具。The Console is a great companion tool to use with others tools. 控制台 提供了 一种使用 JavaScript 编写功能、检查和处理当前网页的功能强大的方法。The Console provides a powerful way to script functionality, inspect, and manipulate the current webpage using JavaScript.

直接打开控制台的最快方法为选择**** Control + Shift + J \ (Windows、Linux) 或 Command + Option + J \ (macOS) 。The fastest way to directly open the Console is to select Control+Shift+J (Windows, Linux) or Command+Option+J (macOS).

错误报告和控制台Error reports and Console

控制台 是报告 JavaScript 和连接错误的默认位置。Console is the default place where JavaScript and connectivity errors are reported. 如果发生任何错误,DevTools 中的****"设置"图标旁边会显示一个按钮,该按钮提供错误和警告的数量。If any errors occur, a button displays next to the Settings icon in DevTools that provides the number of errors and warnings. 选择它以打开 控制台 并显示问题。Choose it to open the Console and display the problem. 有关详细信息,请导航到"控制台"中报告的"调试错误"。For more information, navigate to Debug errors reported in Console.

DevTools 提供有关控制台中错误的详细信息

检查和筛选当前网页上的信息Inspect and filter information on the current webpage

当你在网页上打开 DevTools 时,你很可能会显示记录到控制台的一些 信息When you open the DevTools on a webpage, you're likely to display a deluge of information logged to the Console. 当您需要识别重要信息时,信息量将成为一个问题。The amount of information becomes a problem when you need to identify important information. 若要查看需要采取措施的重要信息,请使用 DevTools 中的问题 工具。To view the important information that needs action, use the Issues tool in DevTools. 大部分噪音仍然存在,这就是在控制台中了解自动日志和 筛选器 选项的一个好 办法的原因Much of the noise remains, which is why it's a good idea to know about the automated log and filter options in the Console.

包含控制台的完整消息的 DevTools

要显示在控制台中的日志信息Log information to display in the Console

控制台最常见的用例是使用 方法**** 或其他类似方法从脚本 console.log() 中记录信息。The most popular use case for the Console is logging information from your scripts using the console.log() method or other similar methods. 若要尝试,请完成以下操作。To try it, complete the following actions.

  1. 若要打开控制台,请选择 Control + Shift + J \ (Windows、Linux) 或 Command + Option + J \ (macOS) 。To open Console, select Control+Shift+J (Windows, Linux) or Command+Option+J (macOS).

  2. 导航到 控制台消息示例:日志、信息、错误和警告,或在控制台中复制并运行以下 代码段Navigate to Console messages examples: log, info, error and warn, or copy and run the following code snippet in the Console.

    console.log('This is a log message');
    console.info('This is some information'); 
    console.error('This is an error');
    console.warn('This is a warning');
    console.log(document.body.getBoundingClientRect());
    console.table(document.body.getBoundingClientRect());
    let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
    console.groupCollapsed('Technolgies');
    technologies.forEach(tech => {console.info(tech);})
    console.groupEnd('Technolgies');
    
  3. 控制台 显示 结果。The Console displays the results.

    控制台已满由演示代码导致的消息

使用控制台 时,可以使用许多有用的 方法Many useful methods are available when you work with the Console. 有关详细信息,请导航到"控制台"工具中的"记录消息"。For more information, navigate to Log messages in the Console tool.

在控制台中尝试 JavaScript 实时Try your JavaScript live in the Console

控制台不仅仅是记录信息的位置。The Console isn't only a place to log information. 控制台 一个 REPL 环境。The Console is a REPL environment. 在控制台中编写任何 JavaScript ,代码会立即运行。When you write any JavaScript in the Console, the code runs immediately. 你会发现测试一些新的 JavaScript 功能或执行一些快速计算会很有用。You may find it useful to test some new JavaScript features or to do some quick calculations. 此外,还可以从新式编辑环境获取所有预期功能,如自动完成、语法突出显示和历史记录。Also, you get all of the features you expect from a modern editing environment, such as autocompletion, syntax highlighting, and history. 若要尝试,请完成以下操作。To try it, complete the following actions.

  1. 导航到 控制台Navigate to the Console.
  2. 键入 2 + 2Type 2 + 2.

控制台 将在 以下行 4 中显示结果。The Console displays the result 4 on the following line. "期待 "评估功能可用于调试和验证代码中没有出错。This Eager evaluation feature is useful to debug and verify that you aren't making mistakes in your code.

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

若要在控制台中运行 JavaScript**** 表达式并选择性地显示结果,请选择 EnterTo run the JavaScript expression in the Console and optionally display a result, select Enter. 然后,你可以编写下一个 JavaScript 代码以在控制台 中运行Then, you may write the next JavaScript code to run in the Console.

连续运行几行 JavaScript 代码

默认情况下,在单行中运行 JavaScript 代码。By default, you run JavaScript code on a single line. 若要运行一行,请键入 JavaScript,然后选择 EnterTo run a line, type your JavaScript and then select Enter. 若要绕绕单行限制,请选择 Shift + Enter 而不是 EnterTo work around the single-line limitation, select Shift+Enter instead of Enter. 与其他命令行体验类似,若要访问之前的 JavaScript 命令,请选择 Arrow-UpSimilar to other command-line experiences, to access your previous JavaScript commands, select Arrow-Up. 控制台的自动完成 功能是了解 不熟悉的方法的一种很好的方法。The autocompletion feature of the Console is a great way to learn about unfamiliar methods. 若要尝试,请完成以下操作。To try it, complete the following actions.

  1. 打开“控制台”。Open the Console.
  2. 键入 docType doc.
  3. document 下拉菜单中选择。Choose document from the dropdown menu.
  4. 选择 tab 密钥进行选择。Select the tab key to choose it.
  5. 键入 .boType .bo.
  6. 选择 tab 获取 document.bodySelect tab to get document.body.
  7. 键入另 . 一个,以显示当前网页正文中可用的属性和方法的完整列表。Type another . to display the complete list of properties and methods available on the body of the current webpage.

有关使用控制台的所有方法详细信息,请导航到****作为 JavaScript 环境的控制台For more information about all the ways to work with Console, navigate to Console as a JavaScript environment.

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

在浏览器中与当前网页交互Interact with the current webpage in the browser

控制台有权访问浏览器的 Window对象。The Console has access to the Window object of the browser. 您可以编写与当前网页交互的脚本。You may write scripts that interact with the current webpage. 若要尝试,请完成以下操作。To try it, complete the following actions.

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

  2. 复制并粘贴以下代码段。Copy and paste the following code snippet.

    document.querySelector('h1').innerHTML
    

复制顶部标题 (h1) DOM 中的内容并显示在控制台中

您还可以更改它,而不是仅从网页中读取。Instead of only reading from the webpage, you may also change it. 若要尝试,请完成以下操作。To try it, complete the following actions.

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

  2. 复制并粘贴以下代码段。Copy and paste the following code snippet.

    document.querySelector('h1').innerHTML = 'Rocking the Console';
    

在控制台中向 DOM 写入文本

将网页的主要标题更改为 "摇动控制台"。You changed the main heading of the webpage to Rocking the Console. 控制台 实用程序 方法使访问和操作当前网页变得容易。The Console Utility methods make it easy to access and manipulate the current webpage. 有关详细信息,请导航到 控制台实用程序 API 参考For more information, navigate to Console Utilities API reference. 例如,若要在当前网页中所有链接周围添加绿色边框,请完成以下操作。For example, to add a green border around all the links in the current webpage, complete the following actions.

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

  2. 复制并粘贴以下代码段。Copy and paste the following code snippet.

    $$('a').forEach(a => a.style.border='1px solid lime');
    

使用控制台操作选定元素

有关使用 DOM 的信息,请导航到"使用控制台与 DOM 进行交互"。For more information about working with the DOM, navigate to Use the Console to interact with the DOM.

详细了解控制台Learn more about Console

有关控制台详细信息 请导航到"控制台参考"、"控制台实用程序 API参考"和"控制台 API 参考"。For more information about the Console, navigate to Console reference, Console Utilities API reference, and Console API reference.

与 Microsoft Edge 开发人员工具团队联系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 中的“发送反馈”图标