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

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202103/responsively-rwd-testing-tool/
- 發布：2021-03-19
- 主題：技術教學
- 標籤：Responsively、前端開發、前端工程師、RWD、RWD 工具
- 摘要：對前端開發者來說 RWD 是一個惡夢，常常會有你修好了一個尺寸但忘記檢核不同尺寸在螢幕的適應性問題；今天跟大家分享一個超實用工具 — responsively，他的安裝極其簡單，而且還是免費的喔！

對前端開發者來說 RWD 是一個惡夢，常常會有你修好了一個尺寸但忘記檢核不同尺寸在螢幕的適應性問題；今天跟大家分享一個超實用工具 — responsively，他的安裝極其簡單，而且還是免費的喔！

## 一鍵下載，無腦安裝

請依據自己的作業系統選擇安裝檔案，因為操作太過簡單就不贅述了，[下載請點這裡](https://responsively.app/download)

## 安裝 Browser extension 快速跳轉

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

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

## 他強大在哪裡？

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

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

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

### 其他功能

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

> 這篇文章只是把[官網的資訊](https://deanlin.net/blog/202103/responsively-rwd-testing-tool/#https://responsively.app/)稍微中文化而已，筆者心得：『這工具堪成前端神器！身為前端工程師看到這篇文還不安裝一波！』

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202103/responsively-rwd-testing-tool/