Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明

0oD三一o0

文章最后更新时间:2022年06月21日已超过668天没有更新。

Microsoft Edge浏览器附带内置 Web 开发工具,称为 Microsoft Edge DevTools。 DevTools 是一组 Web 开发工具,显示在浏览器中呈现的网页旁边。 DevTools 提供了一种用于检查和调试网页和 Web 应用的强大方法。 甚至可以在 DevTools 环境中编辑源文件并创建网站项目。

使用 DevTools 可以执行以下操作:

  • 使用具有可视界面的 实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置,包括.html``.css``.js文件格式和.png文件格式。

  • 模拟网站在不同设备上的行为方式,并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。

  • 使用断点调试和实时控制台 调试JavaScript。 查找 Web 应用的内存问题和呈现问题。

  • 查找产品中的辅助功能、性能、兼容性和安全问题,并使用 DevTools 修复找到的辅助功能问题。

  • 使用开发环境将 DevTools 中的更改与文件系统和 Web 同步。

如何打开开发工具

在Microsoft Edge中,可以通过以下任一方式使用鼠标或键盘打开 DevTools。 打开哪个工具取决于打开 DevTools 的方式。

主要方式:

操作生成的工具
右键单击网页上的任何项,然后选择 “检查”。“元素”工具,其中扩展了 DOM 树以显示右键单击的页面元素。
Ctrl+Shift+I(Windows、Linux)或 Command+Option+I (macOS)。以前使用的工具或 欢迎 工具。
按 F12以前使用的工具或 欢迎 工具。

其他方法:

操作生成的工具
在Microsoft Edge工具栏上,选择设置和更多 (Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明) >更多工具 > 开发人员工具。以前使用的工具或 欢迎 工具。
Ctrl+Shift+J(Windows、Linux)或 Command+Option+J (macOS)。控制台工具。
Ctrl+Shift+C(Windows、Linux)或 Command+Option+C (macOS)。“元素”工具,其中扩展了 DOM 树以显示元素<body>
按 Shift+F10 下以打开右键单击菜单。 若要选择 “检查”命令,请按下,然后EnterUp Arrow“元素”工具,其中扩展了 DOM 树以显示元素<html>
按 Tab 下并 Shift+Tab 将焦点放在页面元素上。 然后按 Shift+F10 下以打开右键单击菜单。 若要选择 “检查”命令,请按下,然后EnterUp Arrow“元素”工具,其中扩展了 DOM 树以显示重点页面元素。

通过右键单击网页中的项打开 DevTools

打开 DevTools 的一个好方法是右键单击网页上的项,然后选择 “检查”

Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明

DevTools 随即打开,在 Elements 工具的 DOM 树中突出显示了右键单击的元素:

Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明

使用Microsoft Edge工具栏打开 DevTools

在Microsoft Edge工具栏上,可以选择设置和更多 () > ... 更多工具 > 开发人员工具:

Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明

打开新选项卡时,让 DevTools 自动打开

若要让 DevTools 在浏览器中打开新选项卡时自动打开:在命令行中,打开Microsoft Edge,传入--auto-open-devtools-for-tabs标志,如下所示:

Windows命令提示符:

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

Windows PowerShell:

Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"

bash shell on macOS:

/Applications/Microsoft\ Edge\ Beta.app/Contents/MacOS/Microsoft\ Edge\ Beta --auto-open-devtools-for-tabs

Linux 上的 bash shell:

microsoft-edge-dev --auto-open-devtools-for-tabs

关闭 F12 键盘快捷方式

防止按下打开 F12 DevTools:

  1. 在Microsoft Edge,去edge://settings/system

  2. 在“ 开发人员工具 ”部分中,在 按下 F12 键切换时关闭“打开 DevTools ”。

    Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明

键盘支持

可以使用鼠标或键盘与 DevTools 交互。 键盘快捷方式提供了访问功能的快速方法,并且是辅助功能所需的。 各种工具越来越多地通过键盘和辅助技术(如屏幕阅读器)访问。

使用辅助技术查看 键盘快捷方式 和 导航 DevTools

更改 DevTools 停靠在浏览器中的位置

可以将 DevTools 停靠在浏览器的右侧、左侧或底部,或将其撤并到单独的窗口中。 请参阅更改 DevTools 放置位置(取消停靠,停靠到底部,停靠到左侧)

放大或缩小 DevTools

DevTools UI 是使用 HTML 和 CSS(如网页)实现的,因此可以使用标准键盘快捷方式进行放大和缩小。 DevTools 的缩放级别和呈现的页面是独立的。

若要缩放浏览器的 DevTools 部分,请执行以下操作:

  1. 如果焦点尚未放在 DevTools 上,请单击 DevTools 中的某个位置。

  2. Ctrl++Ctrl+- (Windows或 Linux) 。 或者,按Command++Command+- (macOS) 。

Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明

若要缩放呈现的页面,请单击该页面,然后使用与上面相同的键盘快捷方式。

将缩放还原到 100%:

  1. 请确保焦点位于浏览器的所需部分(DevTools 或呈现的页面)上。

  2. Ctrl``NumPad0+按Ctrl+0或 (Windows或 Linux) 或Command+0 (macOS) 。

若要缩放 DevTools 设置:

  1. 在 DevTools 设置中,单击右上角的 “关闭 (x) ”。

  2. 更改 DevTools 的缩放级别,如上所述。

  3. 单击设置 ( 设置Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明) 按钮。

若要使用命令菜单缩放 DevTools:

  1. 单击 “自定义并控制 DevTools (Microsoft Edge浏览器内置Web开发工具——DevTools打开与关闭方式说明) 菜单按钮,然后选择 “运行”命令。

  2. 在 命令菜单中,开始键入 缩放,然后选择缩放命令:

    • 重置缩放级别

    • 放大

    • 缩小


免责声明:本文来自Microsoft Edge DOC,不代表0oD三一o0的观点和立场,如有侵权请联系本平台处理。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,7751人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码