前端開發(fā)最爽的地方就在于，一個編輯器，一個瀏覽器就足矣走天下。

編輯器——VSCode

前端開發(fā)利器，超級好用的編輯器，對于大前端來說更是不可多得。由微軟出品，跨平臺支持，顏值高，易上手，豐富的插件支持。下面推薦幾個前端常用插件。

• HTML Snippets：及初級又實用的HTML代碼智能提示，對經(jīng)常手誤的小伙伴簡直不能太友好。

• HTML CSS Support：讓你在寫html 標簽時寫class 智能提示當前項目所支持的樣式，目前最新版本已經(jīng)支持css文件檢索。

• Debugger for Chrome：直接讓你的代碼在Chrome中運行代碼，vscode中調試。

• jQuery Code Snippets：jQuery用戶的福音，用起來難道不香嗎？

• Atuo Rename Tag：

• CSS Peek：很方便的來查看CSS樣式。

調試工具：

• F12功能：瀏覽器自備，功能強大，推薦使用Chrome瀏覽器

• Fiddler：非常好用的一款抓包工具，可以抓幾乎所有的應用程序的HTTP請求?？梢宰グ薷恼埱蟮?。唯一的缺點就是需要安裝.net支持。

• Firebug：火狐瀏覽器的經(jīng)典插件，能夠調試所有網(wǎng)站語言，最經(jīng)典實用的莫過于對Javascript語言的調試功能了。

• Postman：一款功能強大的網(wǎng)頁調試與發(fā)送網(wǎng)頁HTTP請求的Chrome插件。可以讓我們很方便的對REST API等HTTP服務接口進行測試。

• User Agent Switcher：從名稱我們就可以看出來，用來更換瀏覽器的UserAgent。

前端性能優(yōu)化工具：

Yellow Lab Tools：一款Web性能及前端質量測試工具。與其他工具不同的是，它有一些在其他工具上無法看到的獨特功能，例如頁面加載時 JavaScript 與 DOM 互動和其他程序代碼驗證問題。

DOM monster：你只需要添加到你的瀏覽器書簽中,在任何需要調試的頁面點擊這個書簽,它就能夠幫助你列出目前頁面出現(xiàn)的性能問題。

本文為作者“一個程序員的奮斗史”悟空問答原創(chuàng)文章，未經(jīng)允許轉載、抄襲必究！

前端開發(fā)是目前一個非常火的行業(yè)，就業(yè)前景和薪資水平都非常不錯，至于開發(fā)工具的話，那就非常多了，大部分代碼編輯器、IDE環(huán)境都支持，下面我簡單介紹4個非常不錯的前端開發(fā)工具，感興趣的朋友可以嘗試一下：

01

代碼編輯器

• VS Code

這是目前前端開發(fā)一個非常流行的開發(fā)工具，在業(yè)界非常受歡迎，免費、開源、跨平臺，由微軟自主研發(fā)，可以說是良心產(chǎn)品，常見的智能補全、代碼高亮、語法提示等功能這個軟件都能很好支持，除此之外，插件擴展非常豐富，可以很好的進行代碼編輯和調試，輕巧靈活，運行速度快，對于前端開發(fā)來說，是一個非常不錯的選擇：

• Sublime Text

這也是一個比較輕巧靈活的代碼編輯器，文本編輯功能強大，完美支持3大操作平臺，但原則上不免費，和VS Code類似，Sublime Text也支持自動補全、語法提示、代碼高亮等常見功能，除此之外，針對前段開發(fā)也提供了非常多的插件，不管是編輯還是調試代碼來說，都非常方便，對于前端開發(fā)來說，也是一個不錯的選擇：

02

IDE環(huán)境

• HBuilder

這是一個純粹的國產(chǎn)Web IDE開發(fā)工具，目前在前端開發(fā)中也有著較高的使用率，常見的自動補全、代碼高亮、語法提示、錯誤檢查等功能這個軟件都能很好兼容，除此之外，界面柔綠、清爽護眼，針對Vue專門打造了插件擴展，可以很好的提高開發(fā)效率，還支持安卓、iOS打包，對于前端開發(fā)來說，也是一個非常不錯的工具：

• WebStorm

這是一個非常專業(yè)的Web IDE開發(fā)工具，Jetbrains公司的產(chǎn)品，被譽為“Web前端開發(fā)神器”、“最智能的JavaScript IDE”，除了基本的智能補全、代碼高亮、語法提示等常見功能，這個軟件還支持代碼分析與重構、聯(lián)想查詢、單元測試等高級功能，因此在開發(fā)效率上更高，也更適合大型項目，對于多人協(xié)作的前端開發(fā)來說，是一個非常不錯的選擇：

當然，除了以上4個比較常用的前端開發(fā)工具，還有許多其他軟件也支持前端開發(fā)，像Atom、Notepad++、Dreamweaver等也有非常不錯，但在功能和使用范圍上就不如前面4個軟件了，網(wǎng)上也有相關教程和資料，介紹的非常詳細，感興趣的話，可以搜一下，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言進行補充。

WebStorm

和idea同屬于jetbrains公司開發(fā)的，它是旗下一款JavaScript開發(fā)工具，被廣大中國JS開發(fā)者譽為“Web前端開發(fā)神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。

早起作為一個插件可以集成與Eclipse中來開發(fā)前端，現(xiàn)在已經(jīng)獨立出來，也是我最早接觸js所使用的一款開發(fā)工具，如果熟悉了Eclipse快捷鍵的童鞋可以快速上手。

一款代碼編輯器，借助豐富的插件資源，可以擴展成強大的前端開發(fā)工具，和IDE相比，屬于一款輕量級的，啟動特別快。

Atom

作為開源老大哥GitHub出的一款代碼編輯器，和上面那個比較而言，插件略少，但和GitHub無縫結合，尤其是markdown編寫，界面也很漂亮。

TextMate是Mac下的著名的文本編輯器軟件，與BBedit一起并稱蘋果機上的emacs和vim。尤其適合程序員使用，可以定制許多貼心使用的功能。

Emacs即Editor MACroS（宏編輯器），是一種強大的文本編輯器。Emacs使用了Emacs Lisp這種有著極強擴展性的編程語言（它的核心是一個Emacs Lisp解釋器），并實現(xiàn)了文本編輯支持等的擴展。

Notepad++是 Windows操作系統(tǒng)下的一套文本編輯器(軟件版權許可證: GPL)，有完整的中文化接口及支持多國語言編寫的功能(UTF8 技術)。

VSC-VSCode

輕量快速，高顏值，社區(qū)開源，豐富擴展，微軟支持

還有超好用的遠程開發(fā)(vscode remote)和協(xié)作(live share)支持

HTML通常會和JavaScript、CSS同時出現(xiàn)。三者均是前端開發(fā)最常用到的。目前最常用到的HTML其實就是HTML5。常用的前端編程軟件有HBuilder、Sublime Text等等。

HBuilder是一款免費的國產(chǎn)前端開發(fā)工具，編者用的就是HBuilder，對于小白和英語不太好的前端開發(fā)者這是一款難得的IDE。對代碼自動補全方面簡直是強大到?jīng)]朋友。強力推薦。

Sublime Text是一個輕量級的編輯器，不端支持前端的html，js，css。還支持覺得多數(shù)的后端語言，比如C語言、java、python等。sublime text的強大之處是支持各種插件而且快捷鍵非常好用，可以極大的提高開發(fā)效率。缺點是代碼提示方面不如Hbuilder。

感謝您的閱讀，如果喜歡，麻煩點贊支持一下吧！

無論是Python、Java、javascript，當我們選擇一款開發(fā)工具時，很多人都會首先想到jetbrain全家桶，Webstorm、IDEA、Pycharm....不得不說，jetbrain在開發(fā)工具方面真的是頗有心得、爐火純青。

但是，如果做前端開發(fā)，我認為除了jetbrain的webstorm，還有很多選擇，而其中我最為推薦的當屬VS Code，下面就來介紹一下。

VS Code

VS Code是一款出自微軟之手的開發(fā)工具，我想，僅憑這一點就值得關注并且嘗試一下。

微軟在開發(fā)工具領域已經(jīng)有了多年積淀，而VS Code有時微軟結合了visual studio和其他開發(fā)工具，不斷改進、優(yōu)化推出的一款免費開發(fā)工具。

可以說VS Code是當下最為熱門的開發(fā)工具之一，對比于eclipse、IDEA這些老牌開發(fā)工具，微軟對于VS Code的改變更為大膽創(chuàng)新，已經(jīng)處于領頭羊的地位。每年微軟開發(fā)者大會，都會對 VS Code進行大幅度的創(chuàng)新，經(jīng)過多年的優(yōu)化，VS Code已經(jīng)讓很多開發(fā)者愛不釋手。

首先說一下它幾個為人熟知的優(yōu)點，

• 輕量化

• 豐富的插件

首先說一下輕量化，我覺得僅憑這一點，就足以讓jetbrain全家桶汗顏。無論是webstorm、還是IDEA，最令人痛苦的就是打開過程，臃腫、漫長，加載工程項目和配置項需要多大幾分鐘，令人無法忍受。而VS Code則不同，它更像一個編輯器，能夠秒級打開，速度堪比UE、notepad++這些文本編輯器。

其次說一下豐富插件，豐富的插件造就了VS Code完整的生態(tài)，“你想要的，這里都有”，無論是標簽樣式還是DEBUG或者功能增強，VS Code都有非常多熱門的插件，使得你的開發(fā)效率大大提升，當然，前端需要的那些優(yōu)質插件這里都有。

其實，讓我轉向VS Code并非上述這兩點，而是遠程開發(fā)。

我覺得這是微軟大膽創(chuàng)新和引領者角色必然的產(chǎn)物，讓很多其他開發(fā)工具很難望其項背。

有了VS Code遠程開發(fā)功能，我們可以實時同步本地和服務器代碼，不需要再去復雜的配置遠程服務器，對于項目管理也非常方便。

很高興能回答你的問題，作為一個后端開發(fā)，也曾經(jīng)開發(fā)過前端，也用過很多前端開發(fā)工具。

1.sublime text用著確實不錯，但是代碼開發(fā)提示不強，平時用著文本編輯器還是可以的。

2.hbuild+用了一段時間各種不適用，最后就卸載了。

3.vs code用著一段時間寫vue，需要安裝插件，而且提交代碼用感覺不方便，把不想提交的最后提交了，導致代碼沖突，也許是因為自己用不熟。

4.webstorm 推薦使用，代碼智能提示，而且提交代碼方便。

1. Google PageSpeed Insights

Google PageSpeed Insights 可以為網(wǎng)站生成性能報告，它在移動設備和桌面設備上都是免費的。并且還給出了影響頁面加載速度的原因，并為這些問題提供了解決方案。網(wǎng)站速度按照 100 分進行劃分，其中：

• 大于90：較好；
• 50-90：需要改進；
• 小于50：較差

2. Pingdom Website Speed Test

Pingdom Website Speed Test 可以全面分析影響頁面Web速度的因素。此外，還可以查看網(wǎng)站在亞洲、歐洲等多個不同的地理位置的性能信息。

3. WebPagetest

WebPagetest是 AOL 開發(fā)的一款在線的免費性能評測網(wǎng)站，從全球多個地點運行免費網(wǎng)站速度測試?？梢赃\行簡單的測試或執(zhí)行高級測試，包括多步驟事務、視頻捕獲、內容阻塞等等。還將依據(jù)測試結果提供豐富的診斷信息，包括資源加載瀑布圖，頁面速度優(yōu)化檢查和改進建議，會給每一項內容一個最終的評級。

4. GTmetrix

GTmetrix 是一個類似于 pingdom 的工具，可以快速輕松地測試網(wǎng)站速度。它主要有PageSpeed和YSlow兩部分組成，并提供相應的得分數(shù)據(jù)，能夠真實的反應出網(wǎng)站的性能，并且會提供可行性建議來幫助改善網(wǎng)站性能。

5. Keycdn Tool

Keycdn Tool 是一個在全球 10 不同地點的網(wǎng)站速度測試工具。它允許測試任何頁面的性能。返回的結果將提供請求、內容大小和加載時間等詳細信息。此外，還有一個完整的瀑布圖，詳細說明了每個資源的加載時間和 HTTP 頭。

6. GiftOfSpeed

GiftofSpeed是一款免費網(wǎng)站載入速度測試工具，可以在上面獲得網(wǎng)站綜合性能信息，它能夠展示網(wǎng)站加載時間以及評估網(wǎng)站有哪些需要改進的地方，并給予一個客觀的綜合評分。

GiftofSpeed 的測試結果以瀑布流展示，可以很容易看到網(wǎng)站加載速度，每一項資源的的載入順序、大小與響應時間的長短，方便了解網(wǎng)站的各項載入資源。此外，它還提供了載入時間最長的內部文件以及外部文件，從而分析出是由哪些因素影響了你網(wǎng)站的載入速度，就可以專門針對這些載入時間較長的元素進行優(yōu)化，從而最大限度提升網(wǎng)站載入速度。

7. Pagelocity

Pagelocity 是一個網(wǎng)站分析性能測試工具。這個工具也提供了追蹤競爭對手的能力。代碼檢視圖在類似工具中是獨一無二的。如果想知道 TTFB 和圖形化 DOM 元素等，都能通過這項工具獲取到。

8. Sucuri Loadtime Tester

Sucuri Load Time Tester 是一個網(wǎng)站分析性能測試工具，它用不同的顏色表示網(wǎng)速快慢，可以很直觀地看出測試網(wǎng)站在不同國家的運行速度。綠色表示暢通，沒有顏色的普通數(shù)字表示一般，黃色表示中等偏慢，紅色表示緩慢。

9. GEEKFLARE

GEEKFLARE 這是一套免費的性能測試工具，用于測試網(wǎng)站的 DNS、安全性、性能、網(wǎng)絡和 SEO 等問題。

10. Dareboost

DareBoost 是一個免費網(wǎng)站速度測試和網(wǎng)站分析工具。它提供超過 100 種不同的檢查項目用以分析你的網(wǎng)站的速度?？梢詼y試桌面端與行動頁面、Firefox 與 Chrome 和五個節(jié)點的速度差異。

以上文章來源于前端充電寶 ，作者CUGGZ

WebStorm和PS

尤其PS，平時生活中也需要用到，挺方便的

喜歡用webstorm，atom和vs code，sublimetext都裝了，幾乎只用webstorm，atom界面是漂亮，也是我第一個下載安裝的，裝了各種插件，那時初學，感覺提示不全，還有就是插件安裝了幾個后開機明顯變好慢，無奈下了webstorm，感覺很爽