現在設我是一位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 — 快速修改網站樣式。
閱讀更多 程序員小新人學習 的文章
