Insta刚刚获得Facebook官方推荐360并获得苏宁集团战略投资
06-17
作者：Patrick Brosset 原始链接：那是什么（开发）工具？译者：Yodonicc 在日常的 Web 开发中，您通常会使用多少个浏览器 DevTools 面板？一？三？可能没那么多。在本文中，Patrick Brosset 重点介绍了一些人们不使用甚至不了解的工具。
让我们深入了解一下！您是否见过 DevTools 工具箱中还有哪些其他可用工具？您可能正在重复使用相同的几个面板 - 我知道我是这样！但是，你知道吗？事实证明，在 Chrome DevTools（以及其他基于 Chromium 的浏览器，如 Edge）中，有超过 30 (30!) 个单独的面板。 Safari 和 Firefox 的面板较少，但仍然可能比您在任何一天使用的面板都要多。
当我意识到这一点时，我想出了一个愚蠢的游戏，你试图在一分钟内说出尽可能多的面板。在这里玩一下（那个工具是什么？）并试试你的运气。
（没有作弊，好吧）当然，这个游戏很傻。作为一名 Web 开发人员，记住 DevTools 中每个工具的确切名称并不重要。
更重要的是知道如何在需要时使用这些工具。但这款游戏确实证明了一点：工具的数量比人们使用甚至了解的还要多。
这个游戏的整个目标是 - 当一分钟过去并显示完整列表时 - 意识到，“哇，这有很多工具，我什至不知道它们存在。”那么，为什么有这么多呢？让我们面对现实吧，DevTools 中充满了按钮、选项卡和功能。
我们是怎么来到这里的，还有出路吗？爆炸性的故事 在 2000 年代初，Web 开发与现在有很大不同。此时，大部分复杂性在于从服务器生成正确的 HTML 代码。
浏览器的“查看源代码”功能足以调试奇怪的表 colspan 问题。当时，JavaScript 刚刚在网络上起步，而 CSS 还远没有达到今天这种功能齐全的语言。
所以，除了老的alert()调试技巧之外，我们用于前端代码调试的几个工具也非常专业；他们只做一件事。 Venkman 只进行 JavaScript 调试，Aardvark 专注于检查元素，而 Console2 显示漂亮的 JavaScript 日志消息。
Joe Hewitt 将所有这些整合到一个名为 Firebug（火狐扩展）的工具中。对于世界各地的 Web 开发人员来说，这绝对是一场革命。
2006 年左右，Firebug 可能是最常用的前端调试工具，而 Firefox 是占主导地位的浏览器。惊人的！正确的？即使您从未使用过 Firebug 并且最近才开始您的 Web 开发之旅，我敢打赌用户界面感觉很熟悉。
尽管我们现在使用的 DevTools 与以前的 Firebug 没有什么不同，但感觉我们当时需要担心的事情更少了，因此可以帮助他们的工具也更少了。如上面的屏幕截图所示，根本没有太多工具：控制台用于查看日志和执行 JavaScript。
HTML 标签，用于查看和编辑页面的 DOM 和应用的 CSS 样式。 JavaScript 调试器。
“网络”选项卡用于检查下载的资源和 HTTP 请求。快进到 15 年后的今天。
我们使用的浏览器工具的用户界面保持不变，但面板数量却呈爆炸式增长！这是我们的浏览器。以下是 Chrome DevTools 中新面板引入的快速且不完整（且非常近似）的历史记录：年份面板控制台、元素、源、网络、JavaScript Profiler 性能（当时称为时间线）渲染、图层 CSS 概述、网络条件安全性、内存动画覆盖、Lighthouse（当时称为审核）、性能监控、网络请求阻止更改、辅助媒体、WebAuthn、WebAudio、问题内存检查器、记录器性能面板有很多原因导致新面板的数量不断增加。
其中一些是好的，而另一些则更值得怀疑：可用于 Web 平台的功能和 API 的数量持续快速增加。与 15 年前相比，Web 开发人员现在可以在 Web 上做更多的事情。
其中一些内容无法使用我们当时拥有的 4 或 5 个工具轻松调试，因此需要 DevTools 中的一个新面板。我们的学科比过去发达得多。
15 年前，前端 Web 开发可能还没有被认为那么有趣或重要。现在，它已被证明是计算机工程的一个更深层次的领域，不仅需要编程知识，还需要性能优化、可访问性、用户体验、渐进增强等等。
这些事情有时需要专门的工具。为浏览器和开发工具编写代码的人本身也需要工具，有时它们最终会成为新的面板。
Chromium 中的协议监控面板就是一个很好的例子。删除东西真的很难！如果这样做，必然会扰乱人们的工作流程。
因此，事情往往会随着时间的推移而积累。例如，Chrome 具有三种性能优化工具。
性能、性能洞察和 JavaScript 分析器。最后，似乎存在添加新事物而不是改进已有事物的普遍趋势。
我得到它;对于大多数人来说，构建新的东西比修复错误更令人兴奋。但随着时间的推移，这往往会使软件变得更加复杂。
这也可能在 DevTools 中发挥作用。无论如何，我们现在拥有的可能是任何应用程序平台所梦想的最先进的工具套件之一。
但它也是最复杂的工具之一，但没有人充分利用它的潜力。这是一个问题吗？是的！简而言之，DevTools 是一个非常复杂的产品，其用户界面可能令人生畏。
其他产品有五个主要用户场景，而 DevTools 有数十个甚至数百个。您需要模拟手机屏幕吗？检测颜色对比度？字体单位之间的换算？查看 JSON 响应？ DevTools 可以做到这一切！这些只是一些随机的例子。
因此，由于有如此多的选项和功能，用户界面如此复杂以至于新用户在第一次使用时会感到不知所措，也就不足为奇了。然而，即使是经验丰富的用户也不一定知道除了他们习惯的几个面板之外还有什么可用的。
在我看来，这开始成为一个严重的可用性问题，有时会让新手在学习过程中灰心丧气。今天使用 DevTools 的人们可能已经习惯了更易于使用的更新的开发产品。
数字工具的世界正在朝这个方向发生巨大的变化，而浏览器 DevTools 尚未启动。这也不是一个简单解决的问题。
正如我之前所说，我们需要大量专用工具有一些真正的原因。所以，复杂性是需要的，但我认为它应该是选择加入，而不是选择退出！事实上，DevTools 的学习曲线变得非常陡峭，因为从一开始就向用户提供了太多信息，以至于人们必须学会忽略他们不知道或认为不需要的部分。
我们为什么不把它全部清理掉呢？好吧，这很复杂。 DevTools 内置了很多用户场景，并且因为使用 DevTools 的人很多，所以可能会有很多工作流程。
即使是很少使用的工具也是有原因的，少数使用它们的人可能会依赖它们。根据我在 DevTools 工作的经验，删除旧的/未维护的/很少使用的面板以使代码库更易于使用始终被证明是一个坏主意，特别是在没有足够的客户研究的情况下。
事实上，当我在 Firefox 工作时，我们尝试删除 Firefox DevTools 中的字体面板，反应非常直接和激烈——以至于我们把它放回去。我们缺乏必要的客户了解该工具的使用方式以及它支持哪些独特场景。
2006 年，3D 视图面板必须被删除，因为新的（当时的）Firefox 架构不再支持它。六年多后的今天，人们仍在抱怨它的消失（注意，你仍然可以在 Edge 中使用它）！这也是一个很好的例子。
最后一个例子是，Chrome 团队在 2016 年删除了“属性”侧边栏窗格，但后来在看到需求后添加了它。仅仅使用数字并不是衡量工具价值的好方法。
有些工具可能只有少数人使用，但他们可能依赖它们来完成工作。为了能够简化产品，需要进行适当的用户研究以了解各种用户角色和场景（DevTools 有很多！）。
出路 我想提出两个方向，我认为这两个方向在改善 DevTools 的情况方面具有很大的潜力。简化 DevTools 的核心并将其开放给更强大的扩展，以便用户可以制作自己的工具。
承担风险并构建一个完全用户友好的用户界面。强大而简单的核心，通过扩展增强功能 Visual Studio Code 是一款了不起的产品！很多人都在使用它，而不仅仅是 Web 开发人员。
它建立在非常强大的核心之上，并且可以极大地扩展。这样，使用 VS Code 的人员就不必担心人们可能需要的所有功能。
VS Code 有点像 DevTools，因为没有两个人有相同的需求和工作流程，并且有数百种使用该产品的方法。因此，团队的工作是建立一个坚实的基础，允许进行基本编辑，并构建扩展 API，以允许其他人更深入地挖掘平台并添加附加功能。
这样做有很多好处，但我特别感兴趣的是复杂性是可选的。当您第一次安装 VS Code 时，并不会感到不知所措。
它是一个文本编辑器，您可以使用它从一开始就编辑文本。但是，如果您的项目有特殊需求，例如检查代码质量或进行一些自定义语法突出显示，那么您可以安装所有想要获得所需额外功能的精美扩展。
VS Code 的扩展 API 确实深入到了可以自定义编辑器的程度，我认为这是其成功的主要原因。然而，DevTools 的构建方式有所不同。
您还可以在浏览器中安装扩展以向 DevTools 添加新面板，但除了主框架的扩展（例如 React）之外，没有太多有用的扩展。 DevTools 团队几乎制作了 Web 开发人员可能需要的所有工具。
使用浏览器扩展 API 在 DevTools 中创建新面板并不困难，但 API 并不像 VS Code 中那么先进。特别是，无法扩展现有工具以增强其功能。
这是一个严重的限制，我认为它是我们可以使用的有用扩展数量较少的原因。例如，令人惊叹的 Motions DevTools 扩展允许您在线查看和编辑动画。
但它仅限于自己的面板容器，无法与相邻的 Elements 面板集成，这对于简化用户的工作流程和重用现有组件（例如颜色选择器）很有用。我相信我们需要走得更远。
我们需要一组更强大的 API，使我们能够创建某些人可能需要的专用功能，而不会使其他人的默认 DevTools 体验变得复杂。可扩展 Web 宣言与这种方法非常相似。
它主张为第三方开发者提供低级功能，以创建他们自己的体验，如果这些体验被证明很受欢迎，有一天可能会成为核心的一部分。承担风险并设计一个根本上用户友好的 UI 前进和提高 DevTools 地位的另一个急需的方法是愿意承担一些风险，大胆并测试新的 UI 想法。
正如我在简介中所说，DevTools 的结构在大约 15 年来没有真正改变。我认为我们至少应该做一些重新设计。
我们需要将用户界面带入新的一年，开始使用更现代的界面模式，并使整体体验不那么令人生畏。苹果公司 Safari Web Inspector 的开发人员在这段时间尝试了类似的方法。
他们应用了其他产品（例如 XCode 或 iTunes）的一些设计原则，试图简化他们的 DevTools 工具栏。虽然他们现在又回到了更传统的选项卡式导航，这似乎对开发人员来说效果更好，但我很欣赏这种早期尝试，即制作一个更用户友好、更符合人们当时想法的界面。
这也表明，在改变DevTools的用户界面的过程中，需要非常特别的谨慎来驱动开发者。这让我加入了现在正在开发 Edge DevTools 的团队（完全公开，我是这个团队的一员）。
我相信这是目前唯一在这个领域有所作为的团队。我们当前的实验称为“焦点模式”，它实际上是重新设计整个 DevTools 产品用户界面的第一次尝试。
通过在 DevTools 设置中启用“焦点模式”实验，DevTools 用户可以在 Microsoft Edge 的 Canary 和 Dev 预发布渠道中使用焦点模式。事实上，这些渠道的大多数用户应该已经打开了它们，因为我们的团队正在逐步推出该功能并听取用户反馈，以确保这不会破坏现有的工作流程，并且是一个值得欢迎的变化。
根据这些反馈，我们将继续在 Beta 渠道中向用户推出焦点模式，并最终在 Edge 的常规版本中推出。现在，乍一看这似乎并不是一个大的变化，但这只是创建更易于访问的用户界面的迭代方法的第一步。
同样，改变这个产品中的东西很复杂，所以我们的团队正在慢慢地做事情。但如果你仔细观察，就会发现用户界面有几处重大变化，试图让事情变得不那么混乱、更加精简。
最明显的变化是顶部的工具栏。这是一个动画，显示了具有和不具有焦点模式的工具栏的比较。
警告、错误和信息列表现在已从工具栏中消失，而是在控制台和问题面板选项卡上显示为彩色徽章，从而消除了一些混乱。设置、反馈和主菜单图标已分组到右上角的单个菜单按钮中，进一步减少了混乱。
标签现在带有图标，因此更容易查看和区分。这里也与焦点模式有关。
工具栏中的“+”按钮显示所有可用的工具及其图标，使您可以更轻松地重新打开之前关闭的工具，并且可能更容易尝试尚未尝试过的工具。您还可以将标签切换为垂直方向。
将其放置在左侧并隐藏选项卡可进一步减少窗口中心部分的噪音，使您能够专注于代码。此外，它还与人们在其他工具中已经习惯的 UI 模式相匹配（例如 VS Code 中的活动栏或 Edge 中的垂直选项卡）。
最后，DevTools 中的“抽屉”进行了重新设计。抽屉是用户界面的一个区域，当您按键盘上的 Esc 键时出现在底部，通常包含控制台。
它的出现是为了让您可以在使用其他工具时访问控制台。现在所有的浏览器开发工具都有这个功能。
但多年来，Chrome 团队向抽屉添加了越来越多的东西，尤其是一些有用但尚未流行到在主选项卡栏上占有一席之地的小工具（例如，在那里添加了渲染面板）。我认为现在已经很难确定哪个区域有哪个工具了。
Edge——具有聚焦模式——正在采取不同的方法。抽屉现在称为“快速视图”，始终在工具箱底部可见（因此您甚至不需要知道按 Esc 键），并且可用于显示您想要的任何工具。
我对焦点模式的发展方向感到非常兴奋，我迫不及待地想让我们的团队开始探索这个领域的下一步。如果你想尝试 Focus 模式，请确保你有 Edge 的副本（如果你喜欢最新的更改，也可以获取预发布版本），打开 DevTools，如果还没有，请按 F1，然后输入要进行实验，请选中“聚焦模式”复选框。
通过在我们的 DevTools GitHub 存储库中提交新问题，让团队知道您的想法 - 以及您是否有其他想法。我相信，一个既欢迎学习者又包容每个人需求的用户友好型开发工具是可能的，并且我们可以共同使其成为现实。
作为一个社区，让我们对我们友好的 DevTools 团队提出更多要求。每个浏览器供应商都有全职的 DevTools 产品工程团队。
他们不断添加新功能并修复错误，但只有在我们的集体帮助下，他们才能做好自己的工作。如果用户界面不适合您，请告诉他们。
让他们了解您最常见的工作流程。您需要多少次点击？你是否经常忘记东西在哪里？您希望事物以不同的方式命名吗？像这样的输入可能会带来对数百万用户产生重大影响的变化。
如前所述，我们正在积极寻求有关此实验和其他 DevTools 功能的反馈。您可以在我们的 GitHub 存储库中留下评论。
其他浏览器也希望听到有关其开发工具的反馈，您可以通过 Mozilla bugzilla 跟踪器 (Firefox)、Chromium bugzilla 跟踪器 (Chrome) 和 WebKit bugzilla 跟踪器 (Safari) 进行反馈。感谢您的阅读！下次见。
注：特别感谢技术总监大赵（赵达）对本文翻译的审阅和修改。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-18
06-18
06-17
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用