前端開發(fā)必備工具，一篇文章一網(wǎng)打盡
文章目錄
? ? ? ? ? ?一、前端提高“生產(chǎn)力”工具
1.WebStorm
2. 遠(yuǎn)程開發(fā) - VSCode
3. 接口測(cè)試 - Postman
4.API在線文檔生成和測(cè)試 - SwaggerUI
5.抓包工具 - Wireshark
6.通用數(shù)據(jù)庫管理 - DBeaver
7.MD編輯器 - Typora
8.虛擬機(jī) - VirtualBox
9.Git存儲(chǔ)庫托管 - GitHub
10.項(xiàng)目管理 - Trello
二、提升前端技能的26個(gè)網(wǎng)站，走過路過不錯(cuò)過：
三、前端真香教程
一、前端提高“生產(chǎn)力”工具
1.WebStorm
下載地址：WebStorm: The Smartest JavaScript IDE, by JetBrains
功能介紹：
WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。官方提供的插件支持，滿足許多不會(huì)配置的同學(xué)，ESlint，詞法高亮，emmet，CSS預(yù)處理器，新版本也添加了對(duì)ES6的支持，內(nèi)建了服務(wù)器調(diào)試。
目前已經(jīng)被廣大中國JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。
2. 遠(yuǎn)程開發(fā) - VSCode
Visual Studio Code - Code Editing. Redefined
VSCode 是目前最受開發(fā)人員歡迎的編碼工具之一，具備強(qiáng)大便捷的遠(yuǎn)程開發(fā)能力。與其它遠(yuǎn)程開發(fā)工具不同的是，VScode 是通過 SSH(Secure Shell) 的方式連接到遠(yuǎn)程服務(wù)器。這種方式不僅省略了繁瑣的上傳和下載步驟，還可以實(shí)現(xiàn)實(shí)時(shí)同步，讓遠(yuǎn)程開發(fā)過程更流暢高效。
功能特色：
-
開源工具，可免費(fèi)使用
-
支持自定義配置
-
可集成Git
-
支持各種文件格式（html/jade/css/less/sass/xml）
-
調(diào)試功能強(qiáng)大
-
插件生態(tài)機(jī)制強(qiáng)大
3. 接口測(cè)試 - Postman
https://www.getpostman.com
Postman 提供功能強(qiáng)大的 Web API 和 HTTP 請(qǐng)求調(diào)試，提供有 Chrome 擴(kuò)展插件版和獨(dú)立的APP，對(duì)于檢查后端端點(diǎn)非常有用。
?功能特色：
-
支持多種請(qǐng)求類型（get、post、put、patch、delete 等）
-
支持在線存儲(chǔ)數(shù)據(jù)和遷移數(shù)據(jù)
-
支持請(qǐng)求 header 和請(qǐng)求參數(shù)的設(shè)置
-
支持不同的認(rèn)證機(jī)制（Basic Auth，Digest Auth，OAuth 1.0，OAuth 2.0 等）
-
響應(yīng)數(shù)據(jù)自動(dòng)按照語法格式高亮，包括 HTML，JSON 和 XML
4.API在線文檔生成和測(cè)試 - SwaggerUI
http://swagger.io
SwaggerUI 是一個(gè) API 在線文檔生成和測(cè)試的利器。有了這款工具，不需要頻繁更新接口文檔，就能保證接口文檔與代碼的一致。
功能特色：
-
支持在多種開發(fā)環(huán)境中使用
-
操作便捷
-
支持所有主流瀏覽器
-
完整的OAS支持
5.抓包工具 - Wireshark
https://www.wireshark.org/download.html
Wireshark 是一款小巧、開源且能在幾乎所有流行操作系統(tǒng)下使用的抓包工具軟件。使用Wireshark 可以截取各種網(wǎng)絡(luò)封包，顯示網(wǎng)絡(luò)封包的詳細(xì)信息?？梢栽赪indows和Mac OS上運(yùn)行。
?文章來源：http://www.zghlxwxcb.cn/news/detail-402013.html
功能特色：
-
快速檢測(cè)網(wǎng)絡(luò)問題
-
快速檢查信息安全相關(guān)問題
-
新通信協(xié)議調(diào)試
6.通用數(shù)據(jù)庫管理 - DBeaver
Download | DBeaver Community
DBeaver 是一個(gè) SQL 客戶端和數(shù)據(jù)庫管理工具。由于 DBeaver 基于 Java 開發(fā)，可以運(yùn)行在各種操作系統(tǒng)上，比如Windows、Linux、macOS 等操作系統(tǒng)。同時(shí)，DBeaver 采用 Eclipse 框架開發(fā)，支持插件擴(kuò)展，并且提供了許多數(shù)據(jù)庫管理工具：ER 圖、數(shù)據(jù)導(dǎo)入/導(dǎo)出、數(shù)據(jù)庫比較、模擬數(shù)據(jù)生成等。
?
功能特色：
-
通過 JDBC 連接到數(shù)據(jù)庫，支持幾乎所有的數(shù)據(jù)庫產(chǎn)品
-
可以處理任何的外部數(shù)據(jù)源
7.MD編輯器 - Typora
https://typora.io/
Typora 是一款免費(fèi)的輕量級(jí)Markdown編輯器，雖然沒有 Mou，Haroopad等Markdown編輯器那么大名鼎鼎，但其輕量、快速、易于上手的特點(diǎn)，絕對(duì)能給你帶來舒適的用戶體驗(yàn)。
功能特色：
-
啟動(dòng)速度快
-
支持實(shí)時(shí)預(yù)覽，所見即所得
-
界面簡(jiǎn)潔易操作
-
支持多拓展
8.虛擬機(jī) - VirtualBox
Downloads – Oracle VM VirtualBox
VirtualBox 是一款免費(fèi)的開源虛擬機(jī)，可以在Windows、Linux和mac等不同操作系統(tǒng)中運(yùn)行。
?
功能特色：
-
開源軟件，免費(fèi)
-
中文界面
-
體積小
-
安裝配置簡(jiǎn)單實(shí)用，社區(qū)活躍
9.Git存儲(chǔ)庫托管 - GitHub
jeresig (John Resig) · GitHub
GitHub 是一個(gè)基于 Web 的 Git 存儲(chǔ)庫托管服務(wù)。無論你是軟件開發(fā)的新手，還是已經(jīng)具有豐富開發(fā)經(jīng)驗(yàn)的老手，相信你在工作中都會(huì)需要這款工具。GitHub是目前世界上最大，最受歡迎的代碼庫，可以幫助開發(fā)人員審查代碼，管理項(xiàng)目和軟件構(gòu)建。
功能特色：
-
極高的安全性
-
APP體積小
-
數(shù)據(jù)同步流暢無沖突
-
不限制私有倉庫數(shù)量和流量
10.項(xiàng)目管理 - Trello
https://trello.com
Trello 是一款靈活易用的項(xiàng)目管理工具，非常適合作為看板和 Scrum 開發(fā)，它易于管理，具有極高的可定制性。雖然不是專門為開發(fā)人員打造的工具，但Trello絕對(duì)可以幫助開發(fā)人員更好地完成工作。
功能特色：
-
更直觀的資料與任務(wù)分類
-
更清晰的便利貼式任務(wù)呈現(xiàn)
-
操作便利，拖曳即可整理分類與管理進(jìn)度
-
可以新增豐富的卡片內(nèi)容
-
支持顏色標(biāo)簽、特殊印章
-
簡(jiǎn)單易懂、即時(shí)同步、多人管理
二、提升前端技能的26個(gè)網(wǎng)站，走過路過不錯(cuò)過：
-
CSS battle【在線比拼 CSS】 : https://cssbattle.dev
-
Learn CSS layout【學(xué)習(xí) CSS 布局】：http://learnlayout.com
-
Flexbox Froggy【學(xué)習(xí) Flex 布局的小游戲】：http://flexboxfroggy.com
-
EnjoyCSS【在線CSS代碼可視化工具】：https://enjoycss.com
-
CSS-Tricks 【CSS 技巧】：https://css-tricks.com
-
Neumorphism【實(shí)現(xiàn)新擬態(tài)效果】：https://neumorphism.io
-
uiGradients【分享漸變色】：https://uigradients.com
-
JavaScript【一個(gè)一直更新的JavaScript 的語法文檔，主要會(huì)寫如何去避免一些常見的錯(cuò)誤】：https://bonsaiden.github.io/JavaScript-Garden/zh/
-
JS Tips【JS 技巧】：https://www.jstips.co
-
JSweekly【技術(shù)周刊 】：https://javascriptweekly.com
-
CDNJS【JavaScript 資料庫】：https://cdnjs.com/libraries
-
Beautiful Open 【開源 JS 庫集合】：https://beautifulopen.com
-
JavaScript Fun【代碼庫集合】：https://www.javascript.fun
-
Stack Overflow【編程人員問答網(wǎng)】：https://stackoverflow.com
-
掘金【高質(zhì)量技術(shù)社區(qū)】：https://juejin.im
-
Codrops【網(wǎng)頁設(shè)計(jì)開發(fā)博客】：https://tympanus.net
-
CodePen【一個(gè)網(wǎng)站前端設(shè)計(jì)開發(fā)平臺(tái)，針對(duì)網(wǎng)站前端代碼的一個(gè)工具，上面有各種效果的案例特效（炫技），可以在他們的 demo 基礎(chǔ)上開發(fā)自己的前端設(shè)計(jì)?！浚?https://codepen.io
-
CodeSandBox【提供一個(gè)在線開發(fā)環(huán)境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即開即用、實(shí)時(shí)編譯預(yù)覽，非常方便。】： https://codesandbox.io
-
JS Bin【輕量級(jí)在線編輯器網(wǎng)站】：https://jsbin.com
-
ICONSVG【在線自定義設(shè)計(jì)SVG圖標(biāo)素材】：https://iconsvg.xyz
-
OpenMoji【免費(fèi)表情符號(hào)庫】：https://www.openmoji.org
-
Share Icon 【免費(fèi)矢量素材圖庫】：https://www.shareicon.net
-
tableconvert 【在線表格編輯器】：https://tableconvert.com
-
Feathericons【極簡(jiǎn) ICON 圖標(biāo)集】：https://feathericons.com
-
HTML5UP 【提供大量的HTML5模版】：https://html5up.net/
-
趣IT【一個(gè)會(huì)更新面試題和練習(xí)題的寶藏王】https://www.funit.cn/
?
三、前端真香教程
web 入門 Html5+css：最新前端開發(fā)入門教程，web前端零基礎(chǔ)html5 +css3+前端項(xiàng)目視頻教程 web 進(jìn)階：web前端進(jìn)階教程，前端html5+css3+移動(dòng)端項(xiàng)目實(shí)戰(zhàn)（含華為新聞，b站移動(dòng)端等）
技術(shù)進(jìn)階 JavaScript：JavaScript全套教程，Web前端必學(xué)的JS入門教程，零基礎(chǔ)JavaScript入門 DOM BOM：JavaScript核心教程，前端基礎(chǔ)教程，JS必會(huì)的DOM BOM操作 jQuery：前端基礎(chǔ)必備教程|jQuery網(wǎng)頁開發(fā)案例精講 Ajax：AJAX零基礎(chǔ)到精通_整合Git核心內(nèi)容全套教程
Vue 開發(fā) Node.js: Node.js全套入門教程，nodejs最新教程含es6模塊化+npm+express+webpack+promise等_Nodejs實(shí)戰(zhàn)案例詳解 Vue2+Vue3全套：Vue全套視頻教程，從vue2.0到vue3.0一套全覆蓋，前端必會(huì)的框架教程
React &小程序開發(fā)
React：前端React視頻教程，react零基礎(chǔ)入門原理詳解到好客租房項(xiàng)目實(shí)戰(zhàn)
零基礎(chǔ)玩轉(zhuǎn)微信小程序：前端微信小程序開發(fā)教程，微信小程序從基礎(chǔ)到發(fā)布全流程_企業(yè)級(jí)商城實(shí)戰(zhàn)(含uni-app項(xiàng)目多端部署)
?
別看了，收藏支持一下文章來源地址http://www.zghlxwxcb.cn/news/detail-402013.html
到了這里，關(guān)于前端開發(fā)常用哪些工具軟件？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
