Responsive Web Design Tester 響應式網頁開發工具，在瀏覽器測試網站顯示效果

當今開發網站不僅要顧及不同瀏覽器，還要同時滿足在電腦、平板電腦及行動裝置各種尺寸螢幕都能正確顯示，最常用的技術是響應式網頁設計（Responsive Web Design, RWD）。技術細節我就不多做介紹，但我想透過本文推薦一款很實用的開發工具，讓你在瀏覽器輕鬆模擬、切換不同裝置類型，協助測試自適應網頁設計是否能正確顯示內容。

Responsive Web Design Tester 是一個瀏覽器擴充功能，支援 Google Chrome、Firefox 及 Opera ，使用非常簡單，安裝後就能快速切換要模擬的行動裝置類型，內建包括 Android 手機、Nexus 平板電腦、BlackBerry、Kindle Fire、iPad 和 iPhone，也能依照開發者需求來自訂加入要測試的裝置解析度。

因為我們不可能找來這麼多的裝置實際測試網頁顯示情形，藉由 Responsive Web Design Tester 便能將瀏覽器模擬成各種行動裝置解析度，實際測試網頁顯示效果。

以往我都是使用 User-Agent Switcher 功能來自訂瀏覽器的 User Agent，不過這方法其實沒那麼好用，又要經常切來切去實在很不方便，使用 Responsive Web Design Tester 徹底解決開發上的問題，讓開發者在修改網頁時能更加得心應手。

網站名稱：Responsive Web Design Tester
網站鏈結：https://responsivewebdesigntester.com/

使用教學

STEP 1

在瀏覽器安裝 Responsive Web Design Tester 後，點選該按鈕會顯示工具的主功能，我們從「Select Device」選擇要測試模擬的裝置名稱類型。

可以看到 Responsive Web Design Tester 預設已提供約 24 種的裝置類型，包括大家熟悉的 HTC One、Nexus 7、BlackBerry、Kindle Fire、iPad、iPad Pro、iPad Mini 及 iPhone 。

注意每一種裝置都會有兩種選項，分別為橫幅式（Landscape）和直立式（Portrait）。這也會模擬手機或平板電腦在直立或橫放時呈現出的不一樣的解析度。

STEP 2

試著選擇直立的「iPhone 6(s)」來模擬瀏覽免費資源網路社群的樣式，Responsive Web Design Tester 會在瀏覽器內再開啟一個適當大小的視窗。

比較特別的是在測試中我發現網頁被正確載入為行動版頁面，這也表示 Responsive Web Design Tester 並不是只有調整視窗解析度，而是連 User Agent 也一併修改了！

接下來我再使用「iPad」模擬瀏覽網頁的效果，這次使用橫幅式的裝置，可以看到網頁依舊能在該解析度範圍內正確顯示，這也就是前面提到的使用「響應式網頁設計」優勢。

STEP 3

當然，測試環境可能會依照每個人的情形而有所不同，內建的行動裝置類型並不一定符合每一位開發者。還好 Responsive Web Design Tester 內建選項設定，能讓我們自由調整要模擬測試的裝置類型和解析度，同時也能編輯群組來管理更多的裝置，非常強大！