Smashing Podcast 第 37 集与 Adam Argyle：什么是 VisBug？

在本集中，我们将讨论 VisBug。 它是什么，它与 Chrome DevTools 中已有的一系列选项有何不同？ 德鲁麦克莱伦与它的创造者亚当阿盖尔交谈以找出答案。

显示注释

• VisBug 沙箱和游乐场
• 亚当在推特上
• 亚当的个人网站
• YouTube 上的 VisBug
• 可视错误 101

每周更新

• 我们用于在线活动的会议平台：Amanda Annandale 的 Hopin
• CSS 容器查询入门 Stephanie Eckles
• 需要修复的令人沮丧的设计模式：Vitaly Friedman 的生日选择器
• 摇树：Átila Fassina 的参考指南
• Beau Hartshorne 如何改进我们的核心 Web Vitals

成绩单

Drew McLellan：他是一位聪明、热情、朋克工程师，热爱网络，他更喜欢利用自己的技能打造一流的 UI 和 UX，并为周围的人赋能。 他曾在大大小小的公司工作过，目前是在谷歌 Chrome 上工作的开发者倡导者。 他是 CSS 工作组的成员，也是设计调试工具 VisBug 的创建者。 所以我们知道他对设计和用户体验了如指掌，但你知道他拥有的人字拖比任何活着的两足动物都多吗？ 我的粉碎朋友，请欢迎亚当·阿盖尔。

亚当·阿盖尔：你好。

德鲁：嗨，亚当，你好吗？

亚当：哦，我很厉害，你知道的。

德鲁：很高兴听到这个消息。 所以我今天想和你谈谈你的项目，VisBug，一般来说，关于设计调试背后的概念以及它如何适应项目工作流程。 我的意思是，我们已经拥有以开发人员为中心的浏览器调试工具已经有很长一段时间了，我的意思是，现在可能已经有十多年了。 但这些显然非常关注代码。 那么 VisBug 有什么不同呢？ 它试图解决的问题是什么？

亚当：太棒了。 是的，它根源的主要问题是，作为一名前端工程师，我一直与设计师合作，我总是喜欢我们坐下来的那一刻，我会说，“好吧。 我正在做最后的润色。 在我们部署之前，我们还有一两天的时间。 所以设计师，坐下来，你会批评这个吗？ 我希望你在浏览器和手机上打开我的本地主机版本，或者其他什么，然后和我谈谈你所看到的。”

亚当：在做了很多年并且一直喜欢这种互动之后，一段时间后我开始感到内疚，因为这些任务是多么的普通和简单。 他们会说，“这里有一个像素。 这里有五个像素的边距。” 它总是对间距和类型的微调和微调。 我的意思是，很少有这样的情况，“哦，等一下，我花 30 分钟来改变一些角度，或者其他什么，来调整我的 DOM，以便 DOM 可以支持你的请求，”或者其他什么。

亚当：通常是很小的东西。 最后我做了一个调查，调查了谷歌的所有这些设计师。 我当时想，“当你打开 DevTools 时，你会做什么？” 他们只需要基础知识，这听起来很响亮。 所以它诞生于，我想，“这应该更容易。 您不必为了改变汽车座椅的颜色而打开法拉利的引擎盖、移动一大块发动机。 这不公平。 你应该能够触摸汽车座椅并改变颜色，就像一个设计工具一样。” 我当时想，“有些东西可以促进这个工作流程。” 我当时想，“好吧，我想我会破解一些东西，看看我是否能创造出解决方案。”

亚当：这就是一切的开始。 它真的从间距开始，然后是排版。 一旦我有了一个模拟设计工具的选择机制，就像，“我还能做什么？” 它只是从那里开始。 但是，是的，出生在那一刻。

Drew：所以这个想法是客户要求您将徽标放大，而 VisBug 帮助浏览器表现得更像是进行此类调整的设计工具。 如此接近于 Illustrator、Photoshop、Figma 或任何这些类型的东西。

亚当：是的。 该用例也是一个很好的用例。 因为你可能是一个客户，他们说，“哦，我们喜欢这个，”这太经典了，“我们喜欢这个设计，但是蓝色对我们来说很难。” 你就像，“真的吗？” 这就像，人们可以提交表格，你可以赚钱，但你现在想和我谈谈蓝色吗？ 通常它会创建一个完整的循环。 PM 会说：“好的，我们会记下您的请求，然后将其发送给设计人员。”

亚当：但如果设计师在场，并且是他们的浏览器显示它，他们会说，“好吧。 好吧，我只需单击该东西并更改颜色即可。” 您可以通过在浏览器中对更改进行原型设计来完成整个工作周期。 就是这样。 它对现有产品最有效，对吧？ 因为它是一个调试工具。 它不一定是生成工具。 它不会为您创建网站。 可以，但是有点尴尬。

Drew：所以从技术上讲，它是您在 Chrome 浏览器中安装的扩展程序。 那正确吗？

亚当：是的。 这是一个扩展。 当你启动它时，它会下载一个 JavaScript 文件，上面写着“这是一个名为 VisBug 的自定义元素”。 然后你把 DOM 元素，vis-bug 放在页面上。 噗，我只是把它变成一个工具栏，然后开始监听页面上的事件。 我听你的悬停事件，我听你的点击事件。 而且我会尽力拦截它们，而不是与您的主页竞争。

亚当：但是，是的，这就是……它是扩展的唯一原因是它很容易放在你的页面上。 尽管此时它确实有一些跨浏览器的设置。 但它仍然大部分（99.9%）是一个没有依赖关系的自定义元素。 我想我喜欢我使用的颜色库，否则它只是香草。 是的。

Drew：我想这就是 Firebug 的开始，不是吗？ 作为当时的 Firefox 扩展。

亚当：是的。 这就是为什么它被称为 VisBug。 它非常受 Firebug 的启发，但适用于视觉设计师。

德鲁：啊。 我们去吧。 我的意思是，作为音频播客，这可能不是谈论视觉工具的理想格式。 但是，如果您愿意，请让我们了解 VisBug 为您提供的一些工具和选项。

亚当：当然。 这是 VisBug 所做的第一件事，如果您在家或在电脑前，您也可以访问 visbug.web.app，尝试不带扩展名的 VisBug，对吗？

德鲁：啊。

Adam：这是一个 Web 组件，所以我在 visbug.web.app 为您加载了一个网页，看起来它有一大堆艺术板，当然，还有预加载的 VisBug。 这个网站的目标是让你玩、探索和删除。 我认为删除键是最令人满意的工具之一。 你就像，“我可以对页面做什么？” 你会说，“好吧，我可以摧毁它。”

亚当：我这样做是为了让你可以按住删除，它会找到下一个……这对于删除来说是相当困难的。 你删除一些东西，它会选择下一个兄弟姐妹。 所以它将永远选择下一个兄弟姐妹。 如果你按住 delete 直到你删除整个......无论如何，非常令人满意。 点击刷新，一切都回来了。 但是 VisBug 附带的第一个工具，所以当你启动它时，就是指南工具。 我过去常常把纸放在屏幕上，或者我会去买一个系统扩展，让我可以对事物进行分类并创建线条。

亚当：因为，是的，对于很多设计师来说，对齐在某个时候变得非常直观，对吧？ 他们不一定想要数学对齐，对吗？ 这就是排版具有光学字距调整的原因。 这不是数学字距调整。 这是人为的字距调整。 因此，指南工具植根于设计师的许多细节都在放大东西，检查对齐方式。 间距好不好？

Adam：这就是指南工具要做的第二件事。 当您启动它并且只需将鼠标悬停在某些东西上时，您会看到您悬停的元素周围有一个小框。 然后出现虚线指南，就像统治者通常会做的那样。 就像在 Sketch 和 Zeplin 中悬停并获得这些指南一样，这是相同的概念，只是存在于您的页面上。 如果你点击某个东西，然后将鼠标悬停到一个新的目的地，你就会得到测量工具。 测量工具以像素为单位，它们是计算出来的……所以从视觉上看，它之间有多少像素。 不是别人说的。 它不是把所有的间距加起来，只是你点击这个东西，它离另一个盒子这么远。

亚当：我认为这真的很有帮助，因为你可以按住 shift 并继续点击，基本上可以验证五个图标之间的间距是否相等。 只需点击几下。 不必知道代码，只需启动 VisBug，悬停，单击，单击，单击，您就会看到，“哦，看它。 是的。 每个像素之间有 15 个像素。” 或者有时你会得到一些令人讨厌的东西，你会点击一个框，然后点击它的父框，你会发现它的顶部距离是 9，底部距离是 8。 然后你会说，“我将如何将其居中？ 不知何故介于两者之间。” 并握拳。

Adam：但至少您可以使用指南工具轻松轻松地看到它。 是的，这就是指南工具。

德鲁：我肯定去过那里，把纸片放在屏幕上。 而且，我会使用的另一个技巧是打开另一个浏览器窗口并使用窗口的边缘来对齐项目。 然后您尝试将所有内容保存在正确的位置，以便在您更改和刷新代码时，所有内容仍然排成一行。 是的，这不是理想的工作方式，所以。

亚当：不是一种理想的工作方式。 是的。 还有下一个……所以，哦，第一个版本非常松散。 它没有折断，它只是竖起了一个十字准线，这是我稍后会添加的功能。 所以有些用户会说，“嘿，我喜欢捕捉，就像我的设计工具一样。 但是如果我想要一个松散的测量值怎么办？ 或者我想做一个信，我想测量一个信，而不是它的信箱？” 因此，这个指南工具可以很容易地更改为具有修饰键。

Adam：这就是 VisBug 有点不同的地方，但也希望是熟悉的，它在热键修饰符上非常重。 因此，就像您观看专业设计师一样，他们非常精通热键。 他们在这里按热键，放大，在那儿按热键，然后只是在键盘上轻推。 所以 VisBug 在你改变事物的方式上非常以键盘为中心。

Adam：也是因为 VisBug 允许多选，它可以同时改变 100 个项目的间距。 它是相对的。 所以无论如何，它有一些有趣的怪癖，但修饰符概念中的键盘非常重要。 您可以在许多工具中保留选项、转换或命令，并获得不同的东西，或者在那里获得一种新的功能。

德鲁：所以它是学习键盘快捷键真正值得的工具之一。

亚当：确实如此。 因此，当您启动 VisBug 并将鼠标悬停在其中一个工具图标上时，您会看到故障。 它会弹出一个小弹出菜单，显示选择此工具的热键，并告诉您它可以做什么，以及为了获得它们需要进行哪些交互。 所以指南工具说，“元素指南，只需悬停。 测量一些东西，点击，然后悬停一些新的东西。 粘性测量是移位加点击，因此它们会持续存在。”

亚当：这些指南也非常适合截图。 因此，如果您正在审查 PR，即使只是作为前端工程师，或者可能是设计师审查 PR，这可能是您进入那里的一种非常有效的方式，并且，是的，进行一些高保真检查。 哪种方式引导我们进入下一个工具。 您想了解下一个工具吗？

德鲁：是的，当然。 让我们去吧。

亚当：太棒了。 下一个是检查工具。 而这个就像......设计师通常，他们不想要所有的CSS，对吧？ 当他们期望... 我选择了这个 H1，所以一切都回到了浏览器样式表。 设计师会说，“浏览器是什么？ 浏览器有样式表吗？”

德鲁：在那个滚动面板的阴暗底部。

亚当：阴暗的底部，对吧？

德鲁：是的。

亚当：就像你剥掉了所有的层，然后你就像，“哦，我不再喜欢这些层了。” 这里的检查工具说，“啊，设计师，我知道你想要什么。 这只是边框颜色。” 基本上，只给我一些独特的东西，所以不要只用 CSS 属性来覆盖我。 我最感兴趣的是颜色、排版和间距。 所以我要看看边距、行高、字体系列真的很重要，对吧？ 有一个完整的扩展只是为了告诉您页面上的字体系列是什么。

Adam：在 VisBug 中，这只是检查工具中的一个项目。 因此，您只需启动 VisBug，点击检查，然后将鼠标悬停在任何版式上，它就会告诉您字体系列。 所以，是的，它试图让设计师专注于它所呈现的东西，是的。

Drew：所以该工具没有显示任何继承的样式。 那正确吗？

亚当：没错。 除非它们是继承的和独特的。 所以如果他们... 文本颜色或其他东西，如果文本颜色不是字面意义上的继承这个词，它会告诉你这是一个计算值，它很有趣。

德鲁：是的，这真的很有用……是的。 帮助您专注于真正适用于某事物的一个实例的事物，这显然是您想要改变的。 我的意思是，我想这可能真的很有用，所有这些工具都会非常有用，就像你提到的那样，获得利益相关者的反馈。 并且有点与客户互动。

Drew：我想它在屏幕共享上同样有效，就像我们现在必须做的那样，越来越多。 您不必与某人坐在电脑前，您可以坐在通话的另一端并共享您的浏览器并这样做。 我想当客户不能指着屏幕说——

亚当：当然。

Adam：将实时网页变成看起来像 Zeplin 画板的东西总是很神奇。 有人会说，“什么……我们是不是去了新的地方？” 你会说，“不，这是你的产品。 我们只是在视觉上与它互动。” 是的，它可以非常好。

Drew：您是否见过 VisBug 的其他有趣用例或您认为可能有趣的用例？

亚当：是的。 所以，是的，有这么多，很难开始。 哦，重要的是开发人员与开发人员之间的沟通。 VisBug 对计算值起作用。 因此，它不会查看您创建的值。 这真的很好，因为您正在测量和检查绝对最终结果，以了解像素在屏幕上的计算方式。 这真的很好，以这种方式进行对话，因为你正在研究结果，而不是创作方面。

亚当：你可以回过头来想，“好吧，如果这是我们在视觉上得到的，我们在创作方面是怎么出错的？” 下一个工具也是可访问性检查工具。 因此，inspect 工具可以轻松查看元素上的样式，并以非常适合设计人员的方式分解它们。 可访问性工具可帮助您检查页面上的所有元素，并显示它具有的任何可访问属性，我希望这使得它更容易验证某事已完成。

亚当：所以一个公关......而且事情经常被创造出来。 因此，这又是开发人员对开发人员、设计人员开发人员，您正在审查界面。 这太关键了。 如果您正在查看一个界面并且很好奇，VisBug 会为您提供一个用例。 还有一些用例，您可以在浏览器中对原型进行排序。 所以我们讨论了一个，客户想尝试蓝色。 好的，这是一个非常简单的场景。

亚当：但还有其他的。 如果您在 VisBug 上点击命令 D，您将复制一个元素。 它并不关心你在复制什么。 所以你可以复制一个标题，在两个标题之间添加一些间距，然后在浏览器中制作一个变体。 你双击标题文本，它变成一个可编辑的文本字段，你去尝试一个新的标题，看看标题是如何适合的。 去调整一些间距，你就省去了所有这些开发人员的工作，找到一个源文件和所有那些东西，你只是……

亚当：所以是的，它可以帮助你探索和验证。 这有点奇怪……我的意思是，这是 DevTools 所做的很多事情，对吧？ 它是在你完成之后出现的，它实际上并不经常给你源代码，你从 DevTools 中复制代码的频率也不高。 您可以复制一个键值对。 比如，“哦，我改变了这种风格。” 但是，是的，无论如何。

德鲁：嗯，嗯（肯定）。 是的。 我可以想到一些你可能想要复制项目的特别视觉案例。 您可能希望获取页面的整个部分并将其复制以模拟如果内容比您预期的多得多的情况。

亚当：是的。 这就是混沌测试用例。

德鲁：是的。

亚当：当然。

Drew：这是我们所有人都必须处理的事情，使用基于 CMS 的系统和所有这些有趣的任务进行设计。

亚当：是的，这也是一个非常重要的用例。 因为我这样做是为了……是的，头条新闻，就像我说的那样。 你只要双击一些文字，我就去敲击键盘。 Blah，blah，blah，blah，然后打了一堆空格，blah，blah。 我想，“好吧，布局怎么样？ 哦，效果不错。 好的，好的，我可以继续下一件事了。 如果我重复这四次会发生什么？ 一切之间还有空间吗？ 它会在下一个项目旁边流动吗？”

亚当：对那种内容混乱的模拟来说真的很棒。 很短的标题，很长的标题，没有朋友，有一百万个朋友。 您如何在 UI 中处理这些用例？ 是的。

Drew：所以它适用于任何基于浏览器的内容。 那么 PWA 和常规网页一样吗？

亚当：是的，确实如此。 所以如果你安装了 Spotify，我一直都这样做，我已经安装了 Spotify，我会说，“Spotify，你看起来像是一个不可能检查的应用程序。” 但猜猜怎么了？ VisBug 不在乎。 VisBug 覆盖你所有的东西，检查所有的排版。 我为...制作了一个轻主题...哦，我在某处发布了一条推文，其中我制作了 Spotify 的轻主题。

亚当：哦，这是另一个用例，抱歉，用于原型颜色。 我可以在产品本身上创建一个浅色主题，而不必弄乱一堆贴纸，对吗？ 所以有一个重要的平衡心态，我希望 VisBug 帮助人们进入其中，将您的产品用作游乐场。 把它当作……它是如此真实。 它比您的设计组合更真实。 所以多花点时间在里面。 我想你会发现你可以在你的实际产品上做出更有效的设计决策。

Drew：可访问性的案例也特别有趣，因为通常，尤其是这些天，我们在组件库中进行了大量工作，并查看页面的小组件。 并且花费更少的时间来查看所有集成在一起的视图，以创建客户实际与之交互的那种视图。 并且很难关注那些在页面上不可见的更精细的细节，例如可访问性事物、属性。

德鲁：关注不可见的事物是非常困难的。 所以这就是工具可以真正帮助检查某些东西并看到它的地方，是的，它有正确的角色，它 -

亚当：确实如此。 这就是确切的用例。 我希望 PM 能够去验证这些东西。 我希望设计师能够查看可访问性，而不必打开工具，找到 DOM 节点，所有这些都在元素面板中被压缩并且看起来很奇怪。 它只是说，“这是区域属性，如果存在的话，这是标题。” 还有一些其他可访问性工具。 VisBug 附带搜索图标。 搜索图标有多种与之交互的方式。

Adam：所以首先它会查询页面。 因此，如果您知道想要的元素类型或元素类名称，您只需搜索即可，无需使用鼠标查找。 但这也有斜杠命令。 所以 VisBug 中有插件，它们会在页面上执行脚本。 所以如果你曾经有一个书签，你已经保存了三四个……你会说，“我要使用这个，因为它突出了所有的边框，并显示了我的盒子。” 这就像一个调试技巧或其他东西。

Adam：它可能是一个 VisBug 插件。 所以你启动 VisBug，点击斜线，你会得到自动完成，它会向你展示所有不同的插件。 还有一些可访问性非常好，可以覆盖错误以及各种类似的东西。 所以我同意。 可访问性应该更易于访问。 这么说简直是蹩脚。 但它需要更靠近工具带。 而且我认为有时它太远了，也许这就是它被错过的原因。 所以我希望它是否更前面、更中心、更容易得到更多检查。 是的。

Drew：有趣的是，你说 VisBug 可以处理事物的计算值，比如颜色。 这是否意味着，如果您有几个具有不同不透明度级别的分层元素，您将能够测量屏幕上呈现的确切颜色，而不是 -

亚当：哦。

德鲁： ……查看单个元素并尝试以某种方式解决？

亚当：这是一个非常好的问题。 所以我想，如果我理解正确的问题，这是前端的一个典型困难是，是的，你怎么知道你是否有一个半不透明的文本单词，它的颜色是灰色还是白色? 你怎么知道它的对比？ 目前，我们不知道。 所以 VisBug 知道颜色，它会说“50% 灰色”，或者任何你有的颜色。 但它不知道比这更聪明的事情。 它无法…

亚当：我认为在这种情况下你必须做的是创建一个画布，在上面绘制所有图层，然后使用吸管或...所以你将它渲染到画布上，让它们全部粉碎成一个单个绘制层，然后将单个像素值取出，以查看其实际最终计算的灰度在它被分层到其他东西之后是什么。

亚当：我认为有人指定了它，或者我把它作为一个 GitHub 问题，它会很好。 因为 VisBug 可以 100% 促进这一点。 VisBug，在幕后，我已经完成了文本指标，您将鼠标悬停在事物上，它会为您提供有关字体的疯狂信息。 这几乎是太多的信息，比如 x 高度和上限高度，但它甚至更多。 就像，“哦，我在某个时候有点被关闭了。” 所以我必须弄清楚如何在那里找到信号与噪声。

亚当：但是，是的，我喜欢这个思考过程，因为我们应该有一个工具来做到这一点。 如果我们知道如何计算它，我们可以教 VisBug 去做，这将是一个非常酷的功能，与不透明度相关的计算颜色。 爱它。

Drew：是的，我的意思是，这是一种标准情况，即在您不确定对比度是否足以通过可访问性要求的背景下放置文本。 也许不是，也许是对比度太低，然后您想调整值，直到达到对比度良好的程度，但它与客户最初想要的品牌颜色并没有相差太远和东西。

亚当：我称之为碰撞，碰撞直到你通过。

德鲁：是的。

亚当：因为这就是它的感觉。 我想，“哦，我的分数有点短。” 所以就像，我会去我的 HSL 亮度，我会颠簸，颠簸，颠簸，然后看着小数字滴答作响，直到“叮”，我得到一个绿色的复选标记。 我想，“好吧，很酷。” 是的，有时，有些颜色并不酷。 那么，您是否研究过正在进行的大部分 3.0 感知可访问性工作？ 所以我们将不再有 AA 或 AAA，我们将有数字，它包括字体细度之类的东西。 因此，如果它是细字体，它会得到较低的分数，如果它是一个粗字体，它就会……因为有很多对比。

德鲁：是的，不，我什么都没见过，但听起来——

亚当：无论如何，这是一件很酷的探索。

德鲁：这听起来很迷人，是的。 我得找个人谈谈这件事。 那是另一集。 所以，我的意思是，我敢肯定，一些开发人员可能会争辩说，VisBug 所做的所有事情都可以通过 DevTools 中的 CSS 面板来完成。 而且我认为这有点公平，但可能没有抓住重点，是的，你在进行更改时正在操纵 CSS，但它会将一种以设计者为中心的用户界面放在顶部，而不是以开发者为中心的界面。 这是对它的公平描述吗？

亚当：这真的很公平。 老实说，最好的想法都是从 VisBug 毕业的，然后进入 DevTools。 他们已经有了。 所以 VisBug，如果你在任何元素上点击命令选项 C，它会采用每个计算的样式，至少这是唯一的。 再说一次，就像，我们会做一些我们不只是给你所有这些继承属性的事情。 但是将它们全部放在剪贴板上，然后您可以将该样式粘贴到其他地方、样式表、CodePen 中，然后单击几下即可重新创建元素。

Adam：这些交互已经进入了 DevTools，进入了元素面板。 但是，还有其他一些东西没有，那就是 DevTools 是一个单节点检查工具。 VisBug 遵循设计工具的原则，不，我应该能够多选。 我需要能够批量编辑、批量检查。 所以我一直使用 VisBug 来设置间距。 因为我可以突出显示多个元素并看到边距折叠。

Adam：在 DevTools 中你永远看不到它，因为大多数时候你一次只能看到一个节点，虽然有显示多个边距的方法，但不一样。 所以，是的，它有这些非常有趣的小众用例。 另一个是，如果您突出显示...假设您有一个排版系统，并且您有 H1 到 H7，就像在故事书或类似的东西中，您可以在 VisBug 中突出显示所有这些，按住 shift，只需单击所有它们。 Boop，boop，boop，boop，转到排版工具并向上或向下敲击，它会对它们中的每一个进行相对更改。

亚当：所以他们每个人都会向上推或向下推。 而这并不是 DevTools 可以轻松实现的。 所以，是的，它有一些像这样的超级大国，因为它有点不可知论。 并且它准备始终在数组上进行迭代。 是的。

Drew：那么 VisBug 的起源是什么？ 现在它只是一个个人项目吗？ 或者它是一个谷歌项目？ 或者它的状态如何？

亚当：是的。 首先，状态是，它是一个谷歌项目。 它的主要目标是在进入 DevTools 之前成为原型和探索的地方。 至少从谷歌方面来说。 但从我个人的角度来看，我仍然认为它是一个可以完成常见任务的地方，或者可以进行一些优化以完成常见任务。 并且只是为了给更广泛的受众一种查看 DOM 的方式。

Adam：我真的认为 DevTools 非常强大，但也很吓人。 只需其中的一个标签就可以花费一生的时间来学习。 我仍然在 DevTools 中学习东西，并且一直在使用它们。 所以，是的，这在某些方面是一种不同的观众。 更多的是初学者，进来的人，或者甚至像 PM、经理这样的人，他们从不打算编码，但对输出感兴趣。 所以它给了他们，是的，只是轻巧的工具可以进入那里。

Drew：这是你提出的一个有趣的观点，因为我个人经常发现我很难找到一个舒适的工作流程来管理所有这些 DevTools。 你有所有这些幽闭的小面板，你可以将它们分离到另一个窗口，但是你必须跟踪两个不同的窗口。 一旦你打开了几个浏览器窗口，你就不能……你只关注一个，你不知道哪个 DevTools 属于它。

Drew：然后在面板本身中，它有点像狂野西部的用户界面约定。 你会滚动，事情会开始做你没想到的奇怪的事情。 而就用户体验而言，我觉得这一切都是一团糟。

亚当：是的。 是的。

德鲁：你认为这是不可避免的吗？ 可以更好吗？

亚当：我在这里肯定有想法。 是的，我认为这很好......所以假设你现在有一个听众，就像，“我对 DevTools 非常精通。 我不认为他们那么疯狂。” 我会说，“好吧，打开 Android Studio 或 Xcode。 开始一个项目，然后去看看 DevTools，去看看输出。 你现在感觉有多熟悉？” 应该是很陌生吧。 你会看到，“这是垃圾。 他们为什么这样做呢？ 为什么这个面板在这里？” 你的头脑开始思考所有这些问题，为什么和困惑。

Adam：就像，这就是每个人第一次打开 DevTools 时的感受。 所以你必须真正理解这一点。

德鲁：这是不可避免的……我们能做得更好吗？ 或者这只是事物的自然秩序？

亚当：所以这是我目前对此的看法，我认为复杂性真的很容易让自己陷入。 DevTools 就是其中之一，它们天生就很复杂。 没有好的 UI 可以促进很多这些事情。 很多这些东西都是由开发人员构建的。 而且我认为开发人员为开发人员构建工具很好，因为你将拥有......如果这是唯一的方法，或者即使它是一个好方法，你会学习它，你会擅长它，你会觉得舒服的。

Adam：而且所有的 DevTools 都有点奇怪，因为它们是为奇怪的用例而设计的，对吧？ 发展很奇怪。 让我们说实话。 我们制造无形的齿轮和无形的两个四个，我们建造房屋，基本上，有无形的、虚拟的部分。 所以，是的，我们需要奇怪的工具来检查这些东西，并告诉我们它们在输出什么。

Adam：现在，话虽如此，VisBug 所做的，以及我一直在慢慢将东西转移到 DevTools 中的，是更专注的更小的工具，而不是声称可以做很多事情的大型工具。 我认为事情很难做得很好。 这是经典的论点，对吧？ 这是全明星，专家与通才。 两者都不总是完美的。

Adam：但 VisBug 试图做的是，它已经成为专家。 所以指南工具只是做指南。 而且该工具永远不会泄漏到页面的其他工具中。 因此，我正在尝试使用 DevTools 来做更多的事情，DevTools 想要帮助设计师更多，这是 VisBug 帮助激发 DevTools 看到的东西。 我一直在介绍的方式是，而不是制作一个网格编辑器，例如，你可以在哪里……“在一个叠加层中发挥网格的全部功能”，对吗？ “你可以添加曲目，删除曲目，等等，等等，等等。”

亚当：我想，“这听起来很酷，也很复杂。” 我想，“网格太疯狂了，我们不可能为此构建一个 GUI。” So I'm like, “Why don't we just handle grid template columns first, and the ability to manage the tracks in there, almost like they're chips? What if we could just add, and edit, and delete them?” They're much more physical and less of string. I'm like, “Well what we've done is, we've created a micro-experience that solves one problem really well and then doesn't leak anywhere else, and it's also really naive. It's a naive tool.”

Adam: So and a good example of that is the angel tool in DevTools. Have you seen that tool yet?

Drew: No, I haven't.

Adam: Any angle… So this is, I'm calling these type components. So their CSS is typed, and the angle is a type, and many CSS properties will take a type value of angle. And what I was like… Well, angles, those are just a wheel like a clock. Why don't we give someone a GUI so that if they click an angle they can change an angle and snap it to 45, snap it to 90, there's common interactions with just this unit of angle.

Adam: And we made a tool for it. And it's super cool. It looks great, the interaction is great, keyboard accessible the whole nine, and that's an example where I think you can make small focused things that have big impact, but don't necessarily solve some big problem. And yeah, you'll have another tool like Webflow that's trying to create entire design tool and facilitate all your CSS.

Adam: So, yeah, I don't know the right answer, but I do know that an approachability factor comes in when things do less. And so it just kind of makes it a little easier. Like VisBug, you might only know three tools on it. You only use the guides, the margin tool, and then the accessibility inspect tool. Maybe you never use the move tool or the opposition tool. Just, yeah.

Drew: I mean, talking of design tools, we've seen a big rise in the last few years of tools. Things like Figma, which are great for originating new design work in the browser. Is there overlap there with what Figma is doing and what VisBug is trying to do?

Adam: There's definitely overlap. I think they come at it from different directions. One of the things that I'm frustrated with Figma at is not something that VisBug could solve. And I think that design these days, even with the powerful tools and the Flexbox-like layouts that we have, I still think we start wrong when we draw a box on a canvas of a certain size. I'm like, “Sorry, that's just not the web. You're already not webby.”

Adam: Nothing is very content-focused. If I just drop a paragraph into Figma, it gives it some default styles and I'm like, “Why doesn't it do what the web does? Put it in one big long line.” You're like, “Contain it somehow,” right? And so I don't know. I think that Figma is empowering people to be expressive, limitless… What is the phrase I like to use? Yeah, okay, it's expression-centric. That's where I think VisBug and a lot of debug tooling is…

Adam: So yeah, one is empowering expression, and the other one is empowering inspection and augmentation. You need both, I think. I think that in one cycle of a product you're in full expression. You need to not have any limiters. You need it to feel free, create something exciting, something unique. But then as your product evolves and as more teammates get added, and just the thing grows and solidifies, you'll exit a phase of expression and into a phase of maintenance, and augmentation, and editing.

Adam: At which point your Figma files do two things, they get crusty, because your product is more… Well, it's real. Your product has made changes, and design decisions, because it's now in the medium. And so your file starts to look crusty. And then your file also just is constantly chasing production. And that's just a pain in the butt. And so VisBug is sort of waiting. So in the expression phase VisBug's like, “I can't help you very much. I'm just sort of, I'm not that powerful at expression.”

Adam: But then as you have a real product you can inspect it. And yeah, it can inspect anything. It has no limits. It goes into shadow DOM and everything. So yeah, I think they're just different mentalities for different phases of products, yeah.

Drew: So in VisBug if you have made a whole lot of changes, maybe you're sat with a client and you've tweaked some spacing, and you've changed some colors, and you've got it looking exactly how the client wants, they're happy. They obviously now think that all the work has been done.

Adam: It's done.

Drew: Which of course, it's not. 我们明白这一点。 But what is the path? What is the developer journey from that point to… I mean, I presume that it's not practical to save or export, because there's no way to map what you're doing in the browser with those source files that originated that look. But what's the journey? How do you save, or export, or is it, I guess, taking a screenshot? Or what do you do?

Adam: Yeah, there's a couple paths here. And I want to reflect quickly on what we do in DevTools. So let's say, DevTools, we made a bunch of changes, there is the changes tab in DevTools, I don't think very many people know about it, which will surface your source file changes, and some other changes in there that you could go copy paste.

Adam: And yeah, this becomes a hard thing with all these tools that are editing code output, they don't have any knowledge of source or authoring files. I mean, maybe they have source maps, but I think that's a really interesting future. If we get to something where the calculated output could be mapped all the way back to the uncompiled source, that'd be really cool. But until then, VisBug does do similar to what you do in DevTools. Where you just copy paste the sort of pieces.

Adam: But I will share some fun ways to sort of make it even better. So one thing, let's say you made a header change, color change, and a change over here. You can go to the inspect tool, and when you hover on something it will show you a delta. It'll say, “Local modifications.” And if you hold shift you can create multiple sticky pinned inspections. And so you'll go to your header, you'll click it, you'll hold shift, click your other little box, and hold shift to click another little box. And now you have tool tips showing what you changed over the actual items in the page, take a screenshot, and ship it to a dev.

Adam: And they can sort of say, “Okay, I see you changed margin top to 20 pixels. I don't use pixels or margin top in my CSS. So I'll go ahead and change to margin block start two RAM, thank you and bye bye.” And that's kind of nice, is that the editor didn't have to care or know about the system details, they just got to say something visually and screenshot it. So that workflow is nice. It's pretty hands off and creates a static asset which is fine for a lot of changes.

Adam: But if you had a lot of changes and you really changed the page and you wanted to save it, there is another extension called… Let's see. Page, single file. Single file will download the entire current page as a single file HTML element, at which point you could drag that right into Netlify and get yourself a hosted version of your prototype.

Adam: Because what VisBug does is, it writes its styles in line on the DOM notes themself. So save file comes with it all. And I've got a tweet where I went to GitHub and I made… I just totally tweaked the whole site, and it looked cool. And I was like, “All right, save file.” And I saved it, opened it up in a new tab, just dragged it into the new tab and I was like, “Well this is really cool.” Because VisBug's been wanting a feature like this for a while. But it's a whole other extension's responsibility, is taking those third party assets, dealing with all the in line… And anyway, so it's really nice that that exists.

Adam: And so you can deliver a file, if you want to, or host it somewhere, and share multiple links to multiple versions of production. You modified production and then shipped it into netlify, and someone can go inspect it, and it's still responsive at that point too, right? At that point it's not a static comp you're sharing, it's still the live, responsive… Anyway, it's exciting. I mean, there's a future here that's, I think, really, really interesting and not far away.

Adam: It's just like we're a little still stuck, as designers, in our expression land. We're just too happy expressing. And we're dipping our toes into design systems, but even those I think are starting to get a little heavy for designers. And they're like, “Ooh, maybe it's too much system now.” And like, “Ugh, I'm getting turned off. I liked making pretty stuff. And it's a whole new job if you're doing design ops,” or whatever. 所以…

Drew: I like the fact that VisBug takes an approach of not being another DevTools panel, because the interface, it embeds a toolbar on top of your page just like a design toolbar. I guess that was a deliberate move to make it more familiar to people who are familiar with design tools.

Adam: Yep. If you've used Paint or Photoshop, they all come that way. And so it was the sort universal thing, that if I put a toolbar on the left that floated over your content, almost everyone's going to be like, “Well I'll go hover on these and see what my options are. And here's my tools. And I get to go play.” And it made a really nice, seamless interaction there. I do have a really exciting almost finished enhancement to this.

Adam: So, it's so cool to me, but I don't know if everyone else is going to be as excited. And this'll be a mode that you can change in your extension settings, is how do you want to overlay the page? Because right now VisBug puts a toolbar right on the browser page, which the page is rendered normal, and I know this is going to be weird to say that, but okay, so you scroll the page, and the content, and the body is width to width in the browser, right? So it's filling the little viewport.

Adam：我有一个模组，当你启动 VisBug 时，它会获取整个 HTML 文档并将其缩小到画板中。 它看起来像一个画板。 它漂浮在灰色空间的阴影上。 您可以无限平移它。 所以你可以从你的页面画布上滚动，它可以让你做的是，看，假设你有一个很长的页面，你想从上到下测量一些东西，你现在就可以做到，但你会在你去的时候失去上下文。

Adam：嗯，在这个新的 VisBug 缩放场景中，您可以按住键盘上的 option 或 alt，使用鼠标滚轮，或者使用命令点击加减号，然后您可以像放大画板一样缩放网页。 我试着让它尽可能无缝。 所以你进进出出，向下滚动，进出，从……测量……而 VisBug 根本不在乎。 它不断绘制计算覆盖，您可以更改间距。

亚当：因为我认为作为一名设计师，实时看到你页面的鸟瞰图非常重要。 动画还在播放，你们大家。 可滚动区域仍然可以滚动，对吧？ 这个真的很酷。 你就像，“我的整个页面在一个视图中。” 无论如何，它几乎完成了。 在里面-

德鲁：听起来很迷幻。

亚当：这很迷幻。 它在里面，我只需要确保它可以跨浏览器工作，因为它显然正在做一些棘手的事情来让你的实时页面有这种感觉。 但是，是的。

德鲁：太棒了。 是吗……我的意思是，我认为 VisBug 会定期更新并且正在改进中。 我们可能期望在未来看到什么？

Adam：是的，这绝对是我正在开发的功能之一。 我有一个功能……所以，当你点击某个东西时，你会得到一个看起来像手柄的覆盖层，对吧？ 这是一种幻觉，它应该让你感到舒服。 目的是最终使这些手柄可拖动。 但是我必须先解决一些基本问题，例如浏览器中的元素没有宽度。 因此，如果您只是开始抓住宽度，我必须努力使这种错觉感觉正确。

亚当：你甚至可能得不到你想要的结果，因为它可能是一个块级元素，你将宽度拉得更小，而你没有得到它旁边的项目的回流。 你可能想知道为什么。 所以我有原型，你可以在其中拖动角落，拖动元素。 但我真的需要关注设计工具是如何做到这一点的。 他们总是有这个切换按钮。 就像……看，切换开关叫什么？

亚当：但它基本上就像收缩……我称之为收缩包装。 收缩包装我的元素，它是这个元素的宽度是它的内容的宽度，而不是我的元素的宽度，在里面粘上一些东西。 所以我在浏览器中需要类似的东西，覆盖在元素上，这样你就可以在这些之间进行选择，甚至可以让你在块和内联之间进行选择，这样你就可以获得你想要的结果。

Adam：但最终的目标是 VisBug 不希望完全由键盘驱动。 我希望你能够拖动间距。 如果您看到顶部有 12 个边距，您应该可以伸手抓住它，而现在您必须敲击键盘以指定框的顶部需要添加边距。

亚当：所以是的，在战略方面，我有几个怪癖要解决。 但让它更接近设计工具是一个非常重要的目标。 甚至我也会屈服于此。 就像，好吧，如果你想改变宽度并且你会得到一个奇怪的设计，总有办法用 VisBug 摆脱它，就像位置工具真的让你摆脱流程一样。 所以流量正在破坏你的想法，定位工具让你逃脱。

亚当：所以……如果有人真正精通 VisBug，他们会大吃一惊，因为它是无限的，就像，你能带来什么？ 它有一个表达式元素。 绝对有表现力的策略。 但无论如何，长话短说，幻觉是，我只想让它越来越小。 我希望这种错觉就像，“哇，我真的感觉自己像一个设计工具。”

亚当：然后，是的，对导出进行一些改进会很好。 而且，为 DevTools 导出的增强功能会很好，这并不能真正阻止我们。 所以我不知道。 有很多问题，一定要去投票。 我认为我想做的下一个重要功能之一是绿线。 因此，不仅仅是在悬停时显示可访问性叠加层，而是用绿线真正指示一些事情，并公开更多信息，并显示更多信息，我不知道。 是的。

Drew：有点想像这样构建一个 Chrome 扩展程序的过程，我的意思是，假设它都是用 JavaScript 实现的，它与常规 Web 开发有多少相似之处？ 构建 Chrome 扩展程序。

亚当：这是个好问题。 这是……呸，这很难。 这很古怪。 首先，您启动代码的环境不是浏览器。 他们并没有真正让你在那里完全访问。 你可以，如果你真的对它感到棘手，VisBug 不得不毕业，这个更棘手的场景。 所以现在，我曾经在……这会变得如此模糊如此之快。

Adam：因为你的扩展有多个沙箱，隐私问题。 而且它们使在实际页面上执行脚本变得困难，对吗？ 因为您不希望有人在您启动事物或其他东西时提交您的表单，将其提交给他们自己或其他什么。 它可能真的具有破坏性。 所以它有一些这样的怪癖。 有一座桥你必须过。 其中一个一直困扰着 VisBug 的是，VisBug 曾经使用……

Adam：所以这都是自定义元素，自定义元素允许您将丰富的数据作为属性传递给它们。 所以你说的是，customelement.foo=myrichobject，充满了数组或其他什么。 而自定义元素只是将其作为节点本身的一些数据获取。 但是由于我处于这个奇怪的小沙盒世界中，如果我尝试在我的对象上设置类似这样的独特东西，基本上它就会被过滤掉。 他们已经确定某些东西不能……所以我可以将一个字符串传递给我的自定义元素，但我不能将它传递给一个丰富的对象。

亚当：但是，是的，除了这样的小怪癖，一旦你把流量降下来，如果你花时间得到一个汇总场景，这将是一个小时左右的工作，这样你就可以在你的东西中提供 LiveReload ，它可以变得很自然。 老实说，我认为 Firefox 拥有最好的扩展开发体验，如果您精通 CLI，您可以使用一个命令启动某些东西，然后它会安装它，为您提供这些 LiveReload 功能，并为您提供调试工具。 它有点牵着你的手，它真的很好。

亚当：但最终，它有点古怪。 这就是为什么我在那个看起来像一堆画板的演示网站上做了很多工作，因为大多数时候我真的不需要真正的网页来进行 VisBug 测试，只要我有画板模拟各种问题，或者有可访问的东西来查看，然后给我我需要看的内容。 我在浏览器中做了很多工作，就好像它只是一个普通的 Web 应用程序一样。 所以 VisBug 的开发体验真的很简单，除非你试图在浏览器上测试它，然后它就会变得有点混乱等等。

德鲁：这是非常有趣的见解。 所以我今天一直在学习有关 VisBug 的所有信息，你最近在学习什么，Adam？

亚当：我还在提高我的炒锅技术。 所以我想成为一个炒锅的人，我不是在说 90 年代的磁带播放器。 我想翻转蔬菜，让它们在空气中着火，用一些美味的香料覆盖它们，然后把大蒜真正烤焦，让它变得香脆可口。 然后把它放在一张小米饭上，把它滑向你，看看你的想法。

亚当：所以我现在对夏天很兴奋，因为这意味着我可以拿出锅，回到快节奏、热的烹饪环境中，这真的很有趣。

德鲁：太棒了。 听起来很好吃。 亲爱的听众，如果您想从 Adam 那里听到更多信息，您可以在 Twitter 上关注他，他是 @argyleinc，并在 nerdy.dev 上找到他的个人网站。 如果你想试试 VisBug，你可以在 Chrome Web Store 中找到它，你可以在 visbug.web.app 上试用沙盒版本。 感谢您今天加入我们，亚当。 有没有什么离别词。

亚当：不，你真的很好。 这真的很甜蜜。 谢谢你邀请我，我真的很感激。