作為前端開(kāi)發(fā)者，這些工具必定讓你事半功倍。

前端 web 開(kāi)發(fā)是一個(gè)令人興奮的領(lǐng)域，越來(lái)越多的需求，形成了一個(gè)高薪的職業(yè)。同時(shí)，Web 領(lǐng)域還有很多可靠的工作，使得 Web 開(kāi)發(fā)者能夠更加高效的工作。下面是我在日常前端開(kāi)發(fā)中經(jīng)常用到的 12 個(gè)工具，分享給大家，希望能對(duì)大家有所幫助。譯者注：這些工具都是 Chrome 擴(kuò)展（也適用于 Microsoft Edge、Opera 等 Chromium 內(nèi)核的瀏覽器），標(biāo)題后面的數(shù)字是下載量。

1 Wappalyzer — 1,000,000+

這個(gè)工具可以讓你了解到某個(gè)網(wǎng)站是用什么搭建的，即它的內(nèi)容管理系統(tǒng)、電子商務(wù)平臺(tái)或營(yíng)銷(xiāo)自動(dòng)化工具。研究如何創(chuàng)建一個(gè)網(wǎng)站，這是一個(gè)很棒的工具。它還創(chuàng)建了使用某些技術(shù)的網(wǎng)站列表，這些技術(shù)可以幫助你了解如何構(gòu)建客戶的網(wǎng)站。準(zhǔn)備大型項(xiàng)目時(shí)，我無(wú)數(shù)次地使用這個(gè)工具。

2 Window Resizer — 600,000+

響應(yīng)式設(shè)計(jì)是現(xiàn)代網(wǎng)站最重要的特性之一。你需要測(cè)試你的網(wǎng)站是否可以在各種各樣類(lèi)型的設(shè)備上查看。我使用 Window Resizer 來(lái)調(diào)整我的網(wǎng)頁(yè)瀏覽器窗口的大小，以模擬不同的屏幕分辨率。然后你可以看到你的布局在特定分辨率下的外觀。你可以自定義分辨率、設(shè)置窗口寬度和高度、窗口位置等。

3 Marmoset — 10,000+

程序員工作的一部分就是向客戶或上級(jí)展示他們的代碼，但是常規(guī)的屏幕截圖可能不那么吸引眼球，所以你要讓它們變得生動(dòng)起來(lái)。我用 Marmoset 為我的代碼拍了一些很酷的快照，然后把這些快照放在我的幻燈片上，從而給人留下好印象。不用說(shuō)，我的代碼幻燈片一點(diǎn)也不無(wú)聊。我開(kāi)始修改模版和顏色主題，使我的演講更加令人難忘。

4 Web Developer Checklist— 40,000+

作為一個(gè)前端開(kāi)發(fā)者，很容易忘記需要做的每一件事。當(dāng)你在截止時(shí)間前急著完成項(xiàng)目的時(shí)候，你可能跳過(guò)了關(guān)鍵的步驟。這就是 Toptal 的 Web Developer Checklist，它可以節(jié)省你的時(shí)間。我使用 Web Developer Checklist 來(lái)確保我考慮到每個(gè)項(xiàng)目中的所有基本點(diǎn)。

它提供了前端 web 開(kāi)發(fā)中最重要步驟的清單。它還分析網(wǎng)頁(yè)中是否存在違反最佳實(shí)踐的情況，以便你可以修復(fù)這些問(wèn)題。

5 Code Cola: Source Code Viewer — 30,000+

如果你使用 Chrome 并且想要在頁(yè)面上編輯 CSS，那么可以使用審查元素特性（譯者注：Google Chrome 瀏覽器打開(kāi)網(wǎng)頁(yè)后，點(diǎn)擊右鍵出現(xiàn)的菜單：Inspect/ 審查），但是它可能太過(guò)于靈活。Code Cola 是一個(gè) Chrome 擴(kuò)展，使用起來(lái)容易得多。這是 Chrome 上最好的 CSS 編輯器，對(duì)初學(xué)者有特別友好的界面。我已經(jīng)用了很多次，嘗試在我的網(wǎng)頁(yè)上編輯 CSS。

6 CSSViewer — 100,000+

如果你只需要查看網(wǎng)頁(yè)上的 CSS 屬性，CSSViewer 非常棒。只需單擊圖標(biāo)并將光標(biāo)懸停在要檢查的任何元素上，就可以看到它的 CSS 屬性。我發(fā)現(xiàn)這比 Chrome 的 Inspect 元素更快更容易使用，因?yàn)樗袘彝Ｌ匦浴?/p>

7 JSONView —1,000,000+

JSON 經(jīng)常用于那些需要處理數(shù)據(jù)傳輸?shù)木W(wǎng)站，任何前端開(kāi)發(fā)者都需要掌握并熟悉它。使用 JSON 時(shí)，通常需要查看和驗(yàn)證頁(yè)面上的 JSON 文檔。JSONView 是一個(gè)簡(jiǎn)單的工具。多年來(lái)，我學(xué)到了簡(jiǎn)單至上，沒(méi)有比 JSONView 更簡(jiǎn)單的了。

8 Lighthouse — 600,000+

譯者注：Lighthouse 已經(jīng)集成到了 Google Chrome（或 Microsoft Edge），無(wú)需單獨(dú)下載。如今，自動(dòng)化越來(lái)越成為前端開(kāi)發(fā)的必要條件。Lighthouse 是一個(gè)開(kāi)源的自動(dòng)化工具，用于提高網(wǎng)頁(yè)質(zhì)量。你可以使用它來(lái)檢測(cè)頁(yè)面性能、可訪問(wèn)性、搜索引擎優(yōu)化 SEO 等等。現(xiàn)在，我不會(huì)在不使用 Lighthouse 的情況下進(jìn)行前端項(xiàng)目的開(kāi)發(fā)。它以各種方式幫助我改進(jìn)網(wǎng)頁(yè)。

9 Clear Cache — 800,000+

每當(dāng)需要清除網(wǎng)頁(yè)瀏覽器上的緩存時(shí)，通常必須手動(dòng)轉(zhuǎn)到“設(shè)置”頁(yè)。這是前端開(kāi)發(fā)者經(jīng)常做的一項(xiàng)任務(wù)，用于測(cè)試他們正在處理的網(wǎng)頁(yè)。用一個(gè) Chrome 擴(kuò)展來(lái)做這件事，更有效率。我一直在使用 Clear Cache 擴(kuò)展，只需單擊一下就可以完成，避免浪費(fèi)寶貴的時(shí)間。

10 Cookie Manager — 20,000+

擁有一個(gè)好的 cookie 管理器是前端開(kāi)發(fā)的另一個(gè)關(guān)鍵的工具，尤其是當(dāng)你的網(wǎng)站處理數(shù)據(jù)時(shí)。Cookie Manager 使這個(gè)過(guò)程更加簡(jiǎn)單和高效。有很多 cookie 管理器，我發(fā)現(xiàn)這個(gè) cookie 管理器適合我的工作流程。它不僅是為前端開(kāi)發(fā)者設(shè)計(jì)，也適合有隱私意識(shí)的 web 用戶。

11 LiveReload: Preview Tool — 100,000+

你可能想確切地知道你的網(wǎng)頁(yè)在背后做了什么，比如它在使用時(shí)會(huì)改變什么文件。LiveReload 是一個(gè)很好的預(yù)覽工具。我用 LiveReload 查看我的網(wǎng)頁(yè)到底在做什么。它讓我更好地了解我的網(wǎng)頁(yè)是如何工作的。如果出錯(cuò)了，我能做些什么。

12 Postman — 3,000,000+

最后，我們來(lái)看看 API。如今，前端開(kāi)發(fā)者必定要處理 API，以便將頁(yè)面與各種 web 服務(wù)集成在一起。整體上看，為它編寫(xiě)代碼并不是最簡(jiǎn)單的事情，因此需要一個(gè)能夠讓你更有效的工具。這是簡(jiǎn)化 API 構(gòu)建過(guò)程的一個(gè)很好的工具，它還簡(jiǎn)化了團(tuán)隊(duì)協(xié)作。我和我的團(tuán)隊(duì)都不知道如何在不使用 Postman 的情況下開(kāi)發(fā) API。譯者注：Postman 現(xiàn)在已經(jīng)升級(jí)成非 Chrome 插件的獨(dú)立客戶端。

13 結(jié)論

上面列出的工具是一些我用過(guò)的最好的工具。試一下吧，看你喜不喜歡。當(dāng)我第一次組裝我的個(gè)人前端開(kāi)發(fā)工具包時(shí)，就是這么做的。我從過(guò)去的經(jīng)驗(yàn)中學(xué)到，擁有最好的前端開(kāi)發(fā)工具有助于提高效率，這肯定會(huì)為你節(jié)省大量寶貴的時(shí)間，將使你在編碼和解決問(wèn)題方面做得更好。