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

news2025/2/26 14:05:09

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

文章目录

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

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个网站，走过路过不错过：

  1. CSS battle【在线比拼 CSS】 : https://cssbattle.dev

  2. Learn CSS layout【学习 CSS 布局】：http://learnlayout.com

  3. Flexbox Froggy【学习 Flex 布局的小游戏】：http://flexboxfroggy.com

  4. EnjoyCSS【在线CSS代码可视化工具】：https://enjoycss.com

  5. CSS-Tricks 【CSS 技巧】：https://css-tricks.com

  6. Neumorphism【实现新拟态效果】：https://neumorphism.io

  7. uiGradients【分享渐变色】：https://uigradients.com

  8. JavaScript【一个一直更新的JavaScript 的语法文档，主要会写如何去避免一些常见的错误】：https://bonsaiden.github.io/JavaScript-Garden/zh/

  9. JS Tips【JS 技巧】：https://www.jstips.co

  10. JSweekly【技术周刊 】：https://javascriptweekly.com

  11. CDNJS【JavaScript 资料库】：https://cdnjs.com/libraries

  12. Beautiful Open 【开源 JS 库集合】：https://beautifulopen.com

  13. JavaScript Fun【代码库集合】：https://www.javascript.fun

  14. Stack Overflow【编程人员问答网】：https://stackoverflow.com

  15. 掘金【高质量技术社区】：https://juejin.im

  16. Codrops【网页设计开发博客】：https://tympanus.net

  17. CodePen【一个网站前端设计开发平台，针对网站前端代码的一个工具，上面有各种效果的案例特效（炫技），可以在他们的 demo 基础上开发自己的前端设计。】： https://codepen.io

  18. CodeSandBox【提供一个在线开发环境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即开即用、实时编译预览，非常方便。】： https://codesandbox.io

  19. JS Bin【轻量级在线编辑器网站】：https://jsbin.com

  20. ICONSVG【在线自定义设计SVG图标素材】：https://iconsvg.xyz

  21. OpenMoji【免费表情符号库】：https://www.openmoji.org

  22. Share Icon 【免费矢量素材图库】：https://www.shareicon.net

  23. tableconvert 【在线表格编辑器】：https://tableconvert.com

  24. Feathericons【极简 ICON 图标集】：https://feathericons.com

  25. HTML5UP 【提供大量的HTML5模版】：https://html5up.net/

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

​

别看了，收藏支持一下

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405365.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【数字孪生】UE4虚幻引擎与前端Web页面的结合

【数字孪生】UE4虚幻引擎与前端Web页面的结合

目录介绍基础准备鼠标穿透设置备注介绍 UE初学者，非专业UE工程师，在项目中需要使用UE4结合前端页面完成三维场景与前端图表的联动效果，自学总结方法，使用的版本为UE4.26。 基础准备 1. 使用Vue、Echarts创建前端页面&#xff0…
阅读更多...
异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func

异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func

异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func 问题解决 今天我在给博客添加樱花飘落的特效的时候 下载并引入了一个JS 之后打包执行的时候 发现樱花不会动了 检查报错发现是文章标题的报错…
阅读更多...
事件监听 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）

事件监听 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）

目录 一、效果展示 二、实现步骤 三、涉及要点 1. Vue 语法 v-show 2. 获取窗口到元素顶端的距离 3. 监听事件 一、效果展示 最近在做项目时有一个网页渲染是这样的，某一个元素在开始不显示，只有当页面滑动到指定的位置时才显示该元素。效果如下&a…
阅读更多...
基于物联网的智慧农业监测系统（前端界面有web端和微信小程序端）

基于物联网的智慧农业监测系统（前端界面有web端和微信小程序端）

摘要 农业是国民经济的基础，在国家经济发展中有着不可替代的重要作用。随着物联网技术的快速发展，智慧农业已成为了现代农业发展的新方向。基于此，本文设计并实现了一套基于物联网的智慧农业监测系统，系统采用ESP32作为主控板&am…
阅读更多...
Vue组合式API

Vue组合式API

目录 一. 为什么要使用Composition API 1.1.一个Options API实例 1.2.Options API存在的问题 1.3.Composition API简介 二.Composition API 2.1.setup()入口 2.2.ref 响应式监听 2.3.reactive与toRefs 2.4.computed的用法 2.5.watch的用法 2.6.setup()参数 2.6.1.p…
阅读更多...
前端如何将项目部署到服务器（Nginx）

前端如何将项目部署到服务器（Nginx）

文章目录一、准备环境二、安装Nginx1、 安装Nginx依赖2、下载Nginx3、解压下载好的Nginx 压缩包4、编译安装Nginx5、启动Nginx服务三、操作步骤1、使用Xshell连接服务器2、上传静态资源文件3、 配置Nginx4、 重启Nginx服务我们在会开发项目的同时，也应该了解一下前端…
阅读更多...
基于Java Web的随意购商城系统（开源项目）

基于Java Web的随意购商城系统（开源项目）

提示：此项目仅作为本博主的学习笔记记录，不作为商品售卖，资源往下翻看源码获取 文章目录前言Web端功能设计首页热销商品新到商品商品分类商品详情购物车添加地址提交订单部分代码展示可能会出现的错误如果拿到项目后发现图片不显示源码获取前…
阅读更多...
在Vue中使用高德地图

在Vue中使用高德地图

在Vue中使用高德地图一、如何在Vue中引入基础高德地图1、步骤一：注册并登录高德地图开放平台，申请密钥2、步骤二：安装高德地图加载器3、封装一个自定义地图组件，并初始化地图二、根据关键词搜索，并定位到搜索的位置三、…
阅读更多...
谷歌浏览器自带翻译网页插件没用了怎么办？这里有解决办法。

谷歌浏览器自带翻译网页插件没用了怎么办？这里有解决办法。

前言 正当我打算来一波科学上网的时候，当我用谷歌浏览器打开文档网站时候，发现发现google浏览器网页翻译插件没用了。经过了我一段时间的搜寻，终于有了解决方案。 原因 从 10 月 20 日起，谷歌在陆续移除国内服务器上的谷歌翻译…
阅读更多...
Vue学习之从入门到神经(两万字收藏篇)

Vue学习之从入门到神经(两万字收藏篇)

写在前面 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家:人工智能学习网站 Vue写在前面前言Vue.js三种安装方式一、 Vue导入二、Vue基本语法1.钩子函数2. 插值表达式3.显示数据(v-text和v-html)4.数据双向…
阅读更多...
深入理解Vue响应式原理

深入理解Vue响应式原理

前言 Vue响应式原理是Vue最独特的特性之一，当数据模型进行修改时，视图就会进行更新，这使得状态管理简单直接，但是其底层的细节还是需要我们深入学习理解，这样遇到一些问题我们才能快速进行定位，并解决&…
阅读更多...
【UML】-- 顺序图练习题含答案（自动售货机、学生选课、提款机、购买地铁票、洗衣机工作）

【UML】-- 顺序图练习题含答案（自动售货机、学生选课、提款机、购买地铁票、洗衣机工作）

注意：对象表示法对象名需要下划线，此文章没有标注 一、练习一 根据下面的叙述，绘制一幅关于顾客从自动售货机中购买物品的顺序图。顾客（User）先向自动售货机的前端（Front）投币；售货…
阅读更多...
CSDN文章点赞、收藏、评论后到底发生了什么？简要分析HTTP交互机制

CSDN文章点赞、收藏、评论后到底发生了什么？简要分析HTTP交互机制

作者：Eason_LYC 悲观者预言失败，十言九中。 乐观者创造奇迹，一次即可。 一个人的价值，在于他拥有的，而不是他会的。所以可以不学无数，但不能一无所有！ 技术领域：WEB安全、网络攻防 关…
阅读更多...
node.js是干什么的

node.js是干什么的

一、Node.js简介 Node.js是一个开源和跨平台的JavaScript运行时环境。它几乎是任何类型项目的流行工具！ Node.js在浏览器之外运行V8 JavaScript引擎（Google Chrome的内核）。这使得Node.js的性能非常好。 Node.js应用程序在单个程序中运行&…
阅读更多...
使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）

使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）

最近也是临近期末了，各种的期末大作业，后台管理也是很多地方需要用到的，为了方便大家能快速上手，快速搭建一个简单的后台管理，我花了两天时间整理了一下 我会从0开始介绍，从数据库的设计到前端页面的引入最…
阅读更多...
使用uniapp开发APP时的调试/安卓打包等

使用uniapp开发APP时的调试/安卓打包等

一、调试 1.先用数据线连接电脑和手机，选择“文件传输”， 2.打开开发者模式，华为手机举列-->设置-->关于手机-->版本号，多次连续点击“版本号”，就会提示已打开 开发者模式 3.华为手机举列-->设置-->…
阅读更多...
Vue：element-ui中表格过长内容隐藏显示

Vue：element-ui中表格过长内容隐藏显示

一、el-table表格 在使用VUE显示后台数据时，经常会遇到数据过长，显示出来的效果很难看，如下图所示： 上图中，红框框出的内容由于长度过长，占据了三行空间，如果内容更多的话，占据行数就…
阅读更多...
基于WEB的网上购物系统的设计与实现（附：源码 论文 sql文件）

基于WEB的网上购物系统的设计与实现（附：源码 论文 sql文件）

摘 要 随着计算机网络技术的飞速发展和人们生活节奏的不断加快，电子商务技术已经逐渐融入了人们的日常生活当中，网上商城作为电子商务最普遍的一种形式，已被大众逐渐接受。因此开发一个网上商城系统，适合当今形势，更加…
阅读更多...
【Windows Server 2019】Web服务 IIS 配置与管理—— IIS 的安装与基本配置 Ⅲ

【Windows Server 2019】Web服务 IIS 配置与管理—— IIS 的安装与基本配置 Ⅲ

目录4. 安装 IIS 服务器5. IIS 的基本配置5.1 绑定 IP参考资料关联博文4. 安装 IIS 服务器 准备工作：选择一台服务器作为WEB-IIS服务器，IP地址为192.168.82.208。 在Windows Server 2019系统中，IIS角色是可选组件，默认情况下是没…
阅读更多...
Nginx之负载均衡upstream模块简介和使用

Nginx之负载均衡upstream模块简介和使用

一、upstream模块简介 Nginx的负载均衡功能依赖于ngx_http_upsteam_module模块，所支持的代理方式包括proxy_pass, fastcgi_pass, uwsgi_pass, scgi_pass, memcached_pass和grpc_pass。ngx_http_upstream_module模块有允许Nginx定义一组或多组服务组，使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023