英文来源：From design to development, 10 tools I cant live wIThout

好的工具虽不能创造出一名出色的开发者，但开发者拥有好的工具会如虎添翼。本文分享从设计至开发的一些实用性工具，希望帮助开发者发现一些可以优化工作流的新工具。

Atom

Atom 是 GIThub 专门为程序员推出的一个跨平台文本编辑器，已开源。功能齐全，可构建包管理器、智能自动完成（auto-completion），并包含精美的主题。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/959d5cc667016b16cc89a4f04976d114.png" width="650" height="406" />

Sublime 编辑器，包管理器让人耳目一新。Atom，既可以使用 ApM 也具有简洁直观的 GUI 界面。无须修改配置文件，可以直接使用。另外 Atom 有很多有趣的特点：支持 CSS，HTML，JavaScript 等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/61bd2b29b3a0967d3ee0bf96eebb9d3e.png" width="650" height="406" />

性能方面，Atom 缺点是启动较为缓慢。但是目前来说，它已经很快了。其运行缓慢的原因主要原因之一是打开了一个较大的文件。

可以阅读更多关于 Atom 及其性能优化的文章，Atom 转型 React 和实现文本编辑器手动 DOM 更新。

DragDis

作为一名设计师，灵感是创作的灵魂。DragDis 是一个可以拯救设计师找灵感的工具。并且很容易使用。安装 Chrome 扩展插件，拖拽所有你想要保存的内容。当然你需要把自己要保存的资源分门别类，先建好文件夹然后把相应的内容拖拽至相应的文件夹即可。更多功能用户可以自己去体验。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/7bf89d3af6e0471a91583966988096e7.png" width="650" height="442" />

使用 DragDis，随着时间推移可以追踪设计品味变化。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/d3e3b68a2b928ae0c6154ea618852a3f.png" width="650" height="442" />

Dragdis 工具的其中一个功能就是与 Evernote 类似，保存网页上的各种信息，不过 evernote 使用起来不是很方便，功能上有点臃肿，而 Dragdis 使用起来更加直观，你在网络上收集的内容都是保存在 Dragdis 账户下，使用起来就跟书签类似，而不用打开其他第三方程序来调用。

ITerm 2

ITerm 是一款 Mac 上的终端增强工具，是 Terminal 的替代品。ITerm 2 提供更为强大的功能，如多标签页、分割界面、自动完成、选中复制、剪切板记忆、全屏、内联图像和搜索等功能。尽管 Terminal 有许多相似的功能，但 ITerm 2 仍在不断完善。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/c66a4820213762a0511b1204da8945b5.png" width="650" height="406" />

Muzli

Muzli 是 Chrome 扩展应用，从 Designer News、Dribbble、Behance 等资源库分享各种资源链接，所有你需要的设计灵感这里都有。

每次在 Chrome Muzli 资源中打开新的标签，都会发现聚集了各个网站最好的内容。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/accc7bb5668354f6edb4cd973fbaf79a.png" width="650" height="442" />

其中一大亮点是有个人选择，好比拥有一位私人助理，帮助你挑选最好的前端和设计相关的文章。

Noiz.io

很多创造者会去比较有情调的地方寻找创作的氛围。Noizio 将这种氛围带到家中，它提供了十月份的雨声、喧闹的巴黎咖啡厅、雷雨声等等 10 种不同的白噪音音效。值得注意的是，Noizio 不仅仅提供上面的这些白噪音音效，最特别的是它可以让用户根据自己的喜好混搭音效。 我最后固定使用的一个音效是这样的一幅画面：在一个雷雨交加的晚上，寂寞的旅人在野外生火取暖。

白底黑顶栏荧光蓝的配色，搭配用简单线条勾勒音效图标组成了 Noizio 的简洁小清新的界面风格。然后，Noizio 可以设置暂停时间，可以跟随系统启动，还适配了优胜美地和 MacBook pro，还居然免费。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/c86158b347a02bff07dd0d697719dcc1.png" width="650" height="406" />

Invision

Invison 是一个便捷的产品原型生成工具，完美地配合前端和设计师之间的协作。用户制作一个在线原型只需要四部：创建一个工程、上传视觉设计稿、添加链接以及生成在线原型。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/057d5ad47184f4eb9c2a7f29ad9288d1.png" width="650" height="406" />

确切说，InVision 提供的不是准确的线框图，而是一个快速原型的环境，可以把你的 UX/UI 草图快速连接起来。数字型的线框图和高保真的设计可以帮你测试 app 的工作情况，同时该工具还支持协作和分享功能，生成的在线原型可以支持任何人在产品原型的任何地方评论，便于准确的交流。

针对 iOS 开发，InVision 还增添了其他功能，比如自定义主屏幕 icon 和自定义加载页面。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/bdfd106a1fc0eee5adc5587c6e1a8e2e.png" width="650" height="406" />

蓝色的部分是超链接地方。如果点击蓝色区域，会打开另一个屏幕。这适用于用户做一些初步的定性测试。

Invision 近期发布了一个新功能：Boards。Boards 可以收集灵感和构建情绪板。与 DragDis 最大的不同是，Boards 具有协作性，可与团队其他成员共同设计。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/26b3aec42d31bd8d8e437478a27bc086.png" width="650" height="442" />

What the Font

排版时设计中最重要的部分。这也是笔者为什么将 What the Font 称为最喜欢的 Chrome 扩展程序。它可以帮助设计师找出网站所用的字体。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/c3dea8ac4c788b945ae0a12a5fa6d66c.png" width="650" height="442" />

postman

作为前端开发人员，我们需要经常查询 ApI 或交互的接口，需要调试一个网页是否运行正常，并不是简简单单地调试网页的 HTML、CSS、脚本等信息是否运行正常，更加重要的是网页能够正确是处理各种 HTTp 请求，毕竟网页的 HTTp 请求是网站与用户之间进行交互的非常重要的一种方式，在动态网站中，用户的大部分数据都需要通过 HTTp 请求来与服务器进行交互。

postman 插件就充当着这种交互方式的桥梁，它可以利用 Chrome 插件的形式把各种模拟用户 HTTp 请求的数据发送到服务器，以便开发人员能够及时地作出正确的响应，或者是对产品发布之前的错误信息提前处理，进而保证产品上线之后的稳定性和安全性。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/bbdc03c748d467aa82817e64eaaffaaf.png" width="650" height="406" />

Wappalyzer

Wappalyzer 用于识别网站所使用的工具库和框架。它是 Chrome 扩展程序，如果你想知道网站所用创建特定可视化的库，可以尝试使用 Wappalyzer。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/b878db45007157ca604688327bcea33d.png" width="650" height="442" />

Boom 还包含一组声音效果。

ITle="点击查看原始大小图片" src="/d/file/IT/2016-07-09/a2612b65acfe8d101d695cde68f035fa.png" width="650" height="406" />

　　另外还有 JSON Viewer for Chrome、Noon pacific、Flux、和 Better Snap Tool 也可以尝试使用。

作者： Jonathan Z. WhITe（@JonathanZWhITe），设计师及开发者。

译者： 屠敏，欢迎技术投稿、约稿，给文章纠错，请发送邮件 tumin@csdn.net