RWD｜林鼎淵 Dean Lin https://deanlin.net/tags/rwd/ https://deanlin.net/images/author_hu_aa256fc934e9a932.jpgRWD｜林鼎淵 Dean Linhttps://deanlin.net/tags/rwd/144144 林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。 Hugo zh-tw © 2020–2026 林鼎淵 Dean Lin Fri, 19 Mar 2021 17:41:46 +0800 Responsively — 前端工程師必備 RWD 神器，在一個視窗瀏覽所有尺寸的網頁 https://deanlin.net/blog/202103/responsively-rwd-testing-tool/ Fri, 19 Mar 2021 17:41:46 +0800 https://deanlin.net/blog/202103/responsively-rwd-testing-tool/ 林鼎淵 技術教學 對前端開發者來說 RWD 是一個惡夢，常常會有你修好了一個尺寸但忘記檢核不同尺寸在螢幕的適應性問題；今天跟大家分享一個超實用工具 — responsively，他的安裝極其簡單，而且還是免費的喔！ 對前端開發者來說 RWD 是一個惡夢，常常會有你修好了一個尺寸但忘記檢核不同尺寸在螢幕的適應性問題；今天跟大家分享一個超實用工具 — responsively，他的安裝極其簡單，而且還是免費的喔！

Responsively — 前端工程師必備 RWD 神器，在一個視窗瀏覽所有尺寸的網頁（圖 1）

一鍵下載，無腦安裝

請依據自己的作業系統選擇安裝檔案，因為操作太過簡單就不贅述了，下載請點這裡

一鍵下載，無腦安裝（圖 2）

安裝 Browser extension 快速跳轉

在安裝的頁面中往下滑一點就會看到瀏覽器擴充套件，要先安裝程式後擴充套件才能用喔！這個套件會直接幫你跳轉到 App 上。

安裝 Browser extension 快速跳轉（圖 3）

我是將『一律允許』打勾惹
我是將『一律允許』打勾惹

他強大在哪裡？

這個程式打開後就是一個多視窗瀏覽器，直接『輸入網址』來檢視你想要瀏覽的頁面。

他強大在哪裡？（圖 5）

可以用一個視窗瀏覽所有尺寸的網頁

在其中一個視窗滾動滑鼠時其他視窗也會同步移動

其他功能

  • 支援熱更新：如果你在本地端開發前端網頁，只要按下儲存(crtl + s)就會更新嚕～
  • 修改程式的 Layout：水平(Horizontal)、區塊(FlexiGrid)、單獨(individual)
  • 螢幕截圖：可以一次性幫所有螢幕截圖，當然單個螢幕也行
  • 可以擴充 Devices 的螢幕種類：讓你可以自訂想在哪些 devices 上面瀏覽

這篇文章只是把官網的資訊稍微中文化而已，筆者心得：『這工具堪成前端神器！身為前端工程師看到這篇文還不安裝一波！』

]]>