打开 Microsoft Edge DevToolsOpen Microsoft Edge DevTools

有很多方法可以打开 Microsoft Edge DevTools,因为不同的用户希望快速访问 DevTools UI 的不同部分。There are many ways to open Microsoft Edge DevTools, because different users want fast access to different parts of the DevTools UI.

打开"元素"面板以检查 DOM 或 CSSOpen the Elements panel to inspect the DOM or CSS

通过以下每个任务,您可以检查 DOM 节点的样式或属性。Each of the following tasks enable you to inspect the styles or attributes of a DOM node.

  • 将鼠标悬停在元素上,打开上下文菜单 (右键单击) ,然后选择"检查 "。Hover on the element, open the contextual menu (right-click), and choose Inspect.
  • 选择 Control + Shift + C (Windows、Linux) Command + Option + C 或 (macOS) 。Select Control+Shift+C (Windows, Linux) or Command+Option+C (macOS). 有关详细信息,请导航到 Microsoft Edge DevTools 键盘快捷方式For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

检查选项

打开控制台面板Open the Console panel

通过以下每个任务,您可以打开 控制台 窗格以查看记录的消息或运行 JavaScript。Each of the following tasks enable you to open the Console pane to view logged messages or run JavaScript.

打开上一个面板Open the previous panel

若要跳转到已打开的上一个面板,请选择 Control + Shift + I "Windows (、Linux) 或 Command + Option + I (macOS) "。To jump to the previous panel that you had open, select Control+Shift+I (Windows, Linux) or Command+Option+I (macOS). 有关详细信息,请导航到 Microsoft Edge DevTools 键盘快捷方式For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

打开 Microsoft Edge DevToolsOpen Microsoft Edge DevTools

若要打开 DevTools,请使用以下任一选项。To open DevTools, use either of the following options.

  • 使用 Microsoft Edge UI。Use the Microsoft Edge UI.

    1. 选择设置和更多 ( ... ) 图标>更多工具 > 开发人员工具Choose the Settings and more (...) icon > More Tools > Developer Tools.
  • 使用键盘。Use the keyboard.

    • 选择 F12Control + Shift + I (Windows、Linux) Command + Option + I 或 (macOS) 。Select F12 or Control+Shift+I (Windows, Linux) or Command+Option+I (macOS).

有关详细信息,请导航到 Microsoft Edge DevTools 键盘快捷方式For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

从 Microsoft Edge 主菜单打开 DevTools

自动打开每个新选项卡上的 DevToolsAuto-open DevTools on every new tab

若要自动打开每个新选项卡上的 DevTools,请从命令行打开 Microsoft Edge 并传递 --auto-open-devtools-for-tabs 标志。To auto-open DevTools on every new tab, open Microsoft Edge from the command-line and pass the --auto-open-devtools-for-tabs flag.

  • Windows (CMD) CMD (Windows)
  • PowerShell (Windows) PowerShell (Windows)
  • bash (macOS) bash (macOS)
  • Bash (Linux) bash (Linux)

start msedge --auto-open-devtools-for-tabs

打开或关闭 F12 键盘快捷方式Toggle the F12 keyboard shortcut on or off

若要更改 F12 打开 DevTools 的键盘快捷方式设置,请完成以下操作。To change the F12 keyboard shortcut setting that opens the DevTools, complete the following actions.

  1. Choose the icon the Settings and more (... ) icon > Settings.Choose the icon the Settings and more (...) icon > Settings.

  2. 搜索设置中,输入 Developer ToolsIn Search settings, enter Developer Tools.

    按 F12 键时打开 DevTools 设置

  3. 选择 "按 F12 键时打开 DevTools",将设置切换为关闭 (或打开) 。Choose Open the DevTools when the F12 key is pressed to toggle the setting to off (or on). 将设置切换为关闭以阻止 F12 键盘快捷方式打开 DevTools。Toggle the setting to off to stop the F12 keyboard shortcut from opening DevTools.

    按下 F12 键时打开 DevTools 设置已关闭

  4. 将切换设置为关闭后,选择以确认 F12 DevTools 不再打开。After you set the toggle to off, select F12 to confirm that DevTools no longer open.

    备注

    在按下 F12 键时关闭"打开 DevTools" 设置后,若要打开 DevTools,请完成以下操作之一。After you turn off the Open the DevTools when the F12 key is pressed setting, to open the DevTools, complete one of the following actions.

    • 选择 Ctrl + Shift + ISelect Ctrl+Shift+I.
    • 打开上下文菜单 (右键单击) > 检查Open the contextual menu (right-click) > Inspect.

联系 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 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.