3大精選RWD預覽工具，工程師必看！

F12開發人員工具不夠嗎？

其實基本用F12開發人員工具就可以了，內部檢查也是會先用開發人員工具，不過大家應該都知道，所使用的電腦為windows或是MAC，畫面也會有所差異，而再更細節則是裝置的寬度、高度也會有大大不同，跟CSS語法也會有關係！

終於不用再到處借手機平板測試！

不管是網頁版、電腦軟體，大部分有免費使用的次數限制，這次精選了三種讓大家TRY TRY哪一個比較順手！

RWD預覽工具三大精選

RWD預覽工具一： Blisk（軟體版 - 三天免費試用）

擁有五十多種裝置設備，含有手機、平板、筆電、電腦版本，特別的是擁有「深色模式」，以及亦有錯誤警告，可以讓工程師更快速發現問題所在。 下載軟體至電腦本地端即可使用！介面相當容易上手，可以是直接輸入網址直導頁面，點擊左上角的Blisk icon即可選擇所想預覽的裝置，而控制項我們從左至右依序介紹：

1. 1選擇裝置
2. 2單一裝置畫面截圖
3. 3單一裝置的開發人員工具
4. 4單一裝置螢幕轉向後的畫面
5. 5切換網址列在螢幕頭或尾
6. 6關閉此裝置

上述第五點小編覺得這超級實用，因為現在因應不同瀏覽器，網址列會在不同位置

而在上方控制列甚至可以調整網址列要展開或縮小的狀態（如下圖）

RWD預覽工具二： Responsive Viewer（擴充工具 - 免費）

為Google chrome的擴充工具，相當之方便！還是免費的（歡呼），不過在不需要費用的狀況下，功能可以說是相當不錯了！裝置橫向/直向、畫面顯示的百分比等。操作方式一樣是先到網頁，點擊此擴充工具後就會有上述圖片，而最上面工具列的部分，由左至右依序介紹：

1. 1將所有已新增的裝置排列為橫向或直向
2. 2裝置的畫面轉向（橫向/直向）
3. 3截圖可視範圍或當前頁面的全長畫面
4. 4整體畫面縮小查看或放大

而在裝置畫面的右上角皆有齒輪的icon，點擊後可得知裝置名稱與裝置大小，也可以單獨調整喔！

RWD預覽工具三： iloveadaptive（網頁版 - 免費）

預設的裝置只有上述這些，可以自行增加裝置尺寸，也可以分別切換電腦、平板、手機版本來查看更多，最酷的是可以切換macOS或android系統（但安卓系統的預設裝置還是比較少），不過另一個特別之處，是可以上傳你所設計的視覺稿，進行不同裝置來比對設計不同。

在上方列找到「Iphone Displays」可以看見這些詳細的小Tips資訊，不過目前更新到iphone 12 Pro Max而已。

結論

上述三種分別為不同下載方式所進行，大家可以試試看，選擇容易上手的，免費與付費的差別在於細節調整，若不需細節，其實擴充功能就很夠用囉！