Chrome教程(二)使用ChromeDevTools命令菜單運行命令

1.模擬移動設備

點擊 Toggle Device Toolbar切換設備工具欄能夠打開用於模擬移動設備視口的界面。網絡

image-20190524113717134

2.限制網絡流量和 CPU 佔用率

要限制網絡流量和 CPU 佔用率,請從 Throttle 列表中選擇 Mid-tier mobile 或 Low-end mobile工具

Mid-tier mobile 可模擬快速 3G 網絡,並限制 CPU 佔用率,以使模擬性能比普通性能低 4 倍。 Low-end mobile 可模擬慢速 3G 網絡,並限制 CPU 佔用率,以使模擬性能比普通性能低 6 倍。 請記住,限制是相對於筆記本電腦或桌面設備的普通性能而言。佈局

請注意,若是 Device Toolbar 佈局較窄,則會隱藏 Throttle 列表。性能

2.1只限制 CPU 佔用率

若是隻限制 CPU 佔用率而不限制網絡流量,請轉至 Performance 面板,點擊 Capture Settings捕獲設置,而後從 CPU 列表中選擇 4x slowdown 或 6x slowdown測試

2.2只限制網絡流量

若是隻限制網絡流量而不限制 CPU 佔用率,請轉至 Network 面板,而後從 Throttle 列表中選擇 Fast 3G或 Slow 3G3d

2.3.替換地理定位

要打開地理定位替換界面,請點擊 Customize and control DevTools自定義和控制 DevTools,而後選擇 More tools > Sensorsorm

從 Geolocation 列表中選擇其中一個預設,或選擇 Custom location 以輸入本身的座標,或選擇 Location unavailable 以測試您的頁面在地理定位處於錯誤狀態時的表現。blog

image-20190524114712519

相關文章
相關標籤/搜索