Chrome web 開發用到的插件

現在設我是一位web開發人員，以Chrome為陣地。下面是一些能讓我少花點時間的工具：

WhatFont?——?名字就說明了一切。這是找出你最喜歡網站使用的字體的簡單方法，這樣你就可以為己所用了。

Pesticide——?修改CSS的絕佳程序。當我試著學習匣子模型的時候，它簡直就是救命稻草般的存在。

Colorzilla?——用於複製確切顏色的一個網站，用它可以將顏色直接複製到剪貼板上，這樣你就沒必要花太多時間獲得正確的RGBA組合了。

CSS Peeper——查看網站使用的顏色時非常方便。在你一開始山寨你認為酷的網站的時候很管用。這個程序能讓你查看它們的幕後的色彩方案。

Wappalyzer?——想要獲悉你在網站上看到的是什麼技術，這個程序很有用。想知道某網站使用什麼樣的框架或者它承載了什麼服務？這個照樣管用。

React Dev Tools——一款用於調試應用程序的工具。有一點要提一下，它只有在你編寫React程序時才有用。

Redux Dev Tools——一款用於調試應用程序的工具。有一點要提一下，它只有在你編寫Redux程序時才有用。

JSON

Formatter?——讓JSON在瀏覽器中看起來更一目了然的不二之選。也許麻煩的JSON讓你苦不堪言，不過只要用了這個軟體，找到你要找的東西，所花費的時間會大幅縮短。

Vimeo Repeat and

Speed?——加速Vimeo視頻的絕佳工具。如果你像大多數的web開發人員一樣觀看視頻教程，你就會知道用1.25倍的常規回放速度觀看它們是多麼的方便。本程序同時也有適用於YouTube的版本。

Devtools Terminal—嵌在瀏覽器中的終端。開發調試利器！

LiveReload—集成LiveReload官方應用（Mac和Windows）以及guard-livereload、yeoman等第三方工具。幫助開發者快速構建Web應用。

· BrowserStack

Local?—?本地測試工具，藉助它可以快速完成本地/內部伺服器配置和測試工作，以及HTML、CSS、JavaScript靜態文件的配置和測試。用BrowserStack提供的安全、便捷的雲服務，在700多個真實的桌面系統和移動瀏覽器中，測試應用的布局、工作流和交互性。

JSONView?—用來驗證和查看JSON文件。

Postman?—介面調試工具。介面編寫、調試、文檔撰寫過程使用它能提升工作效率。有100多萬用戶了。

Window Resizer?—調整瀏覽器窗口大小，模擬各種解析度。幫助Web設計師和開發者測試多種解析度下的布局效果。

WhatFont?—?識別網頁所使用的字體。

Page Ruler?—獲取任意網頁中元素大小、位置信息。

Web Developer

Checklist —?自己的網站是否符合Web設計、開發的最佳實踐？對照這份清單，就能很容易發現網站是否有問題。

Image Downloader?—?查看和下載網頁中的圖像。

Alexa Traffic Rank?—?Alexa

Internet為Chrome開發的免費網站流量排名查看工具。在不干擾用戶訪問網站的情況下，給出當前網站的Alexa數據。

Eye Dropper?—?開源拾色器軟體，可以從網頁、其他拾色器和你用過的顏色中拾取顏色。

Firebug

Lite?—?它可不是用來替代Firebug或Chrome的開發者工具，而是配合這些工具來使用。你可以像使用Firebug那樣，用它來查看HTML、DOM元素和盒子模型。它還能提供其他比較酷的功能，比如用滑鼠查看HTML元素，編輯CSS屬性後能立馬看到效果等。

Web Developer?—以工具欄形式提供一系列Web開發工具， 這是Web

Developer官方為Chrome開發的版本，他們也為 Firefox、Opera開發了相應插件。

Responsive Inspector?—用於查看被訪問網站的媒體特性（media

query）。開發響應式Web布局時，可以直觀地顯示CSS樣式表所定義的解析度的效果。

BuiltWith?—?用於查看當前網站使用什麼技術搭建。

Corporate Ipsum?—?隨機生成企業相關信息，作為佔位文本，方便查看布局效果。

User-Agent

Switcher?—?修改用戶代理（User-Agent）字元串，以偽裝成某些瀏覽器和操作系統，還可以偽造特定的URL。

YSlow?—?分析網頁，根據能夠提高網頁性能的一組規則，提出性能改進建議。

CSS Shapes Editor?—?在所選中元素上方顯示互動式編輯器，用於新建和調整用CSS寫的圖形。

Pesticide?—?在當前網頁插入Pesticide CSS，為元素添加明顯的邊框，方便查看元素位置。

Responsive Web Design

Tester?—測試移動網站在移動設備上的效果。該插件能夠模擬不同尺寸、裝有不同瀏覽器的移動設備。

Palettab?—?安裝後，新開一頁卡，就能看到5種顏色和字體搭配方案！每次點擊新頁卡，就能有新發現。

jQuery Audit?—?在元素麵板創建側邊欄，顯示jQuery委託代理事件、內部數據、當前選中的DOM節點、函數和對象等信息。

Font

Changer?—修改包括Facebook、Twitter、Google、Youtube在內的任意網站的字體。可以試試Google

Web Fonts?字體的效果。

HTML5 Outliner?—?使用網頁中的標題和分區信息，創建可點擊的大綱視圖。

PerfectPixel?— 在頁面上顯示半透明的圖像，便於逐像素對比調整前後的頁面效果，以達到最佳水準。

SelectorGadget?— 有了這個開源工具，為複雜網站的元素生成CSS選擇器，以及查看選擇器所匹配的元素都將變得輕而易舉。

Stylebot?—?快速修改網站樣式。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！