因为您可以按住 Shift 并继续单击

mdruhul

并从本质上验证五个图标之间的间距是否相等。只需点击几下即可。不必了解代码，只需启动 VisBug，悬停、单击、单击、单击，您就会看到，“哦，看它是这样。是的。每个之间有 15 个像素。” 或者有时你会遇到一些烦人的事情，你会单击一个框，然后单击其父框，你会发现它的顶部距离是 9，底部距离是 8。然后你会想：“我该如何将其居中？某种程度上它介于两者之间。” 并握紧拳头。

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

德鲁：我肯定也经历过，把一些纸举到屏幕上。另外，我要使用的另一个 土耳其 WhatsApp 号码列表 技巧是打开另一个浏览器窗口并使用窗口的边缘来对齐项目。然后，您尝试将所有内容保留在正确的位置，以便在更改代码和刷新时，所有内容仍然保持一致。是的，这不是一种理想的工作方式。

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

亚当：这就是 VisBug 有点不同的地方，但也希望大家熟悉，它非常注重热键修饰符。所以就像你观察专业设计师一样，他们非常精通热键。他们在这里按下热键，放大，在那里按下热键，然后通过键盘进行所有的轻推操作。因此，VisBug 的更改方式非常以键盘为中心。

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

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

亚当：确实如此。因此，当您启动 VisBug 并将鼠标悬停在其中一个工具图标上时，您会看到详细信息。它会弹出一个小弹出菜单，显示选择此工具的热键，并告诉您它可以做什么，以及要进行哪些交互才能获得它们。因此，指南工具会说：“元素指南，只需将鼠标悬停即可。测量某些内容，单击，然后将鼠标悬停在新的内容上。粘性测量是通过按住 Shift 键并单击来实现的，因此它们会持续存在。”



亚当这些指南对于截图也非常有用。因此，如果您正在审查 PR，即使只是作为前端工程师，或者可能是审查 PR 的设计师，这对您来说可能是一种非常强大的方式，可以进行一些高保真度检查。哪一种引导我们进入下一个工具。您想了解下一个工具吗？

德鲁：好，当然。让我们一起努力吧。

亚当：惊人的。下一个是检查工具。这就像……设计师通常不需要所有的 CSS，对吗？当他们期望......我几乎说Firebug，但是Chrome DevTools，你得到了完整的列表，对吧？我选择了这个 H1，所以这里是所有回到浏览器样式表的内容。设计师会说，“浏览器是什么？浏览器有样式表吗？”

德鲁：在滚动面板的黑暗底部。