1 . Wappalyzer

全球用戶數：1,000,000+

Wappalyzer可以幫助我們了解目標網站的構建方式。工作當中存在大量此類情況，客戶需要我們參照某些網站來做開發，作為一款建站前的研究工具，Wappalyzer可以在這方面有效的支持到我們，有助于幫我們了解目標網站具體有哪些技術應用。

尤其是在做大型項目開發前，這個工具可以給我們帶來很好啟發。

相關鏈接：
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg

2 . Window Resizer 響應式測試

全球用戶數：600,000+

在Web開發中，響應式網站設計已經相當普遍。而在相關開發測試中，你大概率會在不同設備上查看正在構建中的網頁效果、調整瀏覽器窗口的大小以及模擬不同的屏幕分辨率，那就用Window Resizer就好，它可以幫助我們查看網頁布局在特定分辨率下的外觀，自定義分辨率，設置窗口的寬度和高度和窗口位置等。

相關鏈接：
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

3 . Marmoset 代碼快照

全球用戶數：10,000+

我們日常工作中向客戶或上級展示代碼也是很常見的，常規的屏幕截圖可能并不太具有展示和“提案”性，有沒有考慮過讓代碼截圖更加生動有趣？

我使用Marmoset捕捉很酷的代碼快照，改變下視角和色彩主題，而后把置入到演示文稿或者線上，非常帥氣了呢～

相關鏈接：
https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb

4 . Code Cola：source code viewer

全球用戶數：30,000+

如果你平時傾向于用Chrome，可能會在頁面上編寫CSS，當用到Inspect Element時，一定感覺相當麻煩。Code Cola是一個Chrome的擴展，是我所知道的最棒的Chrome CSS編輯器，尤其對于前端入門者來說，界面非常的友好和易用。

相關鏈接：
https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en

5 . CSSViewer

全球用戶數：100,000+

如果你只需要查看網頁上的CSS屬性，那么CSSViewer就是不錯的選擇；只需單擊圖標，將鼠標指針懸停在我們要查看的任何元素上，即可看到其CSS屬性。

由于具有上面所說的懸停功能，因此個人感覺它與Chrome的Inspect Element相比，要更快捷，更易于使用。

相關鏈接：
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en

6 . JSONView

全球用戶數：1,000,000+

當前端開發工作涉及到對數據傳輸的處理時，JSON就會被用到，沒什么可說的，前端開發者必須了解有關JSON的原理，我們日常的大量工作也都會需要去查看和驗證網頁上的JSON文檔。

JSONView是幫助你執行相關操作的一個簡單工具，這么多年了，它一直是我知道的同類工具中最好的。

相關鏈接：
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en

7 . Lighthouse

全球用戶數：600,000+

如今，自動化越來越成為前端發展的一個大趨勢，Lighthouse 正是一款開源的自動化工具，用于改進網絡應用的質量；你可以借助這個工具來查看性能、訪問性、SEO情況等等。它將針對此頁面運行一連串的測試，然后生成一個有關頁面性能的報告。

Lighthouse絕對為我和我身邊的朋友提供了一種夢寐以求的網頁性能提升途徑，無法想象沒有它，我的日常工作會成什么樣子。

相關鏈接：
https://developers.google.com/web/tools/lighthouse?hl=zh-cn

8 . Clear Cache

全球用戶數：800,000+

每當需要清除Web瀏覽器上的緩存時，大多必須手動轉到設置頁面；前端開發人員往往被困在往返執行這種低效工作的測試里。如果你擁有Clear Cache這個擴展工具，就可以提高效率，我一直在使用它，只需單擊即可完成操作，省下了大量寶貴時間。

相關鏈接：
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en

9 . Cookie Manager

全球用戶數：20,000+

cookie管理器是前端開發的另一個關鍵“法寶“。市場上有很多cookie管理器，但我感覺這個Cookie Manager更適合我的工作流程，同時讓工作過程更加簡單高效。此外值得一提的是，它不僅為前端開發人員設計，而且還為注重隱私的Web用戶而設計。

相關鏈接：
https://chrome.google.com/webstore/detail/cookiemanager-cookie-edit/hdhngoamekjhmnpenphenpaiindoinpo

10 . LiveReload

全球用戶數：100,000+

可以想象得到，我們有時很想確切地知道自己的網頁背后的一些運行情況，譬如：運行和使用中的哪些文件會被修改，這方面LiveReload能夠幫到我們；它是一個很好的預覽工具，讓我們了解網頁正在做什么，我們需要對網頁做什么調試，特別是幫我們知曉過往有哪些誤操作影響到了網頁的運行。

相關鏈接：
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

11 . Postman

全球用戶數：3,000,000+

最后，我們介紹API，其實這個貌似也沒什么好說的了，作為程序員你必須聽說過！

前端開發者在開發過程中必須處理API，才能將網頁與各種Web服務集成在一起。在全球范圍內編寫代碼并不是最容易的事情，因此您需要一種可以更有效地執行此操作的工具。

Postman名氣太大了，它是簡化API構建過程的絕佳工具，并且還簡化了我們的聯調協作。我和自己的團隊完全不知道離開Postman的日子，該怎么過！

相關鏈接：
https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en

IT技術分享社區

個人博客網站：https://programmerblog.xyz

文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠程辦公：常用的遠程協助軟件，你都知道嗎？51單片機程序下載、ISP及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端：收集前端开发者手边必备的11款神器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。