DevTools Showdown：Edge的F12 vs Firefox vs Chrome
与Windows 10的前代Internet Explorer 11的F12开发工具相比，Windows 10的新默认浏览器Microsoft Edge的开发人员工具具有新颖的设计和一些新功能。
在许多开发人员看来，Microsoft Edge的开发工具是否能与受欢迎的竞争对手（即其他现代浏览器，例如Mozilla Firefox和Google Chrome）中的开发工具相媲美的问题自然而然。
我们将其功能与Firefox的Developer Tools和Google Chrome的DevTools进行比较 。
在这篇文章中，我们尝试回答这个问题，并弄清Edge的F12开发工具是否真的值得使用。
打开开发工具
这是Edge的F12开发工具的正式名称的键盘快捷方式。
在所有3种情况下，按F12均可打开开发人员工具：Firefox中的Developer Tools，Chrome中的DevTools和Microsoft Edge中的F12 Dev Tools。
尽管可以通过将开发工具窗口固定在屏幕底部来跟踪Firefox Developer Tools和Chrome DevTools屏幕上发生的事情，但您（当前）无法使用Edge进行操作。
打开Edge的开发工具时，您会立即遇到其最着名的缺点之一：当前无法将工具固定到现有窗口 。
微软的开发人员声称，他们将在以后的更新中解决此问题。
检查DOM
其布局和总体设计与Chrome的“ 元素”选项卡和Firefox中的“ 检查器”选项卡非常相似，但是功能明显不同。
DOM Explorer工具（快捷方式： CTRL + 1 ）是Microsoft Edge的F12开发工具的第一个选项卡。
您还可以找到有关CSS盒模型的小图形，其中包含计算值，这是两个竞争浏览器都众所周知的。
在Edge中，您可以查看呈现HTML文档，相关CSS样式以及在每个元素上注册的事件处理程序。
它可以为用户提供快速重述，因此这是一个非常有用的选项。
后者是Firefox Developer或Chrome DevTools都不内置的功能。
您可以通过删除当前规则并添加新规则来试验CSS规则 ，然后在单独的名为“更改”的子选项卡（位于左侧）上查看摘要更改 。
Firefox开发人员工具中的某些功能Edge和Google Chrome当前都无法提供，但是可以极大地帮助设计人员的生活： 字体和动画分析器工具 。
在Edge中，有一个很酷的颜色选择器，尽管它可能在某种程度上弥补了用户的不足。
与JavaScript互动
这三者均允许您实时跟踪JavaScript错误，还可以通过输入自己的输入来分析它们。
Microsoft Edge中的“ 控制台”选项卡（快捷方式： CTRL + 2 ）使您可以与站点JavaScript进行交互，就像在Firefox和Chrome开发工具中一样。
Edge的F12开发人员工具的控制台工具具有出色的自动完成功能 ，可以帮助您使用命令，但是与Firefox和Chrome开发人员工具中的工具相比，它的知识似乎较少 。
Edge 将错误，警告和消息分开，这是一个很大的帮助，尽管这不是其他两个工具箱所没有的。
Firefox的Console似乎是这三个开发工具中最专业的，因为它还分别显示了其他类型的问题：网络，CSS，安全错误和日志消息 ，并允许您通过Console界面与它们进行交互，而不仅仅是JavaScript错误。
了解您的代码在做什么
您可以设置监视和断点，以及查看调用堆栈。
调试器工具（快捷方式： CTRL + 3 ）可帮助您了解代码中正在发生的事情，同时查找潜在的错误。
“监视”窗格显示变量值，“调用堆栈”模式显示导致当前状态的函数调用链，而“断点”模式显示已设置的断点的列表。
您还可以选择提高已编译或缩小JavaScript文件的可读性 ，并且可以逐一调试不同的资源 （JavaScript，扩展名等）。
Edge的F12开发工具可让您在执行过程中暂停代码 ，并逐行逐步执行。
Firefox和Chrome DevTools提供了所有这些功能，因此Edge并未提供出色的调试体验，但它为用户提供了与竞争对手相当的可靠可靠的工具。
看一下浏览器与服务器之间的通信
自Internet Explorer 11起，已为Microsoft Edge完全重新设计了网络工具（快捷方式： CTRL + 4 ）。借助此方便的工具，您可以跟踪服务器与浏览器之间的通信 ，并检查各个请求。
您也可以借助网络工具调试AJAX 。
您可以按内容类型（例如样式表，图像，媒体，字体，XHR等） 过滤结果 。
两者都有一个用户友好的侧栏窗格，可让您逐项查看所选资源的HTTP标头，HTTP正文，参数，相关的cookie和计时。
Edge和Firefox的“网络”选项卡提供了非常相似的功能和用户界面。
但是，这不是一个直观的解决方案。
Chrome DevTools的“网络”标签没有这样的窗格，但是如果您一个接一个地单击请求，则可以看到相同的信息。
追踪慢页
通过使用性能工具，Microsoft通过结合以前的UI响应和Profiler工具创建了所有脚本的端到端视图并可视化了性能，从而实现了巨大的飞跃。
“ 性能”选项卡（快捷方式： CTRL + 5 ）可帮助您了解网页缓慢的原因。
这个方便的工具可为您提供有关不同类型的CPU使用情况的报告，可让您深入了解网站的框架绘画，还可以通过在时间轴上设置标签来隔离不同的用户方案 。
如果您想了解更多有关如何使用它的信息，请阅读详细的文档 。
Edge中“性能”选项卡的用户界面经过精心设计，可以帮助我们获得许多视觉提示，并且相对易于使用。
在测试过程中，我们发现Edge中的Performance工具比Firefox Developer或Chrome DevTools为我们提供了有关速度问题的更多信息 。
诊断内存问题
使用“ 内存”工具（快捷方式： CTRL + 6 ），可以查找内存泄漏 ，这也可能减慢您的网页速度，而且还会影响网站的稳定性 。
您还可以比较在页面生命周期的不同点制作的两个快照，以了解它们之间的区别。
借助精美的图形，您可以轻松了解内存使用量的增长情况，并且可以在特定点创建快照，从而可以分析内存使用情况。
Chrome DevTools的内存事件探查器相当先进，并且比Edge的功能更强大，例如，它允许您随时间记录JavaScript对象分配，从而可以帮助您隔离内存泄漏。
Chrome DevTools在“个人档案”选项卡下也有一个不错的内存分析器，而Firefox开发人员默认情况下不提供此功能，但是您可以根据需要下载和安装此类插件。
在不同的屏幕尺寸上测试您的网站
您可以从以下两种浏览器配置文件中进行选择：台式机和Windows 10移动版，以及许多不同的用户代理，包括Internet Explorer的所有台式机和移动版以及IE6，以及Edge的许多竞争对手，Chrome，Firefox，Safari等。
仿真工具（快捷方式： CTRL + 7 ）使您可以在不同的情况下测试站点。
您还可以模拟GPS ，并设置不同的分辨率和方向 。
有趣的是，您可以选择以Bing Bot的身份浏览网页 。
Firefox开发人员工具没有设备仿真工具，但是Chrome DevTools具有如此复杂的仿真器，以至于Edge几乎无法与之抗衡。
Chrome DevTools的仿真器还具有方便的缩放选项 ，您可以在3G，4G，DSL，WiFi等不同网络上测试站点。
例如，Chrome的仿真屏幕上有一个准确的网格，其中插入了仿真视图，您不仅可以从浏览器配置文件和用户代理中进行选择，还可以从许多设备中进行选择，例如不同版本的iPhone或Samsung Galaxy等。
摘要
Edge的F12开发工具在两个方面非常强大：真正直观，易于使用且经过精心设计的用户界面 以及 性能诊断工具 。
它提供的功能与其他现代浏览器的流行Web开发工具包非常相似。
总体而言，Microsoft Edge的F12开发工具似乎非常出色。
最大的缺点是缺乏将开发工具固定在屏幕底部的可能性，但是我们希望微软能够Swift解决此问题。
对于这两个功能，可能值得考虑切换到或至少测试Edge。
翻译自: https://www.hongkiat.com/blog/edge-f12-vs-firefox-chrome/