有了這8個Chrome擴展工具，Web開發事半功倍!

Chrome瀏覽器擴展程序，無論對開發人員還是設計人員來說，都是非常有用的，有些擴展程序會對開發工具的某類功能進行增強，也有一些會複製開發工具中的部分特性。從某種意義上來說，Chrome商店中的每個擴展都有其價值，但顯然我們不能把所有擴展程序都安裝起來。

圖片來源：Pixabay

下面，本文將列出八個比較不錯的可供Web開發與設計人員使用的擴展程序，來幫助大家提升自己的工作效率，降低一定的難度。

1、Responsive Web Design Tester

響應式Web設計測試器可以幫助開發人員和設計人員確保網站是否能夠進行響應。可提供不多不同解析度的虛擬設備來進行測試，安裝時默認的可用屏幕尺寸有320、480、640、768、1024、1280。用戶也可以手動向列表中添加自定義設備。

甚至移動設備的屏幕尺寸也可以測試。

2、WhatRuns

Whatruns擴展程序可以幫助用戶發現站點中所實現的技術棧。只需點擊一下，就可以確定前端框架的類型、營銷策略的類型、內容分發網路(CDN)、內容管理系統(CMS)等等。

無需註冊，完全免費。

3、ColorZilla

ColorZilla是Chrome和Firefox中最先進、最流行的顏色選擇器和滴管工具。有了這個擴展程序，顏色讀取會變得很容易，可以在屏幕的任何位置識別顏色。Colorzilla的主要功能是滴管，網頁顏色分析，調色板查看器，高級梯度生成器，歷史使用顏色。

Colorzilla能夠從Flash對象中選擇顏色，從縮放比例中選擇顏色。

圖片來源：Pixabay

4 UserSnap

UserSnap可以讓你對屏幕進行捕捉，並允許你對捕獲的圖像進行注釋。UserSnap在收集用戶反饋、跟蹤Bug報告、對Web應用程序原型提供反饋時非常有用。

Usersnap會自動為截取的圖像添加瀏覽器版本、操作系統和屏幕解析度等信息。

5、PageRuler

Pageruler用於獲取元素的尺寸及其在網頁中的位置。該工具中是以像素的形式進行測量的。要獲得測量值非常簡單，只需在頁面中繪圖，它就會顯示出高度和寬度。

顯示頂部、底部、高度、寬度、左側和右側位置。可以通過方向鍵調整大小以及進行移動。

6、Dimensions

Dimensions是設計師測量屏幕尺寸的工具。它以垂直和水平的方式進行測量，即從滑鼠指針的上/下和左/右開始。

Dimensions對於輸入欄位、按鈕、視頻、文本圖標、gif等元素非常適用，但不適用於測量圖像。

7、WhatFont

WhatFont可以幫助你查找網頁中使用的字體。用戶可以將滑鼠懸停在文本上，以此來標識文本的字體。它還可以檢測該字體服務是由誰所提供的，像Typekit和谷歌字體API。

8、PerfectPixel

PerfectPixel是專為設計師設計的，方便用戶精確地編寫CSS與HTML，具有堪稱完美的精度。這個擴展允許用戶放置一個半透明的覆蓋層來比較他們的設計和結果。

PerfectPixel支持一個頁面上的多個覆蓋層，覆蓋層被保存在瀏覽器會話中，因此每個頁面可以有不同的覆蓋層。

原文作者：Santhosh 來源：bleedbytes

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