前端开发人员使用的生产力工具

做为一个前端工程师，工做这几年遇到并收藏了不少好用的工具，给你们分享一下。

• 浏览器插件
• 系统应用
• 在线工具

ps: 其实还有github的一些好工具或好项目，有时间我会补上的。（实际上是由于懒得弄

浏览器插件

本人使用的事Chrome，Firefox用户请自行搜索。

谷歌访问助手

你懂的，没有这个不能访问Chrome应用商店。但下载这个插件要到Chrome应用商店。 死循环？？不可能的，我找到了貌似是官网的东西。 PS：感谢高大哥，他告诉个人这个插件。

花瓣网页收藏工具

很早以前用过，能够将好看的图片搜藏到花瓣网（一个图片搜藏的网站）。 但我都是把它当网页截图工具用

百度药丸 Baidu Capsule

不想看百度搜索的莆田系医院等垃圾广告怎么办？用这个。不过有个软件的原理应该是每次都清除cookie，防止百度记录你的搜索记录，因此每次使用百度产品都须要登录。 不过不要紧，我通常不用百度的产品。

广了结结者【强烈推荐】

必备软件，不想看那些乱七八糟、伤心病狂、不堪入目的广告怎么办？用这个。

Webtime Tracker

记录网站使用时间的插件，看下个人（刚重装了系统）。

OneTab

电脑内存不够时能够释放一部份内存。

Octotree【强烈推荐】

开发必备，看GitHub中项目时不用一层层的点进去。

Evernote Web Clipper

印象笔记剪藏，印象笔记用户能够试试，一键收藏网页。

Dark Reader

我们的知识分享平台这么难用（滑稽保命.jpg），不敢说话又想黑它怎么办？用这个。

Axure RP Extension for Chrome

Axure导出交互式可访问原型图时，不能用浏览器打开，这是个辅助工具。

Google 翻译

最好用的网页翻译软件，英语渣必备。

小技巧

安装的插件多了又不常常用怎么办，能够在扩展程序里面关闭，也能够右键选择从chrome中隐藏。

系统应用

印象笔记：跨平台笔记应用 kindle：跨平台电子书阅读 xmind：思惟导图

PxCook

PSD查询工具，设计出了UI图后不用标注，前端可直接用该工具得到页面内元素尺寸、文字信息、颜色色值甚至CSS样式代码。

PicGo

重点说下图床工具，由于markdown的特殊性，图片等文件不能直接放入文档中，因此图片只能经过外链的形式加进去。 以前用过好多图床工具，各有优劣，但今天发现的这个超级好用，这篇文章的图片都是用的这个工具。 使用时最好搭配一个可靠的cnd服务网站，我选的七牛，免费的就够用了。

在线工具

即在线应用。

• 谷歌翻译
• ECMAScript 浏览器支持状况
• Can I use，浏览器兼容性查询
• 在线代码工具
• 制做ico图标
• 浏览器市场份额
• 画流程图的工具

JS中==与===区别

只是做为参考，尽可能全使用===。

压缩图片

很早以前收藏的工具，若是图片中没有渐变或阴影等，压缩效率极好。

图片生成工具

mock之友，经过控制url参数生成不一样尺寸的图片。

HTTP请求辅助工具

相似于mock，本身配置HTTP响应体，获取UTL供ajax请求使用。

Homebrew

macOS的软件包管理工具，命令行界面。 有些软件没有提供macOS系统的版本，能够经过此工具能够安装。

git提交时的emoje

像下图这样，很装逼极客。

MSDN

收藏了六七年的老网站，下载windows或office软件用的。

开源软件国内镜像

不少软件都放在国外服务器，下载死慢。 国内有不少镜像网站，能够本身搜索。 这里给出一个汇总文章。

命令行

差点忘了，可能有的人还不知道windows下有PowerShell命令行工具，还有前段时间刚发布的treminal，看文章说超级好用。 大家本身试吧，我没用过。^_^

iconfont

重要的留在最后。

假定一个场景，用户对系统内一个图标进行替换。以往流程是：

1. 客户告诉你须要什么样一个图标
2. 你讲该需求转给设计
3. 设计理解需求并设计后给你一个图标
4. 你放到系统里面等用户确认，若不经过，再从步骤2开始

能够发现不少问题点： 设计拿到的是"二手"需求 若是用户不经过须要反复的设计与切图 设计可能不在这个项目上，须要等待很长时间。

这种小的需求，能够在这个网站上本身找一些图标，而且在用户身边把图标调好。优化流程后是这样：

1. 客户告诉你须要什么样一个图标
2. 你理解需求后从网站上找到一个图标并放入系统中
3. 你放到系统里面等用户确认，若不经过，现场经过CSS控制调整知道用户满意。

以上状况在咱们开发团队可能已经用上了，下面说一种大家可能没用过的。

假定一个场景：设计出完UI文稿，须要将PSD里面的图片都切出来，可能根据不一样分辨率、不一样状态要切好几张图。

• user-icon.png
• user-icon-hover.png
• user-icon_x2.png
• user-icon-hover_x2.png
• ...

而一种更好的方式（我已经用在生产环境中了，你们可放心使用）是：

1. 在网站上建立一个项目(如图)
2. 将前端添加设置为项目协做者
3. 设计出完UI稿后，从网站上找到（找不到能够本身上传）对应的图标添加进项目
4. 前端从网站上就能够看到设计人员添加的图标（本身也能够添加）
5. 前端可根据须要，生成在线图标库，或下载到本地添加到项目中

你有什么好工具呢？

在评论区说下吧。