前端程序員必知的30個Chrome擴展-[轉載]

谷歌Chrome瀏覽器是網絡上可用的最好瀏覽器之一，而且自2011年11月超越了Firefox瀏覽器以後，已經成爲了互聯網上占主導地位的瀏覽器。今天，HTML5中國與你們分享一些實用的谷歌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——瞬間改變網站的外觀。

 

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

　　 原文：Useful extensions for Front-End Developers and Designers-- 翻做：碼農網 – 小峯]