[譯]WEB開發者最好用的Chrome擴展程序

毫無疑問,WEB設計者和開發者都喜歡用Google Chrome以及Chrome擴展程序。強而有力的Chrome開發者工具使它成爲WEB設計和開發工做的最佳選擇。Google開發者工具已經提供了大量的功能,可是,若是你以爲這還不夠的話,你能夠選擇Chrome擴展工具。php

Chrome擴展工具的優勢和缺點web

第三方Chrome擴展程序惟一比較大的缺點是其質量和可用性至關不一致。多年來我用過不少Chrome擴展工具,今天我也在Chrome網上應用商店看了看我是否錯過了什麼。我發現不少擴展工具根本就不能用或者就是複製的Chrome開發者工具的功能(固然,這些已經被棄用)。我也遇到過不少不一致的UI。即使如此,我認爲仍是有不少擴展工具在建站時仍是頗有用的。 譯者注:下面的一些擴展工具我經過搜索方法並無找到,因此請點擊文章中的連接來直接獲取這些擴展工具。json

WEB DEVELOPER瀏覽器

在Google Chrome第一個版本發佈以前,不少WEB設計師和開發者都使用Firefox。相似於Chrome,Firefox也有不少的第三方支持。最流行的Firefox擴展工具中也有一個叫作「WEB DEVELOPER」。在之後的幾年中,這個擴展也進入了Chrome,而且,依然有着數量驚人的有用的功能。工具

webdeveloper

很難從Web Developer中選出一個特徵,可是我發現我使用十分頻繁的是經過Outline選項卡調試CSS。它很是有助於經過元素在頁面上的位置來突出顯示他們。網站

BUILTWITHui

BuiltWith是一個目的很是簡單的插件。若是你好奇一個網站是用什麼技術來建立的,你點擊BuiltWith按鈕來查看有關Servers、frameworks及更多信息的下拉列表。插件

builtwith

BuiltWith並不老是可以完美運行,全部,若是你確實須要知道一個網站是用什麼技術建立的,你應該用一個更強大的工具來作一些跟進調查(如 Chrome開發者工具)。可是,它依然是一個能夠快速知足你的好奇心並給你指引正確方向的快速方法。設計

JSONVIEW調試

默認狀況下,Chrome並不會格式化選項卡中JavaScript Object Notation (JSON)文件。這看起來彷佛並不重要,但當你的WEB應用中有不少JSON的時候,你在調試的時候可能就會常常須要查看JSON數據。

jsonview

當你安裝了JSONView這個擴展,JSON就會被格式化的顯示,使得它更加易讀。

PAGESPEED INSIGHTS

PageSpeed Insights其實是一個第一方的擴展,由於它是由Google開發的。和其餘擴展須要在工具欄添加一個按鈕的形式不一樣,這個擴展向Chrome開發者工具添加了一個標籤。

pagespeed

PageSpeed提供的一些功能是複製的DevTools Audits panel。然而,一個web頁面不可能加載的太快。它提供了一些加快頁面加載速度的建議。

RESPONSIVE INSPECTOR

Responsive Inspector擴展是一個由Adobe的開發者做爲輔助項目開發的。這個擴展能夠提取任何樣式表中的媒體查詢,並把他們顯示在一個交互式的圖表中。

responsiveinspector

點擊圖表中的任何高亮的欄均可以從新調整瀏覽器使其適應特定媒體的大小,以便你能夠看到斷點看起來像什麼。你也能夠經過點擊右側的圓形代碼按鈕來查看上下文的媒體查詢。

我還有其餘遺漏的嗎?

高質量的Chrome擴展是很難找到的。若是我這裏缺乏了哪一個你認爲必不可少的,請在評論中告訴我!

譯者:Specs 時間:2014-01-27 Blog:http://www.9iphp.com/ E-mail:specs@9iphp.com

相關文章
相關標籤/搜索