Ⅰ 你最喜歡用哪款前端開發工具為什麼
前端開發最爽的地方就在於，一個編輯器，一個瀏覽器就足矣走天下。
編輯器——VSCode前端開發利器，超級好用的編輯器，對於大前端來說更是不可多得。由微軟出品，跨平台支持，顏值高，易上手，豐富的插件支持。下面推薦幾個前端常用插件。
調試工具： 前端性能優化工具：
Yellow Lab Tools ：一款Web性能及前端質量測試工具。與其他工具不同的是，它有一些在其他工具上無法看到的獨特功能，例如頁面載入時 JavaScript 與 DOM 互動和其他程序代碼驗證問題。
DOM monster ：你只需要添加到你的瀏覽器書簽中,在任何需要調試的頁面點擊這個書簽,它就能夠幫助你列出目前頁面出現的性能問題。
前端開發是目前一個非常火的行業，就業前景和薪資水平都非常不錯，至於開發工具的話，那就非常多了，大部分代碼編輯器、IDE環境都支持，下面我簡單介紹4個非常不錯的前端開發工具，感興趣的朋友可以嘗試一下：
01 代碼編輯器這是目前前端開發一個非常流行的開發工具，在業界非常受歡迎，免費、開源、跨平台，由微軟自主研發，可以說是良心產品，常見的智能補全、代碼高亮、語法提示等功能這個軟體都能很好支持，除此之外，插件擴展非常豐富，可以很好的進行代碼編輯和調試，輕巧靈活，運行速度快，對於前端開發來說，是一個非常不錯的選擇：
這也是一個比較輕巧靈活的代碼編輯器，文本編輯功能強大，完美支持3大操作平台，但原則上不免費，和VS Code類似，Sublime Text也支持自動補全、語法提示、代碼高亮等常見功能，除此之外，針對前段開發也提供了非常多的插件，不管是編輯還是調試代碼來說，都非常方便，對於前端開發來說，也是一個不錯的選擇：
02 IDE環境
這是一個純粹的國產Web IDE開發工具，目前在前端開發中也有著較高的使用率，常見的自動補全、代碼高亮、語法提示、錯誤檢查等功能這個軟體都能很好兼容，除此之外，界面柔綠、清爽護眼，針對Vue專門打造了插件擴展，可以很好的提高開發效率，還支持安卓、iOS打包，對於前端開發來說，也是一個非常不錯的工具：
這是一個非常專業的Web IDE開發工具，Jetbrains公司的產品，被譽為「Web前端開發神器」、「最智能的JavaScript IDE」，除了基本的智能補全、代碼高亮、語法提示等常見功能，這個軟體還支持代碼分析與重構、 聯想查詢、 單元測試等高級功能，因此在開發效率上更高，也更適合大型項目，對於多人協作的前端開發來說，是一個非常不錯的選擇：
WebStorm
和idea同屬於jetbrains公司開發的，它是旗下一款JavaScript開發工具，被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。
早起作為一個插件可以集成與Eclipse中來開發前端，現在已經獨立出來，也是我最早接觸js所使用的一款開發工具，如果熟悉了Eclipse快捷鍵的童鞋可以快速上手。
一款代碼編輯器，藉助豐富的插件資源，可以擴展成強大的前端開發工具，和IDE相比，屬於一款輕量級的，啟動特別快。
Atom
作為開源老大哥GitHub出的一款代碼編輯器，和上面那個比較而言，插件略少，但和GitHub無縫結合，尤其是markdown編寫，界面也很漂亮。
TextMate是Mac下的著名的文本編輯器軟體，與BBedit一起並稱蘋果機上的emacs和vim。尤其適合程序員使用，可以定製許多貼心使用的功能。
Emacs即Editor MACroS（宏編輯器），是一種強大的文本編輯器。Emacs使用了Emacs Lisp這種有著極強擴展性的編程語言（它的核心是一個Emacs Lisp解釋器），並實現了文本編輯支持等的擴展。
Notepad++是 Windows操作系統下的一套文本編輯器(軟體版權許可證: GPL)，有完整的中文化介面及支持多國語言編寫的功能(UTF8 技術)。
VSC-VSCode
輕量快速，高顏值，社區開源，豐富擴展，微軟支持
還有超好用的遠程開發(vscode remote)和協作(live share)支持
HTML通常會和JavaScript、CSS同時出現。三者均是前端開發最常用到的。目前最常用到的HTML其實就是HTML5。常用的前端編程軟體有HBuilder、Sublime Text等等。
HBuilder是一款免費的國產前端開發工具，編者用的就是HBuilder，對於小白和英語不太好的前端開發者這是一款難得的IDE。對代碼自動補全方面簡直是強大到沒朋友。強力推薦。
Sublime Text是一個輕量級的編輯器，不端支持前端的html，js，css。還支持覺得多數的後端語言，比如C語言、java、python等。sublime text的強大之處是支持各種插件而且快捷鍵非常好用，可以極大的提高開發效率。缺點是代碼提示方面不如Hbuilder。
很高興能回答你的問題，作為一個後端開發，也曾經開發過前端，也用過很多前端開發工具。
1.sublime text用著確實不錯，但是代碼開發提示不強，平時用著文本編輯器還是可以的。
2.hbuild+用了一段時間各種不適用，最後就卸載了。
3.vs code用著一段時間寫vue，需要安裝插件，而且提交代碼用感覺不方便，把不想提交的最後提交了，導致代碼沖突，也許是因為自己用不熟。
4.webstorm 推薦使用，代碼智能提示，而且提交代碼方便。
無論是Python、Java、javascript，當我們選擇一款開發工具時，很多人都會首先想到jetbrain全家桶，Webstorm、IDEA、Pycharm....不得不說，jetbrain在開發工具方面真的是頗有心得、爐火純青。
但是，如果做前端開發，我認為除了jetbrain的webstorm，還有很多選擇，而其中我最為推薦的當屬VS Code，下面就來介紹一下。
VS Code
微軟在開發工具領域已經有了多年積淀，而VS Code有時微軟結合了visual studio和其他開發工具，不斷改進、優化推出的一款免費開發工具。
可以說VS Code是當下最為熱門的開發工具之一，對比於eclipse、IDEA這些老牌開發工具，微軟對於VS Code的改變更為大膽創新，已經處於領頭羊的地位。每年微軟開發者大會，都會對 VS Code進行大幅度的創新，經過多年的優化，VS Code已經讓很多開發者愛不釋手。
首先說一下它幾個為人熟知的優點，
首先說一下輕量化，我覺得僅憑這一點，就足以讓jetbrain全家桶汗顏。無論是webstorm、還是IDEA，最令人痛苦的就是打開過程，臃腫、漫長，載入工程項目和配置項需要多大幾分鍾，令人無法忍受。而VS Code則不同，它更像一個編輯器，能夠秒級打開，速度堪比UE、notepad++這些文本編輯器。
其次說一下豐富插件，豐富的插件造就了VS Code完整的生態，「你想要的，這里都有」，無論是標簽樣式還是DEBUG或者功能增強，VS Code都有非常多熱門的插件，使得你的開發效率大大提升，當然，前端需要的那些優質插件這里都有。
其實，讓我轉向VS Code並非上述這兩點，而是 遠程開發 。
我覺得這是微軟大膽創新和引領者角色必然的產物，讓很多其他開發工具很難望其項背。
有了VS Code遠程開發功能，我們可以實時同步本地和伺服器代碼，不需要再去復雜的配置遠程伺服器，對於項目管理也非常方便。
WebStorm和PS
尤其PS，平時生活中也需要用到，挺方便的
喜歡用webstorm，atom和vs code，sublimetext都裝了，幾乎只用webstorm，atom界面是漂亮，也是我第一個下載安裝的，裝了各種插件，那時初學，感覺提示不全，還有就是插件安裝了幾個後開機明顯變好慢，無奈下了webstorm，感覺很爽
Google PageSpeed Insights 可以為網站生成性能報告，它在移動設備和桌面設備上都是免費的。並且還給出了影響頁面載入速度的原因，並為這些問題提供了解決方案。網站速度按照 100 分進行劃分，其中：
2. Pingdom Website Speed Test
Pingdom Website Speed Test 可以全面分析影響頁面Web速度的因素。此外，還可以查看網站在亞洲、歐洲等多個不同的地理位置的性能信息。
3. WebPagetest
WebPagetest是 AOL 開發的一款在線的免費性能評測網站，從全球多個地點運行免費網站速度測試。可以運行簡單的測試或執行高級測試，包括多步驟事務、視頻捕獲、內容阻塞等等。還將依據測試結果提供豐富的診斷信息，包括資源載入瀑布圖，頁面速度優化檢查和改進建議，會給每一項內容一個最終的評級。
4. GTmetrix
GTmetrix 是一個類似於 pingdom 的工具，可以快速輕松地測試網站速度。它主要有PageSpeed和YSlow兩部分組成，並提供相應的得分數據，能夠真實的反應出網站的性能，並且會提供可行性建議來幫助改善網站性能。
5. Keycdn Tool
Keycdn Tool 是一個在全球 10 不同地點的網站速度測試工具。它允許測試任何頁面的性能。返回的結果將提供請求、內容大小和載入時間等詳細信息。此外，還有一個完整的瀑布圖，詳細說明了每個資源的載入時間和 HTTP 頭。
6. GiftOfSpeed
GiftofSpeed是一款免費網站載入速度測試工具，可以在上面獲得網站綜合性能信息，它能夠展示網站載入時間以及評估網站有哪些需要改進的地方，並給予一個客觀的綜合評分。
GiftofSpeed 的測試結果以瀑布流展示，可以很容易看到網站載入速度，每一項資源的的載入順序、大小與響應時間的長短，方便了解網站的各項載入資源。此外，它還提供了載入時間最長的內部文件以及外部文件，從而分析出是由哪些因素影響了你網站的載入速度，就可以專門針對這些載入時間較長的元素進行優化，從而最大限度提升網站載入速度。
7. Pagelocity
Pagelocity 是一個網站分析性能測試工具。這個工具也提供了追蹤競爭對手的能力。代碼檢視圖在類似工具中是獨一無二的。如果想知道 TTFB 和圖形化 DOM 元素等，都能通過這項工具獲取到。
8. Sucuri Loadtime Tester
Sucuri Load Time Tester 是一個網站分析性能測試工具，它用不同的顏色表示網速快慢，可以很直觀地看出測試網站在不同國家的運行速度。綠色表示暢通，沒有顏色的普通數字表示一般，黃色表示中等偏慢，紅色表示緩慢。
9. GEEKFLARE
GEEKFLARE 這是一套免費的性能測試工具，用於測試網站的 DNS、安全性、性能、網路和 SEO 等問題。
10. Dareboost
DareBoost 是一個免費網站速度測試和網站分析工具。它提供超過 100 種不同的檢查項目用以分析你的網站的速度。可以測試桌面端與行動頁面、Firefox 與 Chrome 和五個節點的速度差異。
Ⅱ 前端什麼樣的代碼開發工具好用
每個前端開發人員都有自己喜歡的開發工具，用這些工具能讓編碼更容易並且「令人愉快」。分享一些我認為真的很棒的很棒的Web開發工具！
1.Glitch
glitch
好的，這不僅僅是一個工具，還是一個非常棒的編碼平台以及一個很棒的技術社區。我可以在內置代碼編輯器的幫助下託管我的項目。支持多種語言，但最適合NodeJS。
2.Shadows
brumm.af/shadows
這個網站提供生成平滑陰影的CSS代碼，可以創建平滑的邊框陰影。它看起來真的很流暢，令人滿意。
3.Coolors
coolors.co
這是一款非常好的在線工具，可以為項目生成匹扒沒桐配的顏色方案。如果不喜歡當前的方案，按下空格鍵，它會重新生成一個配色方案，直到你滿意~
4.Blobmaker
blobmaker.app
Blobmaker可幫助你隨機生成各種尺寸，不同顏色和形狀的SVGBlob。你可以用作背景或創建看起來很酷的動畫。
5.Getwavs
getwaves.io
與Blobmaker相似，GetWaves能夠隨機生成不同顏色和不同數量的波浪。用作網頁的頁腳或頁眉看起來不錯。
6.Undraw.co
undraw.co
開放源代春坦碼項目的SVG插圖集，可用來做登錄頁面，404頁面等，當然普通頁面也能用!上面的插圖可以不帶歸屬地版權的使用，無需支付任何費用。
7.Marcdown
liyasthomas.github.io/marcdown
由LiyasThomas提供的在線實時的Markdown網頁編輯器，它可預覽Markdown代碼，將其發布到GitHub上。它提供一個非常漂亮的暗黑模式。還可離線工作，這使得它顯得更出色。
8.postwoman
postwoman.io
這是LiyasThomas構建的另一個工具。Postwoman是一個API請求構建工作。開發者可以不使用代理來測試API。這是一察判個漸進式Web應用程序，可以保存到桌面來用。它是輕量級的產品，基本上可以是Postman的在線替代品。
9.Screely
screely
它可以幫助你創建超級漂亮的網站截圖模型。如果你不是MacBook用戶，但需要更好的網站圖片作為自述文件，它非常適合我們。
10.CSS網格生成器
cssgrid-generator.netlify/
這是SarahDrasner的創建的優秀網站，它使用CSS創建動態網格布局。
以上是10款web前端開發工具分享，希望對你有幫助。