前端程式設計師必知的30個Chrome擴充套件

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

谷歌Chrome瀏覽器是網路上可用的最好的瀏覽器之一，並且自2011年11月超越了Firefox瀏覽器之後，已經成為了網際網路上占主導地位的瀏覽器。今天，我想與大家分享一些最實用的谷歌Chrome瀏覽器擴充套件，可以幫助你提高工作效率。

Devtools Terminal ——瀏覽器終端。牛逼的不得了！

LiveReload——為官方LiveReload應用程式（Mac和Windows）和第三方，例如guard-livereload和yeoman，提供Chrome瀏覽器整合。

BrowserStack Local ——本地測試app可以讓你即刻配置和測試本地/內部伺服器，和包括HTML、CSS和JavaScript檔案在內的本地資料夾。在BrowserStack上的安全雲設定中測試佈局，工作流程和互動性，跨越700+個真正的桌上型電腦和移動瀏覽器。

JSONView ——驗證和檢視JSON檔案。

Postman——用Postman為API工作流程增加負荷！更快地構建，測試，並記錄你的API。已經不止一百多萬的開發人員投入了Postman的懷抱。

Window Resizer——該擴充套件可以重新調整瀏覽器視窗的大小，以仿效各種不同的解析度。對網頁設計師和開發人員尤其有用，可以幫助測試在不同瀏覽器解析度下的佈局。

WhatFont——識別網頁上的字型最簡單的方法。

Page Ruler——畫一把尺子以得到畫素維數和定位，並測量任何網頁上的元素。

Web Developer Checklist ——對於那些想要確保遵循最佳實踐的web開發人員，這個擴充套件可以讓你很容易發現自己網站的問題域。

Image Downloader——瀏覽和下載網頁上的影像。

Alexa Traffic Rank ——Alexa Traffic Rank是Alexa Internet提供的免費的Chrome擴充套件，並且是Alexa流量皮膚的唯一擴充套件。這款Alexa擴充套件可以在你網上衝浪的時候陪伴你，提供有關你訪問的網站的Alexa資料，並且不會中斷你瀏覽網站。

Eye Dropper ——Eye Dropper是開源擴充套件，它可以讓你從網頁，拾色器和個人色彩歷史中選取顏色。

Firebug Lite ——Firebug Lite並非Firebug或Chrome Developer Tools的替代品。它是使用這些工具時也可以一起使用的工具。Firebug Lite提供了豐富的視覺表現，這些視覺表現也是我們在Firebug 中，涉及HTML元素，DOM元素，以及盒模型陰影（Box Model shading）時慣常見到的。它還提供了一些很酷的功能，比如用滑鼠檢查HTML元素，以及實時編輯CSS屬性。

Web Developer ——新增了一個擁有各種web開發工具的工具欄按鈕。是Firefox web開發擴充套件的官方埠。

Responsive Inspector —— Responsive Inspector是一個簡單的谷歌Chrome瀏覽器擴充套件，它允許檢視被訪問網站的媒體查詢。這在開發響應式網路佈局時非常有用，因為它可以直觀地顯示在CSS樣式表中定義了什麼解析度。

BuiltWith ——使用該擴充套件，可以找出你正在訪問的網站是用什麼構建的。

Corporate Ipsum ——作為填充文字使用，生成隨機的企業公關說辭。

User-Agent Switcher ——模擬使用者代理（User-Agent）字串。有了這個擴充套件，你就可以快速輕鬆地在使用者代理字串之間進行切換。此外，你還可以設定每次要冒名的特定URL。

YSlow ——YSlow分析網頁，並提出如何在一套高效能web頁面規則的基礎上改進效能。YSlow在三個預定義規則之一或一個使用者定義的規則集的基礎上將網頁分等級。它提供了改進頁面效能的建議，總結了網頁頁面的元件，顯示了關於頁面的統計資訊。

CSS Shapes Editor ——使用互動式編輯器來建立並調整CSS Shape值，重疊所選元素。

Pesticide ——這個擴充套件可以插入Pesticide CSS到當前頁，形成每個元素的示意圖以便於更好地看到它們在頁面上的位置。

Responsive Web Design Tester ——在移動裝置上測試移動網站。此擴充套件反映了移動裝置的大小和它的瀏覽器。

Palettab——將超棒的顏色和字型帶給新的標籤頁！每次點選新標籤按鈕，都會給你一點點新鮮。

jQuery Audit ——jQuery Audit在元素皮膚中建立了一個側邊欄，包含jQuery的下放事件，內部資料等，就像活躍的DOM節點，函式和物件。

Font Changer——改變Facebook、Twitter、Google、Youtube和其他任何網站的字型。測試Google Web Fonts™。

HTML5 Outliner——用標題和分節元素生成一個可導航的頁面大綱。

PerfectPixel ——此擴充套件允許開發人員把一個半透明的影像疊加到已開發好的HTML的頂部，並在它們之間執行每個畫素的比較。

SelectorGadget ——Selector Gadget 是一個開源的Chrome瀏覽器擴充套件，能夠讓CSS選擇器輕而易舉地生成和發現於複雜網站。

Stylebot——瞬間改變網站的外觀。