其实本来打算写的是web开发工具合集，但写着写着觉得不太过瘾，所以索性把所有用得到的工具都列出来了。
如果能在一开始就把这些工具利用起来，相信可以大大提高工作效率，所以起码对新手来说是比较有益的。而且从初级开发人员升级为高级开发人员的一个主要方面就是调整工具，简化任务管理流程，无缝地与其他团队成员进行交流，并在使用的工具之间建立集成。
所以我总结了60个可以用到的工具，供大家参考。
我是从这几个方面总结的：
开始前先推一个在线工具合集网站，真的挺方便。
1.Chrome扩展
- CssViewer - CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件。
- WhatFont - 可以查找你最喜欢的网站所使用的字体，以便应用到自己的项目上。
- Pesticide - 有助于查看div的轮廓并修改CSS。
- Colorzilla - 将网站上的颜色直接复制到剪贴板，这样就不会花费太多时间来尝试获得正确的RGBA组合。
- CSS Peeper - 以最简单的方式检查Web上隐藏的CSS对象、颜色和Asset样式。
- Wappalyzer - 有助于查看网站上使用的技术，比如网站使用什么样的框架或托管什么服务。React Dev Tools - 用于调试React应用程序，只有在编写React应用程序时才有用。
- Redux Dev Tools - 用于使用Redux调试应用程序，只有在应用程序中实现Redux时才有用。
- JSON Formatter - 使JSON看起来更干净。
- Vimeo Repeat and Speed - 加速Vimeo视频。
2.VS代码扩展
- 自动重命名标签 - 在重命名一个HTML / XML标签时，会自动重命名配对的HTML / XML标签。从理论上讲，效率提高了2倍。
- HTML CSS支持 - CSS支持HTML文档。对于获得一些简洁的语法高亮和代码建议很有用。
- HTML代码段 - 有用的代码段，节省时间的好用工具。
- Babel ES6/ES7 - 如果使用的是Babel，可以更轻松地区分代码中的内容。
- Colorizer -将颜色添加到括号中以便于块可视化。
- ESLint -把ESLint集成到Visual Studio代码中。
- Guides -添加了各种缩进指南。
- Auto - 由Github创建的开源文本编辑器。功能齐全，内置包管理器，智能自动完成，可以更快地编写代码。
- Code Spell Checker - 拼写检查器。
- VSCode-Icons - 向文件树添加图标。
- Prettier - 自动代码格式化程序。
- Git Lens - 检查代码何时以及由谁进行了更改，不当背锅侠，哈哈~
3.UX设计
- Marvel -即时生成设计规范并连接集成。
- Proto.io - 对于想要创建含动画app的UX设计者特别有用。
- INVISION - 一个原型和工作流平台，非常适合前端和设计师之间的协作。设计师可以将一系列屏幕上传到项目中。
- Principle - 可以脱机工作，交互式原型可以轻松转换为GIF或视频。
- Whimsical
- Zeplin
- Trunk
- Figma
- Sketch
- Color Hex - 免费的色彩百科全书。
- Color Tool - 提供材料配色方案的移动设计。
- ColorDrop -一种颜色匹配工具，可以保存颜色组合。
- CSS3 Generator - 设计和用户界面非常干净
- Google字体 - 免费，具有600多种字体系列。
- Typetester - 是一种快速解决方案，在一个页面上提供多种字体的预览。
4.web开发
- Parcel - 快速，零配置的Web应用程序捆绑器。
- Feather - 简单漂亮的开源图标。
- Hyperapp v1.0 - 用于构建现代UI应用程序的1kb库。
- Sizzy - 快速测试响应式网站的工具。
- Heml - 用于构建响应式电子邮件的开源标记语言。
- Cypress - 对浏览器中运行的内容进行快速、简便和可靠的测试。
- FlowUp - 可跟踪应用的整体性能，并深入了解各种关键性能指标，如FPS，内存使用情况，CPU使用率，磁盘使用情况等。
- Stetho - 一款功能强大的Android开源调试平台，由Facebook开发。
- Android Asset Studio - 一组简单易用的工具，用于生成设计和开发Android应用程序时需要的各种类型的图标。
- Android调试数据库 - 用于调试Android数据库。
- Vysor - 允许将真实设备镜像到计算机上。
- LeakCanary - 用于Android和Java的内存泄漏检测库。
- Android Arsenal - 可以找到Android的库，工具和项目的分类目录。
5.无需代码的编程工具
- Bubble -Bubble是Web开发框架和可视化编程工具。它使非技术人员无需代码即可构建Web和移动应用程序。
- Pixate -用于设计没有代码的原生移动应用原型。
- Webflow 3D转换 - 无需编写任何代码即可直观地构建3D交互。
6.数据库工具
- Navicat for MySQL - 上手最快的操作数据库的软件。
- HeidiSQL：数据库管理软件。
- Navicat Lite - 支持的数据库包括 MySQL、Oracle、SQLite、PostgreSQL 和 SQL Server 等。
- MySQL Workbench - 一款图形化的数据库设计工具。
- Sequel Pro -用于管理MySQL数据库（本地或在Internet上）。
7.杂七杂八
- Postman -Postman可以直接查询端点，而不必编写相应的前端查询或cURL请求。
- Zapier - 连接应用程序并自动化工作流程。
- Redash - 一款出色的开源工具，集成了所有最流行的数据源，包括MySQL，PostgreSQL，MongoDB，ElasticSearch等。
- Bitbucket - 为最多五个协作者提供无限的私人代码存储库。
- 求字体 -上传图片找字体。
- 用药助手 - 收录来自生产厂家的最新药品说明书，放到这总觉得怪怪的，但又觉得可能有用(˘•ω•˘)
- 奇妙清单 - 设置到期日期和提醒，并分配待办事项，生活不用乱糟糟了。
- DragDis - 当你在网络上遇到想要保留的灵感时，只需要把它拖放到Dragdis侧边栏就行了。健忘症福音啊~
- 万能搜索网站 - 快搜- 搜索快人一步，什么搜索内容都有！
文章集锦：
以上足够把你的工具箱塞得满满当当了吧，嘻嘻~如果小伙伴们还有其它觉得不错的工具欢迎分享出来哈~
个人博客
更多前端技术文章、美术设计、wordpress插件、优化教程、学习笔记尽在我的个人博客喵容 – 和你一起描绘生活，欢迎一起交流学习，一起进步：https://www.miaoroom.com
