使用 Chrome、Edge 開發工具檢視 RWD 設計與保存完整網頁截圖

為了讓網站在不同裝置都能完美呈現，響應式設計（RWD）已成為主流，特色是因應螢幕尺寸改變樣式。若想在電腦上模擬行動裝置來檢視網頁，Chrome、Edge 瀏覽器的開發人員工具就有這項功能。即使非網頁設計人員，透過模擬裝置可以擷取完整畫面保存整頁截圖，無論是分享內容或保存資料都很實用。

打開 Chrome 開發人員工具後，點擊「切換裝置工具列」可以模擬回應式、iPhone、Pixel、Galaxy、iPad 等多種型號的裝置，使用者可從裝置選單快速切換檢視尺寸，支援模擬手機直向、橫向畫面，以及選擇當前所見畫面和完整頁面，一鍵保存截圖。

使用 Devtools 模擬各種裝置：

這項功能不僅適合開發者檢視 RWD 網頁，一般使用者也能用來切換行動版網頁，例如，在電腦上模擬手機瀏覽 Instagram 網站可發布限時動態，彌補當前 IG 電腦版(網頁)功能的不足之處。

1. 在 Chrome 與 Edge 瀏覽器中，按下「F12」或從功能表開啟「開發人員工具」。

2. 啟動開發人員工具後，點擊「切換裝置工具列」即可模擬多種裝置瀏覽網頁。

3. 預設維度是「回應式」可透過拖曳框架，調整為任意尺寸。

4. 點擊「維度」展開選單，會有 iPhone、Pixel、Galaxy、iPad 等裝置，點選立即切換框架。

5、選擇裝置後，點擊「旋轉」按鈕可切換直向、橫向畫面，還能模擬中階、低階裝置測試網頁載入速度。

6. 開發人員工具預設多種模擬裝置，在選單中點擊「編輯」可查看所有裝置，以及自行勾選要放入選單的裝置。

透過模擬裝置保存網頁截圖：

若想展示網頁在不同裝置上的呈現效果，或是擷取長篇網頁畫面保存證據（如社群貼文留言），在模擬裝置中可以輕鬆保存畫面截圖。

1. 點擊「⋮」按鈕可選擇擷取螢幕畫面和完整大小的螢幕截圖。

2. 無須安裝擴充功能或借助第三方工具，使用 Chrome、Edge 內建功能即可快速保存完整網頁截圖。

結語：

總結來說，Chrome、Edge 不僅僅是瀏覽網頁，善用「開發人員工具」可以實現多項功能，如下載 Instagram 貼文照片，找出串流影片 M3U8 連結皆可辦到，往後若想在電腦上獲得完整網頁截圖，依照上述說明即可完成目標。操作簡單又不用安裝工具。

延伸閱讀：

• Chrome 透過媒體控制切換子母畫面，支援多數網站
• Chrome 右鍵呼叫 QR Code 產生器，轉換當前網址
• Chrome 個人化設定：自訂視窗外觀色彩與分頁背景
• Chrome 網址列支援Gemini對話，方便整理網頁摘要

文章更新：由於原先內容過時，本文於 2025 年 10 月重新撰寫。