与Windows 10的前代Internet Explorer 11的F12开发工具相比，Windows 10的新默认浏览器Microsoft Edge的开发人员工具具有新颖的设计和一些新功能。

在许多开发人员看来，Microsoft Edge的开发工具是否能与受欢迎的竞争对手（即其他现代浏览器，例如Mozilla Firefox和Google Chrome）中的开发工具相媲美的问题自然而然。

在这篇文章中，我们尝试回答这个问题，并弄清Edge的F12开发工具是否真的值得使用。 我们将其功能与Firefox的Developer Tools和Google Chrome的DevTools进行比较 。

打开开发工具

在所有3种情况下，按F12均可打开开发人员工具：Firefox中的Developer Tools，Chrome中的DevTools和Microsoft Edge中的F12 Dev Tools。 这是Edge的F12开发工具的正式名称的键盘快捷方式。

打开Edge的开发工具时，您会立即遇到其最着名的缺点之一：当前无法将工具固定到现有窗口 。 尽管可以通过将开发工具窗口固定在屏幕底部来跟踪Firefox Developer Tools和Chrome DevTools屏幕上发生的事情，但您（当前）无法使用Edge进行操作。

微软的开发人员声称，他们将在以后的更新中解决此问题。

检查DOM

DOM Explorer工具（快捷方式： CTRL + 1 ）是Microsoft Edge的F12开发工具的第一个选项卡。 其布局和总体设计与Chrome的“ 元素”选项卡和Firefox中的“ 检查器”选项卡非常相似，但是功能明显不同。

在Edge中，您可以查看呈现HTML文档，相关CSS样式以及在每个元素上注册的事件处理程序。 您还可以找到有关带有计算值CSS盒模型的小图形，这是两个竞争浏览器都众所周知的。

您可以通过删除当前规则并添加新规则来试验CSS规则 ，并且可以在称为“更改”的单独子选项卡（位于左侧）中查看摘要更改 。 后者是Firefox Developer或Chrome DevTools都不内置的功能。 它可以为用户提供快速重述，因此这是一个非常有用的选项。

Firefox开发人员工具中的某些功能Edge和Google Chrome当前都无法提供，但是可以极大地帮助设计人员的生活： 字体和动画分析器工具 。

在Edge中，有一个很酷的颜色选择器，尽管它在某种程度上可以补偿用户的使用。 

<div> 
    <img src="https://s2.51cto.com/images/blog/202406/28220244_667ec2840dbaa1524.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="DOM资源管理器">
</div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_网络

与JavaScript互动

Microsoft Edge中的“ 控制台”选项卡（快捷方式： CTRL + 2

Edge的F12开发人员工具的控制台工具具有出色的自动完成功能 ，可以帮助您使用命令，但是与Firefox和Chrome开发人员工具中的工具相比，它的知识似乎较少 。

Edge 将错误，警告和消息分开，这是一个很大的帮助，尽管这不是其他两个工具箱所没有的。

Firefox的Console似乎是这三个开发工具中最专业的，因为它还分别显示了其他类型的问题：网络，CSS，安全错误和日志消息 ，并允许您通过Console界面与它们进行交互，而不仅仅是JavaScript错误。 

<div> 
    <img src="https://s2.51cto.com/images/blog/202406/28220244_667ec2849250a90320.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="安慰">
</div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_linux_02

了解您的代码在做什么

调试器工具（快捷方式： CTRL + 3

“监视”窗格显示变量值，“调用堆栈”模式显示导致当前状态的函数调用链，“断点”模式显示您已设置的断点的列表。

利用Edge的F12开发工具，您可以在执行过程中暂停代码 ，并逐行浏览代码。 您还可以选择提高已编译或缩小JavaScript文件的可读性 ，并且可以逐一调试不同的资源 （JavaScript，扩展名等）。

Firefox和Chrome DevTools提供了所有这些功能，因此Edge并未提供出色的调试体验，但它为用户提供了与竞争对手相当的可靠可靠的工具。

<div> 

<img src="https://s2.51cto.com/images/blog/202406/28220245_667ec2852281525332.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="调试器">
</div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_web_03

看一下浏览器与服务器之间的通信

自Internet Explorer 11起，已为Microsoft Edge完全重新设计了网络工具（快捷方式： CTRL + 4 ）。借助此便捷工具，您可以跟踪服务器与浏览器之间的通信 ，并检查各个请求。

您可以按内容类型（例如样式表，图像，媒体，字体，XHR等） 过滤结果 。 您也可以借助网络工具调试AJAX 。

Edge和Firefox的“网络”选项卡提供了非常相似的功能和用户界面。 两者都有一个用户友好的侧栏窗格，可让您逐项查看所选资源的HTTP标头，HTTP正文，参数，相关的Cookie和计时。

Chrome DevTools的“网络”标签没有这样的窗格，但是如果您一个接一个地单击请求，则可以看到相同的信息。 但是，这不是一个直观的解决方案。 

<div>     <img src="https://s2.51cto.com/images/blog/202406/28220245_667ec28585fac57582.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="网络">
</div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_python_04

追踪慢页

“ 性能”选项卡（快捷方式： CTRL + 5 ）可帮助您了解网页缓慢的原因。 借助性能工具，Microsoft通过结合以前的UI响应能力和Profiler工具来创建所有脚本的端到端视图并可视化性能，从而实现了巨大的飞跃。

这个方便的工具可为您提供有关不同类型的CPU使用情况的报告，可让您深入了解网站的框架绘画，还可以通过在时间轴上设置标签来隔离不同的用户方案 。

在测试过程中，我们发现Edge中的Performance工具比Firefox Developer或Chrome DevTools为我们提供了有关速度问题的更多信息 。 Edge中“性能”选项卡的用户界面经过精心设计，可以帮助我们获得许多视觉提示，并且相对易于使用。 如果您想了解更多有关如何使用它的信息，请阅读详细的文档 。 

<div>     <img src="https://s2.51cto.com/images/blog/202406/28220246_667ec28618a8326265.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="性能"></div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_网络_05

诊断内存问题

使用“ 内存”工具（快捷方式： CTRL + 6 ），可以查找内存泄漏 ，这也可能减慢您的网页速度，而且还会影响网站的稳定性 。

借助漂亮的图形，您可以轻松了解内存使用量的增长情况，并且可以在特定点创建快照，从而可以分析内存使用情况。 您还可以比较在页面生命周期的不同点制作的两个快照，以了解它们之间的区别。

Chrome DevTools在“个人档案”选项卡下也有一个不错的内存分析器，而Firefox Developer默认情况下不提供此功能，但是您可以根据需要下载和安装此类插件。 Chrome DevTools的内存探查器相当先进，并且比Edge的探查器功能更多，例如，它允许您随时间记录JavaScript对象分配，从而可以帮助您隔离内存泄漏。 

<div>     <img src="https://s2.51cto.com/images/blog/202406/28220246_667ec2869dc1c32129.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="记忆"></div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_linux_06

在不同的屏幕尺寸上测试您的网站

仿真工具（快捷方式： CTRL + 7

有趣的是，您可以选择以Bing Bot的身份浏览网页 。 您还可以模拟GPS ，并设置不同的分辨率和方向 。

Firefox开发人员工具没有设备仿真工具，但是Chrome DevTools具有如此复杂的仿真器，Edge无法与之抗衡。

例如，Chrome浏览器的仿真屏幕具有插入仿真视图的准确网格，您不仅可以从浏览器配置文件和用户代理中进行选择，还可以从许多设备中进行选择，例如不同版本的iPhone或Samsung Galaxy等。 Chrome DevTools的仿真器还具有方便的“ 缩放”选项 ，您可以在3G，4G，DSL，WiFi等不同网络上测试站点。 

<div>     <img src="https://s2.51cto.com/images/blog/202406/28220247_667ec2872865c10996.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="仿真"></div>

edge F12 Elements 调整位置 edge浏览器f12功能详解_java_07

摘要

总体而言，Microsoft Edge的F12开发工具似乎非常出色。 它提供的功能与其他现代浏览器的流行Web开发工具包非常相似。 Edge的F12开发工具在两个方面具有很强的实力：真正直观，易于使用且经过精心设计的用户界面 以及 性能诊断工具 。

对于这两个功能，可能值得考虑切换到或至少测试Edge。 最大的缺点是缺少将开发工具固定在屏幕底部的可能性，但是我们希望微软能够Swift解决此问题。

翻译自: https://www.hongkiat.com/blog/edge-f12-vs-firefox-chrome/