面向设计师的 DevTools

这是一个非常有趣的对话线程，每年都会不断涌现。这个想法是，可能（也许应该）存在一些浏览器工具来帮助网页设计师完成他们的工作。这种工具在一定程度上已经存在了。让我们来看看众多人士和公司对这个话题的看法。

Ahmad Shadeed 去年为我们撰写了一篇文章，介绍了 DevTools 如何在多种方式上对设计师有所帮助，例如更改状态、内容、颜色、变量等等。

以这种方式直观地编辑内容将赋予[设计师]更多控制设计细节的能力，他们可以在浏览器中调整内容，并将结果展示给开发人员进行实现。

---

在一篇名为 “面向设计师的 DevTools” 的文章中，A.J. Kandy 写道，仅仅因为你是设计师，并不意味着你不会编码——但你可能没有达到生产级别，并且可能在其他地方更快。

我可以编辑前端标记；我只是在绘制矩形并将它们排列成用户界面方面快得多。我懂技术，但不是程序员。

这在我们最初分享这篇文章时引发了很多回应和思考。

• Jason Santa Maria: 一个真正的网页设计应用程序
• Jeffrey Zeldman: HTML 和 CSS 的 InDesign？
• Jon Gold: 工具的演变

增强现有的 DevTools 以使其更适合设计师是一回事。Firefox 在这方面做出了巨大的努力，例如他们的 动画工具、flexbox 和网格检查器。与此同时，看到对如何解决问题的全新思路也很棒！例如，谷歌发布了 VisBug，这是一个专门针对设计师的扩展。视频只有 30 秒。

多年来，关于允许设计编辑的浏览器扩展，人们有很多不同的看法。看看像 Stylebot （Chrome 商店链接）这样的选项。

---

还有一个名为 Visual Inspector 的视觉设计浏览器插件。

---

不要忘记这个经典技巧。

我在 DevTools 中最喜欢的技巧可能是 `document.designMode = "on"`。打开它，开始编辑网站上任何元素的文本。超级酷！ https://#/bdV9yONayT pic.twitter.com/rkC0ZsTCcD

— Simon Vrachliotis (@simonswiss) 2018 年 11 月 14 日

---

Oliver Williams 在 “终极网页设计工具：浏览器” 中写道：

浏览器开发工具传统上用于调试 JavaScript 和检查网络请求。最近，我们看到浏览器添加了用于操作 CSS 的图形界面。大多数浏览器都提供了颜色选择器和吸管工具，用于选择颜色。在 Chrome 中，此工具将有助于显示颜色对比度。Chrome 还提供了用于添加或调整文本阴影和边框阴影的 GUI。

---

也许设计工具会以一种重大的方式引领我们走向这个方向？

✨ 视
✨ 发
✨ 环

☝️ 就像大多数基于代码的开发人员今天使用 IDE 来开发软件一样，我们将开始看到多个新的 VDE 出现，这些 VDE 使得以一种主要以视觉为主的方式设计和交付软件成为可能。

— Vlad Magdalin (@callmevlad) 2018 年 11 月 16 日

Vlad 与 Webflow 合作，所以你可以理解他的想法。

---

Jye SR 在他的文章 “DevTools 让我的生活更轻松的 5 种方式” 中写道：

…可以使用 Chrome DevTools 来调查竞争对手，查看插件的问题，更改视窗，了解页面加载时间并编辑网页；所有这些都可以帮助数字营销人员、产品经理或任何与网站合作的人更有效地完成工作。这是一个我每天都会使用的工具，我希望你也会使用它！

---

很难看到这一切，而不认为这就是工具的发展方向。