前端开发必备工具，一篇文章一网打尽
文章目录
一、前端提高“生产力”工具
1.WebStorm
2. 远程开发 - VSCode
3. 接口测试 - Postman
4.API在线文档生成和测试 - SwaggerUI
5.抓包工具 - Wireshark
6.通用数据库管理 - DBeaver
7.MD编辑器 - Typora
8.虚拟机 - VirtualBox
9.Git存储库托管 - GitHub
10.项目管理 - Trello
二、提升前端技能的26个网站，走过路过不错过：
三、前端真香教程
一、前端提高“生产力”工具
1.WebStorm
下载地址：WebStorm: The Smartest JavaScript IDE, by JetBrains
功能介绍：
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。
目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
2. 远程开发 - VSCode
Visual Studio Code - Code Editing. Redefined
VSCode 是目前最受开发人员欢迎的编码工具之一，具备强大便捷的远程开发能力。与其它远程开发工具不同的是，VScode 是通过 SSH(Secure Shell) 的方式连接到远程服务器。这种方式不仅省略了繁琐的上传和下载步骤，还可以实现实时同步，让远程开发过程更流畅高效。
功能特色：
-
开源工具，可免费使用
-
支持自定义配置
-
可集成Git
-
支持各种文件格式（html/jade/css/less/sass/xml）
-
调试功能强大
-
插件生态机制强大
3. 接口测试 - Postman
https://www.getpostman.com
Postman 提供功能强大的 Web API 和 HTTP 请求调试，提供有 Chrome 扩展插件版和独立的APP，对于检查后端端点非常有用。
功能特色：
-
支持多种请求类型（get、post、put、patch、delete 等）
-
支持在线存储数据和迁移数据
-
支持请求 header 和请求参数的设置
-
支持不同的认证机制（Basic Auth，Digest Auth，OAuth 1.0，OAuth 2.0 等）
-
响应数据自动按照语法格式高亮，包括 HTML，JSON 和 XML
4.API在线文档生成和测试 - SwaggerUI
http://swagger.io
SwaggerUI 是一个 API 在线文档生成和测试的利器。有了这款工具，不需要频繁更新接口文档，就能保证接口文档与代码的一致。
功能特色：
-
支持在多种开发环境中使用
-
操作便捷
-
支持所有主流浏览器
-
完整的OAS支持
5.抓包工具 - Wireshark
https://www.wireshark.org/download.html
Wireshark 是一款小巧、开源且能在几乎所有流行操作系统下使用的抓包工具软件。使用Wireshark 可以截取各种网络封包，显示网络封包的详细信息。可以在Windows和Mac OS上运行。
功能特色：
-
快速检测网络问题
-
快速检查信息安全相关问题
-
新通信协议调试
6.通用数据库管理 - DBeaver
Download | DBeaver Community
DBeaver 是一个 SQL 客户端和数据库管理工具。由于 DBeaver 基于 Java 开发，可以运行在各种操作系统上，比如Windows、Linux、macOS 等操作系统。同时，DBeaver 采用 Eclipse 框架开发，支持插件扩展，并且提供了许多数据库管理工具：ER 图、数据导入/导出、数据库比较、模拟数据生成等。
功能特色：
-
通过 JDBC 连接到数据库，支持几乎所有的数据库产品
-
可以处理任何的外部数据源
7.MD编辑器 - Typora
https://typora.io/
Typora 是一款免费的轻量级Markdown编辑器，虽然没有 Mou，Haroopad等Markdown编辑器那么大名鼎鼎，但其轻量、快速、易于上手的特点，绝对能给你带来舒适的用户体验。
功能特色：
-
启动速度快
-
支持实时预览，所见即所得
-
界面简洁易操作
-
支持多拓展
8.虚拟机 - VirtualBox
Downloads – Oracle VM VirtualBox
VirtualBox 是一款免费的开源虚拟机，可以在Windows、Linux和mac等不同操作系统中运行。
功能特色：
-
开源软件，免费
-
中文界面
-
体积小
-
安装配置简单实用，社区活跃
9.Git存储库托管 - GitHub
jeresig (John Resig) · GitHub
GitHub 是一个基于 Web 的 Git 存储库托管服务。无论你是软件开发的新手，还是已经具有丰富开发经验的老手，相信你在工作中都会需要这款工具。GitHub是目前世界上最大，最受欢迎的代码库，可以帮助开发人员审查代码，管理项目和软件构建。
功能特色：
-
极高的安全性
-
APP体积小
-
数据同步流畅无冲突
-
不限制私有仓库数量和流量
10.项目管理 - Trello
https://trello.com
Trello 是一款灵活易用的项目管理工具，非常适合作为看板和 Scrum 开发，它易于管理，具有极高的可定制性。虽然不是专门为开发人员打造的工具，但Trello绝对可以帮助开发人员更好地完成工作。
功能特色：
-
更直观的资料与任务分类
-
更清晰的便利贴式任务呈现
-
操作便利，拖曳即可整理分类与管理进度
-
可以新增丰富的卡片内容
-
支持颜色标签、特殊印章
-
简单易懂、即时同步、多人管理
二、提升前端技能的26个网站，走过路过不错过：
-
CSS battle【在线比拼 CSS】 : https://cssbattle.dev
-
Learn CSS layout【学习 CSS 布局】：http://learnlayout.com
-
Flexbox Froggy【学习 Flex 布局的小游戏】：http://flexboxfroggy.com
-
EnjoyCSS【在线CSS代码可视化工具】：https://enjoycss.com
-
CSS-Tricks 【CSS 技巧】：https://css-tricks.com
-
Neumorphism【实现新拟态效果】：https://neumorphism.io
-
uiGradients【分享渐变色】：https://uigradients.com
-
JavaScript【一个一直更新的JavaScript 的语法文档，主要会写如何去避免一些常见的错误】：https://bonsaiden.github.io/JavaScript-Garden/zh/
-
JS Tips【JS 技巧】：https://www.jstips.co
-
JSweekly【技术周刊 】：https://javascriptweekly.com
-
CDNJS【JavaScript 资料库】：https://cdnjs.com/libraries
-
Beautiful Open 【开源 JS 库集合】：https://beautifulopen.com
-
JavaScript Fun【代码库集合】：https://www.javascript.fun
-
Stack Overflow【编程人员问答网】：https://stackoverflow.com
-
掘金【高质量技术社区】：https://juejin.im
-
Codrops【网页设计开发博客】：https://tympanus.net
-
CodePen【一个网站前端设计开发平台，针对网站前端代码的一个工具，上面有各种效果的案例特效（炫技），可以在他们的 demo 基础上开发自己的前端设计。】： https://codepen.io
-
CodeSandBox【提供一个在线开发环境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即开即用、实时编译预览，非常方便。】： https://codesandbox.io
-
JS Bin【轻量级在线编辑器网站】：https://jsbin.com
-
ICONSVG【在线自定义设计SVG图标素材】：https://iconsvg.xyz
-
OpenMoji【免费表情符号库】：https://www.openmoji.org
-
Share Icon 【免费矢量素材图库】：https://www.shareicon.net
-
tableconvert 【在线表格编辑器】：https://tableconvert.com
-
Feathericons【极简 ICON 图标集】：https://feathericons.com
-
HTML5UP 【提供大量的HTML5模版】：https://html5up.net/
-
趣IT【一个会更新面试题和练习题的宝藏王】https://www.funit.cn/
三、前端真香教程
web 入门 Html5+css：最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 web 进阶：web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）
技术进阶 JavaScript：JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门 DOM BOM：JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作 jQuery：前端基础必备教程|jQuery网页开发案例精讲 Ajax：AJAX零基础到精通_整合Git核心内容全套教程
Vue 开发 Node.js: Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解 Vue2+Vue3全套：Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程
React &小程序开发
React：前端React视频教程，react零基础入门原理详解到好客租房项目实战
零基础玩转微信小程序：前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
别看了，收藏支持一下