使用裝置模式即可估算網頁在行動裝置上的外觀和效能。
總覽
裝置模式是 Chrome 開發人員工具的一系列功能名稱 模擬行動裝置這些功能包括：
限制
裝置模式就像是第一順位，您網頁的外觀和風格 使用行動裝置在裝置模式下，您不必在行動裝置上執行程式碼，您模擬 都能在筆電或桌機中流暢執行行動使用者體驗
開發人員工具無法模擬行動裝置的某些部分。例如： 行動 CPU 的架構與筆電或電腦 CPU 的架構截然不同 有疑問時，最好的方式就是在行動裝置上執行網頁。使用 Remote 偵錯時，在筆電或電腦上查看、變更、偵錯及剖析網頁程式碼 其實是在行動裝置上執行
開啟裝置工具列
如要開啟裝置工具列，請按照下列步驟操作：
- 開啟開發人員工具。
- 在頂端動作列中，按一下「裝置工具列」「切換裝置工具列」。
模擬行動版可視區域
根據預設，裝置工具列會以可視區域開啟，「尺寸」設為「回應式」。 使用「維度」下拉式選單，您可以模擬特定行動裝置的尺寸。
回應式可視區域模式
拖曳控點，即可視需要調整可視區域的大小。或者，輸入特定值
設定方塊在此範例中，寬度設為 480，高度則設定為
415。
或者，您也可以使用寬度預設列，按一下下列任一選項來設定寬度：
| 行動裝置 S | 行動裝置 M | 行動裝置 L | 平板電腦 | 筆記型電腦 | 筆電 L | 4K |
|---|---|---|---|---|---|---|
| 320 像素 | 375 像素 | 425 像素 | 768 像素 | 1024 像素 | 1440 像素 | 2560 像素 |
顯示媒體查詢
如要在可視區域上方顯示媒體查詢中斷點，請依序點選 
「更多選項」>顯示媒體查詢。
開發人員工具現在會在可視區域上方���外顯示兩個長條：
- 包含
max-width中斷點的藍色列。 - 含有
min-width中斷點的橘色長條。
在中斷點之間按一下，即可變更可視區域的寬度，以便觸發中斷點。
如要找出對應的 @media 宣告，請在中斷點之間按一下滑鼠右鍵，然後選取「顯示原始碼」。開發人員工具會在「Editor」的對應行中開啟「Sources」面板。
設定裝置像素比例
裝置像素比例 (DPR) 是指硬體螢幕實體像素與邏輯 (CSS) 像素之間的比率。也就是說，DPR 會告訴 Chrome 要使用多少螢幕像素來繪製 CSS 像素。在 HiDPI (高點每英寸) 螢幕上繪圖時，Chrome 會使用 DPR 值。
如要設定 DPR 值，請按照下列步驟操作：
按一下「更多選項」圖示
>增加裝置像素比例。
在可視區域頂端的動作列中，從新的「DPR」DPR下拉式選單中選取 DPR 值。
設定裝置類型
使用「裝置類型」清單模擬行動裝置或電腦裝置。
如果在頂端的動作列中找不到清單，請選取「更多選項」圖示 
>新增裝置類型。
下表說明兩者的不同之處。轉譯方法指的是
Chrome 會將網頁轉譯為行動裝置或電腦的可視區域。遊���圖示是指類型
您就會看到滑鼠遊標「事件觸發」是指網頁是否觸發
touch 或 click 事件。
| 選項 | 顯示方法 | 遊標圖示 | 已觸發事件 |
|---|---|---|---|
| 行動裝置 | 行動裝置 | 圓形 | 觸控輸入 |
| 行動裝置 (非觸控) | 行動裝置 | 一般 | click |
| 電腦 | 電腦 | 一般 | click |
| 電腦 (觸控式) | 電腦 | 圓形 | 觸控輸入 |
裝置專用模式
如要模擬特定行動裝置的尺寸，請從「維度」清單中選取裝置。
詳情請參閱新增自訂行動裝置。
將可視區域旋轉為橫向
按一下「screen_rotation」screen_rotation「旋轉」，將可視區域旋轉為橫向。
請注意，如果「裝置工具列」縮小，「旋轉」
按鈕會消失。
另請參閱「設定方向」。
切換雙螢幕模式
部分裝置 (例如 Surface Duo) 會提供兩個螢幕和兩種使用方式：其中一個畫面處於啟用狀態，或是兩個畫面處於啟用狀態。
如要切換雙螢幕模式和單螢幕模式，請按一下工具列中的 devices_fold 切換雙螢幕模式。
設定裝置型態
部分裝置 (例如 Asus Zenbook Fold) 擁有折疊式螢幕。這類螢幕的型態是連續或摺疊。持續態勢所指的「平板」位置和折疊位置形成一個在螢幕各部分之間形成的角度。
如要設定裝置型態，請在工具列的對應下拉式選單中選取「連續」或「摺疊」。
顯示裝置邊框
在模擬特定行動裝置 (例如 Nest Hub) 的尺寸時，選取「更多選項」圖示 
>顯示裝置頁框，在可視區域周圍顯示實體裝置外框。
在這個例子中，開發人員工具會顯示 Nest Hub 的影格。
新增自訂行動裝置
如何新增自訂裝置：
按一下「裝置」清單，然後選取「編輯」。
前往「設定」設定 >「裝置」分頁，從支援裝置清單中選擇裝置，或按一下「新增自訂裝置」新增一部裝置。
如要新增自訂裝置，請輸入裝置名稱、寬度和高度，然後按一下「新增」。
返回可視區域，從「維度」清單中選取新增的裝置。
顯示尺規
按一下「更多選項」圖示 
>顯示尺規即可查看尺規。尺規的大小單位為像素。
開發人員工具會在可視區域的頂端和左側顯示尺規。
按一下特定標記的尺規，以設定可視區域的寬度和高度。
縮放可視區域
使用「縮放」清單來放大或縮小。
擷取螢幕截圖
如要擷取可視區域顯示的螢幕截圖，請按一下 
「More options」(更多選項) >擷取螢幕截圖。
如要擷取整個網頁的螢幕截圖 (包括無法在可視區域顯示的內容)，請在同一個選單中選取「擷取完整大小的螢幕截圖」。
如要在特定裝置模式中擷取螢幕截圖時加入裝置頁框，請先顯示裝置頁框，再按照上述指示按一下「擷取螢幕截圖」。
如要瞭解使用開發人員工具擷取螢幕截圖的其他方式，請參閱「使用開發人員工具擷取螢幕截圖的 4 種方式」一文。
限制網路和 CPU
如要同時限制網路和 CPU 數量，請從下列項目中選取「中階行動裝置」或「低端行動裝置」。 Throttle 清單。
中階行動裝置會模擬快速的 3G 網路並節流 CPU，將 CPU 速度低於 4 倍 一般。低階行動裝置會模擬 3G 速度緩慢情形，並將 CPU 節流速度比平常慢 6 倍。保留 請記住，節流與筆電或桌上型電腦的正常功能有關。
請注意，如果裝置工具列範圍縮小，系統會隱藏「Throttle」清單。
僅限制 CPU
如果只要限制 CPU 而非網路效能，請前往效能面板，按一下擷取
設定 
，以及
然後從 CPU 清單中選取「4 倍速度緩慢」、「6 倍減速」或「20 倍減速」。
僅節流網路
如果只要限制網路數量，而不限制 CPU，請前往「網路」面板並選取「Fast 3G」或 「Throttle」清單中的「Slow 3G」。
按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 則可開啟指令
選單並輸入 3G，然後選取「啟用快速 3G 節流功能」或「啟用慢速 3G 節流」。
你也可以透過「Performance」面板設定網路節流功能。按一下「擷取設定」
，然後選取
「Fast 3G」(快速 3G) 或「Slow 3G」(慢 3G)。
模擬感應器
使用「Sensors」面板覆寫地理位置、模擬裝置螢幕方向、強制觸碰及模擬閒置狀態。
以下各節將說明如何覆寫地理位置並設定裝置方向。如需完整功能清單，請參閱「模擬裝置感應器」一文。
覆寫地理位置
如要開啟地理位置覆寫 UI，請按一下「Customize and Control DevTools」。
，然後選取「更多工具」>感應器。
按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 則可開啟指令
選單，輸入 Sensors，然後選取「Show Sensors」。
從「Location」(位置) 清單中選取一個預設選項，或「Other...」(其他...) 輸入 座標，或選取「無法取得位置資訊」，即可測試網頁在 地理位置處於錯誤狀態
設定方向
如要開啟螢幕方向 UI，請按一下「Customize and Control DevTools」。
，然後選取「更多工具」>感應器。
按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 則可開啟指令
選單，輸入 Sensors，然後選取「Show Sensors」。
從「方向」清單中選取一個預設選項，或選取「自訂方向」來設定 自己的 Alpha、Beta 和 Gamma 值。
