大约八年前，Bret Victor试图通过提供一种从创建到使用的更快更简单的方法来改变开发人员工具的工作方式。接着，他又上了一门可学习的编程课程，要求开设更简单的开发教学课程。
尽管视频质量糟糕透顶，但“按原则发明”的演示还是大获成功。许多业内人士开始着手创建更多的可视化开发工具。邀请用户使用值并看到即时效果的工具。破坏“编码、部署、测试和调试”周期的工具。相当多的初创公司基于Victor提出的原则开发工具，但从长期来看，这些工具都没有得到重视。
快进到现在。虽然有一些变化，但我们的大多数工具使用起来仍然令人生畏。它们提供了许多功能，并赋予了程序员权力。但是，学习如何使用它们也需要付出很大的努力。
似乎有一个共同的共识，使用拥挤的界面和命令行是一种权利，称自己为“编码器”。
这不是包容性。我不相信像这样的工具是优越的，因为它们工作了这么长时间。我很乐意放弃我的命令行技能，而专注于为我的用户提供良好的用户体验。
浏览器中的开发工具截图
浏览器开发工具。你知道所发生的一切吗?
我认为现在是时候从“专家工具”的概念转向“随着时间的推移使用这个工具会让你成为专家”的概念了。换句话说:
我们的工具不应该让人们觉得“太愚蠢”而不去使用它们，或者奇怪为什么会有这样的功能。
作为一个例子，让我们来看看最近与浏览器捆绑在一起的开发工具。这些都是很好的。在你用来上网冲浪的工具中拥有你构建和测试你的网络产品所需要的一切是很美妙的。
Web开发一直独立于平台和创建工具。您可以使用任何文本编辑器，编写一些HTML、CSS和JavaScript，并在浏览器中进行测试。但是现在web开发变得更加复杂了。我们的工具也随着复杂性的增加而增长。
幕间休息:为什么我们在这里?
我是微软开发工具的主要程序经理。我的重点是微软Edge浏览器的内置开发工具。
这些是Chromium项目的工具，和项目本身一样古老——至少有10年了。它们是一种复杂的机器，提供了许多不同的使用方法。您可以查看并调整CSS，您可以调试脚本，您甚至可以设置本地工作区来编写代码。有了网络部分，就可以深入研究浏览器的呈现，看看代码为什么会变慢。
多年来，它们以一种有机的方式成长，并对网络提出了新的要求。动画和过渡变成了一件事，移动web和响应式web设计。线下优先和服务人员是常见的，绩效是一个大话题。对于这些任务，您在浏览器中都有专门的工具。还有专家，他们爱他们，因为他们能给他们需要的洞察力。
大量的培训材料、文档和会议讨论都涉及到这些工具。它们会解释你如何使用它们来建立良好的网络体验，并详细了解你在做什么。
其他的演讲和出版物试图预测网络的下一个大事件。这些导致了围绕当前实验技术的工装的巨大而短暂的需求。作为浏览器之战的一部分，制造商对这些需求的反应往往过于迅速。他们在已经拥挤不堪的界面上又增加了一项功能。这很容易做到。与用户一起测试以确保其易于理解需要更多的努力。删除内容总是会引起公众的强烈抗议。
在您的浏览器中拥有最好的开发工具已经成为一个优势。开发人员是早期采用者，他们会影响其他人使用您的浏览器。
在过去的几年里，这意味着我们增加了很多只是表面上满足需求的功能。我们满足了开发者社区中少数人的要求，但他们是敢言的少数派。
当你看遥测技术和使用统计数据时情况就不一样了。元素和控制台标签一起占据了主导地位，并占了很大一部分的使用。大多数其他工具都远远落后于它们，其中一些几乎从未被关注过。在keynote上显示的“必须拥有”功能常常无法通过实验阶段，因为它的使用率很快就下降了。这是一个遗憾——它可能对开发人员有很大的帮助。但如果你不迅速行动，利息就会消失。
甚至一些标准工具也勉强维持着微薄的生存。使用断点、观察表达式和侦听器，您可以体验到复杂而深刻的调试经验。这种体验在很大程度上被console.log()的使用所掩盖。
有了这些见解是很好的，所以我们可以集中精力于删除哪些内容以减少复杂性。除了我们不能。对工具当前状态的任何改变都可能让人们感到厌烦。这是可以理解的。改变是很烦人的。开发人员喜欢沿着我们已知的路径，利用我们多年来磨练出来的肌肉和大脑记忆。
这就是当前的状态:许多优秀的、低使用率的工具加在一起，乍一看似乎非常复杂。这对于初学者和忙碌的开发人员来说都是令人沮丧的。
我们怎样才能变得更好?
有一些方法可以让我们的工具变得更好。
可视化工具和交互
上下文工具
工具捆绑
合并文档、最佳实践和工具
可视化工具和交互
对一些人来说，在运行构建并在浏览器中检入它之后调整数字并查看更改可能很有趣。大多数人使用视觉界面会得到更好的结果。这是维克多演讲中的一件大事，很高兴看到自那以后有些事情发生了改变。
例如，Lea Verou构建了一个可视化工具来调整动画和过渡的缓和。
截屏的立方贝塞尔工具由Lea Verou
视觉工具，定义立方贝塞尔曲线，并尝试他们在动画
这很快就成为了开发工具，现在任何CSS动画都可以使用。
开发人员工具中的立方贝塞尔工具的截图
devtools中的三次贝塞尔曲线工具
挑选颜色的人现在也很普遍。动画的视觉表现和用于阴影的小弹出工具是另外的例子。
我非常喜欢它，因为它允许人们调整外观和感觉，并创建引起它的代码。一些CSS语法可能会变得相当复杂，我们正在开发其他东西，比如字体编辑器。
通常你观点的改变会带来有趣的结果。乍一看，浏览器开发工具中的3D视图似乎是多余和奇怪的。用户测试和遥测显示，人们喜欢使用它。
3D工具开发工具的截图
在3D视图中查看文档结构
查看在3D空间中生成的HTML有多复杂，可以让人们了解为什么页面的性能很差。有报道称，z-index的3D表示最终使人们理解了这个概念。
DOM断点是另一个很好的例子。它们允许您使用产品的界面并将其链接到调试工作流。当我在舞台上展示它们时，我得到了“哇”的反馈，但它们已经存在了相当一段时间了。界面的工作和创建界面的代码之间似乎存在很大的脱节。当你仔细想想时，你会发现这没什么意义。
上下文工具
现在有太多的开发工具同时为我提供了所有的选项。您有一个包含大量信息和按钮的主面板，一个显示更多内容的子面板。你通常有另一个菜单来打开更多的功能，或者有一个齿轮来设置偏好。这些都很好，只要你努力根据自己的需要定制它们，并且了解它们是如何工作的。正如你可能已经猜到的那样，这几乎从未发生过。
其他产品已经明白，在需要的时候放弃是一种更好的体验。Keynote, Powerpoint, Photoshop和其他很多软件都是上下文感知的。只有高亮显示或添加图像，才能看到图像编辑工具和信息。工具栏栏只显示当时需要的内容。诚然，由于多年来使用“除了厨房水槽，什么都欢迎”的工具，这在一开始可能会很烦人。但我发现自己更专注于我想做的事情，而不是以后可能会发生的事情。
也许现在是在我们的开发工具中引入更多这方面内容的好时机。把使用变成发现的旅程，而不是试图从一个巨大的提供。
工具捆绑
现在，我们有很多按功能分类的工具。我们有元素，控制台，源，网络，性能，内存，应用程序，安全。即使在我打字的时候，我也会感到疲惫不堪。由开发人员来决定哪个位做什么以及用它做什么。
作为产品经理，我们经常谈论“JTBD”，或者“待完成的工作”。我们产品的用户需要它做什么，最终目标是什么?
根据这些有不同顺序的工具不是很有意义吗?如果我想做的只是调整一个网站的外观和感觉，并玩弄CSS值，内存、性能和应用程序只是噪音。当我想知道为什么我的产品很慢的时候，整个视觉工具推动像素也不是我想要的。
这听起来可能与前面解释的情境行为相似，但有一点不同。这个想法是有主题“我想编辑一个网站”,“我想修复我的应用程序的性能问题”,关闭不适用的工具和使用额外的空间在工具提供指导和文档,经过一步一步的过程。
捆绑领域的其他想法是自动化您将使用某种脚本的部分。例如，该工具发现你的图像很大，而且没有优化。我们不需要学习如何手工完成，我们可以集成ImageOptim或Squoosh这样的工具来帮助你完成。
合并文档、最佳实践和工具
有很多优秀的文档和最佳的web实践。问题是有太多了，你甚至不知道什么是可靠的建议，什么不是。这就是为什么我们大多数人不看医生的原因。相反，我们使用谷歌或直接到Stackoverflow并复制粘贴第一个匹配的结果。理解我们在做什么是以后的事——毕竟我们都是大忙人。
为什么我们不把文档和有洞察力的信息放到我们的工具中呢?作为主题专家，我们很可能会给你好的建议。在上下文中显示信息还意味着您不需要去其他地方。这些信息不会淹没在大量的广告中，也不会遵循某种隐藏的议程。
为了这个目的，我在Visual Studio代码中使用WebHint已经有一段时间了(通过WebHint VS代码扩展)，我也因此成为了一个更有条理的开发者。Webhint是一个web链接工具。它检查您的代码在性能、安全性、可访问性和跨浏览器兼容性方面的问题，并给出如何修复这些问题的提示。
运行在visual studio代码中的webhint的屏幕截图
Webhint在我的代码中告诉我哪里做错了
我最喜欢的一点是，它不仅告诉我哪里出了问题，还告诉我如何修复问题，如果可以的话，还可以链接到相关文档。从本质上说，我是在学习我在开发时所犯的错误，而不是在部署和测试之后所犯的错误。任何我们还没有编写的bug都是一个学习的机会。
虽然这在我的编辑器中很好，但我在浏览器中漏掉了一些类似的东西，现在在Microsoft Edge中有一个实验，在浏览器中添加Webhint作为问题窗格。
开发人员工具中的问题窗格截图
Webhint会出现在开发人员工具的问题窗格中
这可以使测试和避免明显的问题变得更加容易。
事情发生
作为一个产品经理，每一个被我的产品搞得不知所措的用户都觉得我是个失败者。但问题是，您通常不会得到反馈，因为您不愿承认自己不理解开发人员工具。
如果不是命令行专家，或者不知道如何进行调试，就会被认为是失败的。看那些很酷的视频和专家们使用这些工具的讨论可能会令人沮丧，因为不是每个人都有时间去深入了解。最让人沮丧的是，当专家们把让我困惑的事情称为“简单”和“基本知识”时。
所以这里有一个事实:我们都不知道自己一直在做什么。即使作为开发人员工具的工作人员，我也总是能发现一些我从未关注过的新东西。如果你感到不知所措，我们应该帮助你——这不是你的失败。
但是，你可以帮助它变得更好。
向构建产品的团队汇报让你沮丧的事情。
如果您认为有一些文档缺失，或者我们可以做什么使其更容易理解，请告诉我们。
使用浏览器的预览版本，打开这些工具的实验，来体验即将到来的功能，帮助它们变得更好。
对于浏览器开发工具，你可以直接联系我，或者联系我的官方Twitter账户(@EdgeDevTools)。更好的方法是使用浏览器工具内建的反馈机制，因为它会直接进入错误队列。点击右上方的“屏幕前的人”图标即可到达:
开发工具与高亮联系人按钮
联系开发工具团队是构建在开发工具中的。
这将开启一个对话，给你一个机会来描述你的问题。它还会为您创建有问题的页面的截图。你也可以发送遥测和给我们的电子邮件，以要求更多的细节。你可以用任何语言提问——我们有一个翻译团队来帮助我们。
开发人员工具中的联系人对话的截图
在与我们联系时，我们会尽力帮助您提供我们所需要的所有信息。
我们知道这个问题，我们希望工具是你使用和学习的东西，当你使用它们。你不需要已经是这方面的专家。这是一个瘦身、重新安排和寻找新方法来增强下一代开发人员能力的好时机。
我很高兴能与一个致力于简化工作的团队一起工作，并努力满足所有开发人员的需求。有相当多的东西在制造和这些是令人兴奋的时刻。
上一篇：粘性:参与数字体验的途径
