web前端開發工具箱

❶ 前端開發工具

為了讓入行新人能夠更快的掌握Web前端開發，推薦五個優秀的前端開發工具，供小夥伴們參考。

框架類：Bootstrap

全世界最流行的響應式前端框架。基於迅氏HTML、CSS、JAVASCRIPT的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格。並兼容大部分jQuery插件。簡潔靈活，使得Web開發更加快捷。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。

代碼編輯器：Codepen、VScode

CodePen是一個在線的HTML、CSS和JavaScript代碼編輯器，能夠編寫代碼並即時預覽效果。可以用於在線展示的作品，也可以看到其他人在網頁中實現的各種令人驚奇的效果。

VScode免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括弧匹配、代碼片段、代碼對比Diff、GIT等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟體跨平台支持Win、Mac以及Linux。

性能測試：GooglePageSpeedInsights

PageSpeed是谷歌的網頁測試工具，通相信有接觸前端開發的大神們都聽說過Google官方的PageSpeedTools，這個網頁載入速度檢測工具有在線版本也有一個Chrome擴展，叫PageSpeedInsights。PageSpeedInsights的Chrome擴展是由谷歌官方開發的一款可以分析頁面載入的各個方面，包括資源、網路、DOM以及時間線等等信息的插件，過檢測評分給你優化建議。

調試類：AtomAptanaStudio

它是非常強悍的JavaScript編輯器和調試器，可以支持多種AJAX和JavaScript工具箱，包括源衡JavaScript編輯和調試。具有智能代碼完成、瀏覽器兼容性提示、代碼錯誤提示、文檔結構樹等功能。

HTML5：HTML5測試得分能夠提示您正常使用的瀏覽器對於HTML5標准和相關規范的支持情況的指標。

前端開發工具數量很多，這里只是推薦了千鋒武漢HTML5前端小編覺得比較好的5個前端開發工具。如果你有更好的意見，歡迎給我們留言分畝裂散享。

❷ 前端開發框架有哪些

前端框架好不好用還是要看具體情況分析，我這里給你推薦幾個常用的框架，可以按需使用。

1、vue-element-admin

一個基於vue2.0和Element的控制面板UI框架，這是使用vue技術棧開發的前端程序員的首選管理系統模板，模板已經非常成熟了，並且有相關的社區和維護人員，開發時候遇到問題也不要慌。

2、AdminLTE

非常流行的基於Bootstrap 3.x的免費的後台UI框架，這是一個非常老牌的後台管理系統模板，每個頁面都是單獨的html網頁，適合前端入門新手用來做項目。

3、ant-design-pro

這個就不多說了，選擇react技術棧的童鞋們必然離不開這個優秀開箱即用的中台前端/設計解決方案，文檔齊全，組件豐富，一鍵生成模板，更支持開啟復制粘貼模式哦。

4、ng2-admin

這是基於Angular 2、Bootstrap 4和webpack的後台管理面板框架，要收前面已經有了React和vue技術棧的模板，那怎麼能少了ng的？雖然在國外用的比較多，國內較少使用，但絲毫不影響ng作為前端框架三巨頭之一的地位。

9：material-dashboard

基於 Bootstrap 4 和 Material 風格的控制面板。Material Dashboard 是一個開源的 Material

Bootstrap Admin，其設計靈感來自谷歌的 Material Design 。

10：d2-admin

D2Admin 是一個完全 開源免費 的企業中後台產品前端集成方案，基於 vue.js 和 ElementUI 的管理系統前端解決方案 ，小於 60kb的本地首屏 js 載入,已經做好大部分項目前期准備工作

11：vuestic-admin

vuestic-admin管理台儀表盤是一個響應式的儀表盤模板，採用Bootstrap4和絕褲Vue.js構建。這個精美的管理台模板提供了自定義元素組件，如地圖，聊天，個人資料卡，圖標，進度條等，以及用於登茄宴錄和注冊的預建頁面。