前言

今天推薦兩款極具實用價值的設計/開發資源：一個是嚴選高質感、可免費商用的圖庫「潑辣有圖」，另一個是前端開發必備的瀏覽器擴充套件「Responsive Web Design Tester」，讓你輕鬆模擬各種裝置測試響應式網頁。

一、潑辣有圖 —— 有故事的免費商用圖庫

核心特色

• COO 協議授權：所有圖片皆可免費下載原圖並用於商業用途，無版權顧慮。
• 人工嚴選機制：由專業後期團隊（含知名攝影師 @他山之眼）逐張把關，拒絕參差不齊的素材庫常態。
• 圖片背後的故事：每張照片附有攝影師心路歷程、拍攝過程、器材參數、地點等資訊，極適合攝影愛好者學習參考。

網站體驗

目前僅收錄 2016 年 1 月精選作品，介面簡潔。滑動瀏覽時，左側顯示作者資訊（可直達微博），中段為創作故事，右側列出器材、地點與原圖下載連結。

圖 1：網站首頁瀏覽介面

圖 2：圖片詳情與故事

圖 3：大圖預覽與下載原圖

社群共創

網站開放投稿通道，歡迎攝影師提交作品；亦提供電子郵件訂閱，每月定期推送人工嚴選高質素材包。

圖 4：投稿與訂閱入口

二、Responsive Web Design Tester —— 響應式開發利器

痛點解決

開發響應式網頁時，無法實機測試所有裝置尺寸。傳統 User-Agent Switcher 僅切換代理字串，無法真實模擬視窗尺寸與排版表現。

核心功能

• 跨瀏覽器支援：Chrome、Firefox、Opera 均可安裝。
• 內建 24 種裝置預設：涵蓋 iPhone、iPad、Nexus、Kindle Fire、BlackBerry 等，每款皆含直向/橫向兩種解析度。
• 同步修改 User Agent：不僅縮放視窗，更自動切換 UA，確保載入真實行動版頁面。
• 自訂裝置與分群管理：可自由新增/編輯裝置解析度，建立專屬測試群組。

操作示範

1. 安裝擴充套件後，點擊工具列圖示，從「Select Device」選擇欲模擬裝置（如 iPhone 6 豎向）。
2. 工具會在瀏覽器內開啟對應尺寸的獨立視窗，自動載入行動版頁面。
3. 切換至 iPad 橫向，驗證斷點排版是否正確。
4. 進入選項頁自訂裝置清單，滿足專案特殊需求。

圖 5：裝置選單介面

圖 6：裝置清單（含直/橫向）

圖 7：模擬 iPhone 6 載入行動版

圖 8：模擬 iPad 橫向測試

圖 9：自訂裝置設定頁面

推薦理由總結

1. 支援三大主流瀏覽器，安裝即用零配置。
2. 內建 24 款熱門裝置，並支援無限自訂擴展。
3. 同時模擬解析度與 User Agent，達到最真實的測試環境。

結語

「潑辣有圖」解決了設計師找圖貴、找圖難、素材無故事的痛點；「Responsive Web Design Tester」則讓前端工程師在單一瀏覽器即可完成全裝置測試。兩者皆以「品質」與「實用」為核心，強力推薦收藏備用。