前端程序員必知的30個Chrome擴展

英文原文：Useful extensions for Front-End Developers and Designers

谷歌 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——改變 非死book、推ter、Google、油Tube 和其他任何網站的字體。測試 Google Web Fonts?。

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

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

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

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

-

譯文鏈接：http://www.codeceo.com/article/30-useful-extensions-for-web.html

翻譯作者：碼農網 – 小峰

來自: www.codeceo.com