Awesome Web Developer Tools

Contents

前言

随着前端框架不断的发展，开发工具也层出不穷，面临了很多选择。每个场景需要一些工具来支撑，所以专门整理出一份自己常用开发工具集，供大家参考使用，如有更好的工具，可以给我留言，我会持续更新完善😈。

文档中评星⭐️仅代表个人偏好，及其使用频率，🔥强烈推荐！

WebStorm ⭐️⭐️⭐️🔥著名JetBrains的开发工具，以前使用过Brackets Atom Sublime，装过各种插件，自从用WebStorm以后，再也没切换过其他IDE工具，里面很多功能暂不一一赘述，用就是了。
Charles⭐️⭐️⭐️🔥 用于调试转向HTTP请求，可以动态Debug网络请求，修改请求、响应内容，重定向网络请求，调试移动端时，可将线上的请求转到调试环境，也可用于后台转向本地接口，支持http2，https协议。
PostMan⭐️ 用于模拟网络请求，在开发中部分接口开发完成，还不稳定时，可以使用PostMan模拟网络请求，动态修改参数，便于查找问题，同时可以导入导出Curl请求，将请求参数和数据发给后端开发人员，以便调试。
DataGrip ⭐️是JetBrains的数据库连接客户端，简洁方便易用。如果不仅仅是个前端的话，你值得拥有。
Dash⭐️⭐️⭐️🔥 用于本地快速查询API文档，各种语言的文档库可供下载，同时集成了多个平台开发工具，选中后按快捷键，可快捷搜索相应API的文档及Example，本地查函数非常方便快捷。

MindNode⭐️⭐️⭐️🔥 个人及其热爱的一款头脑风暴的软件，其实不管思考任何事情我都会用到这个软件，比如职业规划，被动收入，学习笔记，等等.. 这个工具的使用方式虽然简单，但非常符合大脑的思维模式，我经常会用这个软件整理设计框架，软件功能，需求以及解决方案，整理完成后思路极其清晰。
XMind ⭐️⭐️⭐️与MindNode能力相同，但合并和样式扩展能力要比MindNode强一些，从操作易用性上，会比MindNode差一些，个人比较偏好操作易用性，但是有时候需要一些汇总功能MindNode还是显得比较短缺，所以也买了Xmind，请不要叫我土豪，真的是非常有需求，来整理这些文档和思路。
1Password⭐️⭐️⭐️🔥 目前使用最为广泛的密码管理工具，解决了多个账号同一份密码的问题，常用的撞库攻击，也就是用盗取的同一份账号密码，去登录其他平台，账号安全性极低。由于生成的密码较为复杂，很多APP已经支持了1Password的自动填写，浏览器中可通过安装插件自动填写，也十分的方便！1Password还支持秘钥文件存储，License存储，图片附件存储等，以及多端同步功能，博主良心推荐👍！！

OmniFocus⭐️⭐️⭐️🔥 主要用于个人任务管理，有移动端APP可以与iPhone同步，价钱略贵，如果长期使用的话，其实性价比还是可以的。该软件可以按照不同的维度，级次来划分任务，可以设置时间节点，简单易用。
OmniPlan⭐️ 主要应对项目周期管理，进度跟踪。在正常的敏捷迭代周期中，难免对工期估算不准确，以及产品调整任务优先级，可以设置资源和时间占用周期，按不同维度筛选，对项目人员的占用情况清晰可见，推荐项目Leader使用。

Sketch⭐️ 是一款设计工具，主要是给设计师使用，但个人为了便捷，能拿到一些设计师的原型图，做简易的修改和简单的调整，所以也安装了一份，使用的学习成本并不是很高。
Zeplin⭐️ 是一款设计图查看工具，主要是用于上传设计师用Sketch绘制完的设计图，可以很方便的查看像素，颜色，比例尺，及部分参考样式的代码。

Shadowsocks Mac版⭐️⭐️⭐️🔥 需要自己搭建VPN服务，教程可参考 Shadowsocks-Server配置
SwitchyOmega⭐️⭐️⭐️ 是Chrome插件，该链接需要翻墙后访问。该工具主要用于浏览器代理，可以将网络请求，转发到任何代理服务器。Shdowsocks工具在关闭状态下，也会启动一个本地服务的代理端口，为了避免和Charles代理工具冲突，所以一般我会选择停止Shadowsocks服务，在浏览器中使用SwitchyOmega代理，转向到本地Shadowsocks的1080端口。
Privoxy⭐️ 是服务于命令行的翻墙工具。由于命令行的网络请求是优先于Shadowsocks的代理，所以要安装国外的命令行工具包，还是要通过工具转向到本地Shadowsocks的1080端口。教程可参考Privoxy配置