前端：收集前端開發(fā)者手邊必備的11款神器
1 . Wappalyzer
全球用戶數(shù)：1,000,000+
Wappalyzer可以幫助我們了解目標(biāo)網(wǎng)站的構(gòu)建方式。工作當(dāng)中存在大量此類情況，客戶需要我們參照某些網(wǎng)站來做開發(fā)，作為一款建站前的研究工具，Wappalyzer可以在這方面有效的支持到我們，有助于幫我們了解目標(biāo)網(wǎng)站具體有哪些技術(shù)應(yīng)用。
尤其是在做大型項(xiàng)目開發(fā)前，這個(gè)工具可以給我們帶來很好啟發(fā)。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg
2 . Window Resizer 響應(yīng)式測(cè)試
全球用戶數(shù)：600,000+
在Web開發(fā)中，響應(yīng)式網(wǎng)站設(shè)計(jì)已經(jīng)相當(dāng)普遍。而在相關(guān)開發(fā)測(cè)試中，你大概率會(huì)在不同設(shè)備上查看正在構(gòu)建中的網(wǎng)頁效果、調(diào)整瀏覽器窗口的大小以及模擬不同的屏幕分辨率，那就用Window Resizer就好，它可以幫助我們查看網(wǎng)頁布局在特定分辨率下的外觀，自定義分辨率，設(shè)置窗口的寬度和高度和窗口位置等。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en
3 . Marmoset 代碼快照
全球用戶數(shù)：10,000+
我們?nèi)粘９ぷ髦邢蚩蛻艋蛏霞?jí)展示代碼也是很常見的，常規(guī)的屏幕截圖可能并不太具有展示和“提案”性，有沒有考慮過讓代碼截圖更加生動(dòng)有趣?
我使用Marmoset捕捉很酷的代碼快照，改變下視角和色彩主題，而后把置入到演示文稿或者線上，非常帥氣了呢～
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb
4 . Code Cola：source code viewer
全球用戶數(shù)：30,000+
如果你平時(shí)傾向于用Chrome，可能會(huì)在頁面上編寫CSS，當(dāng)用到Inspect Element時(shí)，一定感覺相當(dāng)麻煩。Code Cola是一個(gè)Chrome的擴(kuò)展，是我所知道的最棒的Chrome CSS編輯器，尤其對(duì)于前端入門者來說，界面非常的友好和易用。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en
5 . CSSViewer
全球用戶數(shù)：100,000+
如果你只需要查看網(wǎng)頁上的CSS屬性，那么CSSViewer就是不錯(cuò)的選擇;只需單擊圖標(biāo)，將鼠標(biāo)指針懸停在我們要查看的任何元素上，即可看到其CSS屬性。
由于具有上面所說的懸停功能，因此個(gè)人感覺它與Chrome的Inspect Element相比，要更快捷，更易于使用。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en
6 . JSONView
全球用戶數(shù)：1,000,000+
當(dāng)前端開發(fā)工作涉及到對(duì)數(shù)據(jù)傳輸?shù)奶幚頃r(shí)，JSON就會(huì)被用到，沒什么可說的，前端開發(fā)者必須了解有關(guān)JSON的原理，我們?nèi)粘５拇罅抗ぷ饕捕紩?huì)需要去查看和驗(yàn)證網(wǎng)頁上的JSON文檔。
JSONView是幫助你執(zhí)行相關(guān)操作的一個(gè)簡(jiǎn)單工具，這么多年了，它一直是我知道的同類工具中最好的。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en
7 . Lighthouse
全球用戶數(shù)：600,000+
如今，自動(dòng)化越來越成為前端發(fā)展的一個(gè)大趨勢(shì)，Lighthouse 正是一款開源的自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量;你可以借助這個(gè)工具來查看性能、訪問性、SEO情況等等。它將針對(duì)此頁面運(yùn)行一連串的測(cè)試，然后生成一個(gè)有關(guān)頁面性能的報(bào)告。
Lighthouse絕對(duì)為我和我身邊的朋友提供了一種夢(mèng)寐以求的網(wǎng)頁性能提升途徑，無法想象沒有它，我的日常工作會(huì)成什么樣子。
- 相關(guān)鏈接：
- https://developers.google.com/web/tools/lighthouse?hl=zh-cn
8 . Clear Cache
全球用戶數(shù)：800,000+
每當(dāng)需要清除Web瀏覽器上的緩存時(shí)，大多必須手動(dòng)轉(zhuǎn)到設(shè)置頁面;前端開發(fā)人員往往被困在往返執(zhí)行這種低效工作的測(cè)試?yán)?。如果你擁有Clear Cache這個(gè)擴(kuò)展工具，就可以提高效率，我一直在使用它，只需單擊即可完成操作，省下了大量寶貴時(shí)間。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en
9 . Cookie Manager
全球用戶數(shù)：20,000+
cookie管理器是前端開發(fā)的另一個(gè)關(guān)鍵“法寶“。市場(chǎng)上有很多cookie管理器，但我感覺這個(gè)Cookie Manager更適合我的工作流程，同時(shí)讓工作過程更加簡(jiǎn)單高效。此外值得一提的是，它不僅為前端開發(fā)人員設(shè)計(jì)，而且還為注重隱私的Web用戶而設(shè)計(jì)。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/cookiemanager-cookie-edit/hdhngoamekjhmnpenphenpaiindoinpo
10 . LiveReload
全球用戶數(shù)：100,000+
可以想象得到，我們有時(shí)很想確切地知道自己的網(wǎng)頁背后的一些運(yùn)行情況，譬如：運(yùn)行和使用中的哪些文件會(huì)被修改，這方面LiveReload能夠幫到我們;它是一個(gè)很好的預(yù)覽工具，讓我們了解網(wǎng)頁正在做什么，我們需要對(duì)網(wǎng)頁做什么調(diào)試，特別是幫我們知曉過往有哪些誤操作影響到了網(wǎng)頁的運(yùn)行。
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en
11 . Postman
全球用戶數(shù)：3,000,000+
最后，我們介紹API，其實(shí)這個(gè)貌似也沒什么好說的了，作為程序員你必須聽說過!
前端開發(fā)者在開發(fā)過程中必須處理API，才能將網(wǎng)頁與各種Web服務(wù)集成在一起。在全球范圍內(nèi)編寫代碼并不是最容易的事情，因此您需要一種可以更有效地執(zhí)行此操作的工具。
Postman名氣太大了，它是簡(jiǎn)化API構(gòu)建過程的絕佳工具，并且還簡(jiǎn)化了我們的聯(lián)調(diào)協(xié)作。我和自己的團(tuán)隊(duì)完全不知道離開Postman的日子，該怎么過!
- 相關(guān)鏈接：
- https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en
