前端工作、学习中常用工具推荐

一、学习类网站推荐

1、w3school 在线教程:这也算是一个前端只是比较全的网站了，里面主要是一些web相关的基础知识。
2、慕课网-程序员的梦工厂：这个网站相信很多人都会用到的，一个程序员在线学习网站，里面有丰富的教程，资源等等。

3、掘金 - juejin.im - 一个帮助开发者成长的社区

一个技术文章交流社区，里面有很多很多有含金量的文章，是个学习的好地方。

4、CodePen：里面分享的都是国内外写的一些前端demo，项目之类的，想学习项目经验的话，这个网站是一个不错的选择，在这里也可以线上写代码。
5、前端导航 - 内容最全的前端开发网址导航：前端导航网站，收集了很多前端学习网站。
6、在线工具 - 程序员的工具箱：在线工具网站，网站里面有着各种各样开发室需要用到的工具，比如json转化等，相当于一个大杂烩，值得收藏。

二、 工具类推荐

1. 站长工具

网站地址： ntool.chinaz.com/tools/nav

推荐理由：

丰富的编码转换以及常用的在线工具

强大的搜索优化辅助工具

最大的建站素材库、最实用的站长工具

2. Snipaste 截图工具

网站地址：zh.snipaste.com/

推荐理由：

强大的截图：自动检测界面元素区域、像素级的鼠标移动控制、截图范围控制

贴图：将截图贴回到屏幕上，可缩放、旋转、翻转、设为半透明，甚至让鼠标能穿透它们

取色器 ：快捷键取色 RGB/HEX 快捷方便

使用很简单，可提高工作效率

如果你是程序员、设计师，或者是大部分工作时间都在电脑前，这个工具将改变你的工作方式、提升工作效率。

3. 格式工厂

网站地址：www.pcgeshi.com/index.html

推荐理由：

免费多功能的多媒体格式转换软件

支持几乎所有类型多媒体格式到常用的几种格式

转换图片文件支持缩放，旋转，水印等功能

支持转换过程中可以修复某些意外损坏的视频文件

4. windows激活工具

网站地址： win.shibojiaa.cn/

推荐理由：

免费

一键就能实现，操作简单

永久完美离线激活，成功率高

5. PhotoShop CC

推荐理由：

作为切图、P图的首选工具，在日常工作中，也很经常会碰到一些图片的处理，简单的 ps 技能也是我们所要具备的。 PhotoShop 软件从照片编辑和合成到数字绘画、动画和图形设计，一流的图像处理和图形设计应用程序是几乎每个创意项目的核心所在。

软件下载地址推荐：

mp.weixin.qq.com/s/czb5KVCoc…（含各个版本，可根据需求自取）

6. 阿里巴巴矢量图标库

网站地址：www.iconfont.cn/

推荐理由：

在线图标搜索

个人图标库管理、项目图标管理

矢量格式转换：SVG 下载，AI 下载，ＰＮＧ下载

自由变化大小、修改颜色

可以添加一些视觉效果如：阴影、旋转、透明度

7. CSS Sprites Generato（CSS 精灵、雪碧图）

网站地址：www.toptal.com/developers/…

推荐理由：

将多个图片融合到一副图里面

可设置图片融合的布局和间距

根据融合图片生成对应的 CSS

8. ProcessOn

网址地址：www.processon.com/

推荐理由：

免费在线制作流程图、思维导图、原型图等

可分享团员实时协作

汇聚强大的作图工具

9. 蓝湖

网站地址：lanhuapp.com/

推荐理由：

一款产品文档和设计图的共享平台

免费

自动生成设计图标注、代码，切图下载

展示页面跳转逻辑

设计图历史版本管理、设计图管理

10. MDnice

网站地址：www.mdnice.com/

推荐理由：

在线maekdown编辑，美化排版

文章列表，注册登录可保留文档

自动保存

丰富的主题、代码主题，也可自定义

多种免费图床

可直接复制到知乎、公众号、掘金等平台

可导出pdf、markdown，也可导入markdown文件

11. uTools

网站地址：www.u.tools/

推荐理由：

极简、插件化、跨平台的现代桌面软件

丰富的插件、工具集合

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

12. 钉钉内网穿透 && uTools 内网穿透

钉钉内网穿透教程地址：juejin.cn/post/690184…

uTools 内网穿透教程地址：www.jianshu.com/p/d06f0beaa…

推荐理由：

免费

操作简单

你有什么好的推荐？可以在下面评论分享一下😊