前端开发常用哪些工具软件好（前端开发常用哪些工具软件？）

前端开发必备工具           ，一篇文章一网打尽

文章目录

           一           、前端提高“生产力           ”工具

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项目多端部署)

​

别看了


 


 


 


 


 
，收藏支持一下