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

編輯器——VSCode

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

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

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

• Debugger for Chrome：直接讓你的代碼在Chrome中運(yùn)行代碼，vscode中調(diào)試。

• jQuery Code Snippets：jQuery用戶(hù)的福音，用起來(lái)難道不香嗎？

• Atuo Rename Tag：

• CSS Peek：很方便的來(lái)查看CSS樣式。

調(diào)試工具：

• F12功能：瀏覽器自備，功能強(qiáng)大，推薦使用Chrome瀏覽器

• Fiddler：非常好用的一款抓包工具，可以抓幾乎所有的應(yīng)用程序的HTTP請(qǐng)求。可以抓包，修改請(qǐng)求等。唯一的缺點(diǎn)就是需要安裝.net支持。

• Firebug：火狐瀏覽器的經(jīng)典插件，能夠調(diào)試所有網(wǎng)站語(yǔ)言，最經(jīng)典實(shí)用的莫過(guò)于對(duì)Javascript語(yǔ)言的調(diào)試功能了。

• Postman：一款功能強(qiáng)大的網(wǎng)頁(yè)調(diào)試與發(fā)送網(wǎng)頁(yè)HTTP請(qǐng)求的Chrome插件。可以讓我們很方便的對(duì)REST API等HTTP服務(wù)接口進(jìn)行測(cè)試。

• User Agent Switcher：從名稱(chēng)我們就可以看出來(lái)，用來(lái)更換瀏覽器的UserAgent。

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

Yellow Lab Tools：一款Web性能及前端質(zhì)量測(cè)試工具。與其他工具不同的是，它有一些在其他工具上無(wú)法看到的獨(dú)特功能，例如頁(yè)面加載時(shí) JavaScript 與 DOM 互動(dòng)和其他程序代碼驗(yàn)證問(wèn)題。

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

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

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

01

代碼編輯器

• VS Code

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

• Sublime Text

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

02

IDE環(huán)境

• HBuilder

這是一個(gè)純粹的國(guó)產(chǎn)Web IDE開(kāi)發(fā)工具，目前在前端開(kāi)發(fā)中也有著較高的使用率，常見(jiàn)的自動(dòng)補(bǔ)全、代碼高亮、語(yǔ)法提示、錯(cuò)誤檢查等功能這個(gè)軟件都能很好兼容，除此之外，界面柔綠、清爽護(hù)眼，針對(duì)Vue專(zhuān)門(mén)打造了插件擴(kuò)展，可以很好的提高開(kāi)發(fā)效率，還支持安卓、iOS打包，對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，也是一個(gè)非常不錯(cuò)的工具：

• WebStorm

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

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

WebStorm

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

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

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

Atom

作為開(kāi)源老大哥GitHub出的一款代碼編輯器，和上面那個(gè)比較而言，插件略少，但和GitHub無(wú)縫結(jié)合，尤其是markdown編寫(xiě)，界面也很漂亮。

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

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

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

VSC-VSCode

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

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

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

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

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

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

無(wú)論是Python、Java、javascript，當(dāng)我們選擇一款開(kāi)發(fā)工具時(shí)，很多人都會(huì)首先想到j(luò)etbrain全家桶，Webstorm、IDEA、Pycharm....不得不說(shuō)，jetbrain在開(kāi)發(fā)工具方面真的是頗有心得、爐火純青。

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

VS Code

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

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

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

首先說(shuō)一下它幾個(gè)為人熟知的優(yōu)點(diǎn)，

• 輕量化

• 豐富的插件

首先說(shuō)一下輕量化，我覺(jué)得僅憑這一點(diǎn)，就足以讓jetbrain全家桶汗顏。無(wú)論是webstorm、還是IDEA，最令人痛苦的就是打開(kāi)過(guò)程，臃腫、漫長(zhǎng)，加載工程項(xiàng)目和配置項(xiàng)需要多大幾分鐘，令人無(wú)法忍受。而VS Code則不同，它更像一個(gè)編輯器，能夠秒級(jí)打開(kāi)，速度堪比UE、notepad++這些文本編輯器。

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

其實(shí)，讓我轉(zhuǎn)向VS Code并非上述這兩點(diǎn)，而是遠(yuǎn)程開(kāi)發(fā)。

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

有了VS Code遠(yuǎn)程開(kāi)發(fā)功能，我們可以實(shí)時(shí)同步本地和服務(wù)器代碼，不需要再去復(fù)雜的配置遠(yuǎn)程服務(wù)器，對(duì)于項(xiàng)目管理也非常方便。

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

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

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

3.vs code用著一段時(shí)間寫(xiě)vue，需要安裝插件，而且提交代碼用感覺(jué)不方便，把不想提交的最后提交了，導(dǎo)致代碼沖突，也許是因?yàn)樽约河貌皇臁?/p>

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

1. Google PageSpeed Insights

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

• 大于90：較好；
• 50-90：需要改進(jìn)；
• 小于50：較差

2. Pingdom Website Speed Test

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

3. WebPagetest

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

4. GTmetrix

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

5. Keycdn Tool

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

6. GiftOfSpeed

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

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

7. Pagelocity

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

8. Sucuri Loadtime Tester

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

9. GEEKFLARE

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

10. Dareboost

DareBoost 是一個(gè)免費(fèi)網(wǎng)站速度測(cè)試和網(wǎng)站分析工具。它提供超過(guò) 100 種不同的檢查項(xiàng)目用以分析你的網(wǎng)站的速度。可以測(cè)試桌面端與行動(dòng)頁(yè)面、Firefox 與 Chrome 和五個(gè)節(jié)點(diǎn)的速度差異。

以上文章來(lái)源于前端充電寶 ，作者CUGGZ

WebStorm和PS

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

喜歡用webstorm，atom和vs code，sublimetext都裝了，幾乎只用webstorm，atom界面是漂亮，也是我第一個(gè)下載安裝的，裝了各種插件，那時(shí)初學(xué)，感覺(jué)提示不全，還有就是插件安裝了幾個(gè)后開(kāi)機(jī)明顯變好慢，無(wú)奈下了webstorm，感覺(jué)很爽