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

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

Atom

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

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

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

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

DragDis

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

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

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

iTerm 2

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

Muzli

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

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

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

Noiz.io

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

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

Invision

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

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

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

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

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

What the Font

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

postman

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

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

Wappalyzer

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

Boom 还包含一组声音效果。

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

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

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

济宁IT新闻