Sử dụng chế độ thiết bị để ước đoán giao diện và hiệu suất của trang trên thiết bị di động.
Chế độ thiết bị là tên của một tập hợp các tính năng trong Công cụ của Chrome cho nhà phát triển nhằm giúp bạn mô phỏng thiết bị di động. Trong đó có một số tính năng như:
- Mô phỏng khung nhìn trên thiết bị di động
- Điều tiết CPU
- Điều tiết mạng
- Ngoài ra, trong thẻ Cảm biến:
Các điểm hạn chế
Hãy coi chế độ thiết bị là giá trị gần đúng bậc nhất để thể hiện giao diện của trang trên thiết bị di động. Với chế độ thiết bị, bạn thực sự không chạy mã của mình trên thiết bị di động. Bạn mô phỏng trải nghiệm người dùng trên thiết bị di động từ máy tính xách tay hoặc máy tính để bàn.
Có một số khía cạnh của thiết bị di động mà Công cụ cho nhà phát triển sẽ không bao giờ mô phỏng được. Ví dụ: kiến trúc của CPU trên thiết bị di động rất khác với kiến trúc của CPU trên máy tính xách tay hoặc máy tính để bàn. Khi nghi ngờ, cách tốt nhất là chạy trang của bạn trên một thiết bị di động. Sử dụng Remote debugging (Gỡ lỗi từ xa) để xem, thay đổi, gỡ lỗi và lập hồ sơ cho mã của một trang từ máy tính xách tay hoặc máy tính trong khi trang thực sự chạy trên thiết bị di động.
Mô phỏng khung nhìn trên thiết bị di động
Nhấp vào thiết bị Bật/tắt thanh công cụ của thiết bị để mở một thanh công cụ cho phép bạn mô phỏng một khung nhìn trên thiết bị di động.
Theo mặc định, thanh công cụ của thiết bị sẽ mở trong khung nhìn, trong đó Phương diện được đặt thành Thích ứng.
Chế độ khung nhìn thích ứng
Kéo các ô điều khiển để đổi kích thước khung nhìn thành bất kỳ kích thước nào bạn cần. Hoặc nhập giá trị cụ thể vào hộp chiều rộng và chiều cao. Trong ví dụ này, chiều rộng được đặt thành 480 và chiều cao được đặt thành 415.
Ngoài ra, sử dụng thanh giá trị đặt trước cho chiều rộng để đặt chiều rộng bằng một lần nhấp vào một trong các giá trị sau:
| Thiết bị di động cỡ nhỏ | Thiết bị di động cỡ trung bình | Thiết bị di động cỡ lớn | Máy tính bảng | Máy tính xách tay | Máy tính xách tay cỡ lớn | 4K |
|---|---|---|---|---|---|---|
| 320px | 375px | 425px | 768px | 1024px | 1440px | 2560px |
Hiển thị truy vấn phương tiện
Để hiển thị điểm ngắt truy vấn phương tiện phía trên khung nhìn của bạn, hãy nhấp vào 
Tùy chọn khác > Hiển thị truy vấn phương tiện.
Công cụ cho nhà phát triển hiện hiển thị 2 thanh bổ sung phía trên khung nhìn:
- Thanh màu xanh dương có
max-widthđiểm ngắt. - Thanh màu cam có
min-widthđiểm ngắt.
Nhấp vào giữa các điểm ngắt để thay đổi chiều rộng của khung nhìn để kích hoạt điểm ngắt.
Để tìm phần khai báo @media tương ứng, hãy nhấp chuột phải giữa các điểm ngắt rồi chọn Hiển thị trong mã nguồn. Công cụ cho nhà phát triển mở bảng điều khiển Nguồn ở dòng tương ứng trong Trình chỉnh sửa.
Đặt tỷ lệ pixel của thiết bị
Tỷ lệ pixel thiết bị (DPR) là tỷ lệ giữa pixel vật lý trên màn hình phần cứng và pixel logic (CSS). Nói cách khác, DPR cho Chrome biết cần sử dụng bao nhiêu pixel màn hình để vẽ một pixel CSS. Chrome sử dụng giá trị DPR khi vẽ trên màn hình HiDPI (Dấu chấm cao trên mỗi inch).
Cách đặt giá trị DPR:
Nhấp vào biểu tượng Tuỳ chọn khác
> Thêm tỷ lệ pixel của thiết bị.
Trong thanh hành động ở đầu khung nhìn, hãy chọn một giá trị DPR từ trình đơn thả xuống DPR mới.
Đặt loại thiết bị
Sử dụng danh sách Device Type (Loại thiết bị) để mô phỏng một thiết bị di động hoặc máy tính.
Nếu bạn không thể thấy danh sách trong thanh thao tác ở trên cùng, hãy chọn Tuỳ chọn khác 
> Thêm loại thiết bị.
Bảng tiếp theo mô tả sự khác biệt giữa các tùy chọn. Phương thức hiển thị cho biết Chrome hiển thị trang dưới dạng khung nhìn của thiết bị di động hay máy tính. Biểu tượng con trỏ đề cập đến loại con trỏ bạn thấy khi di chuột qua trang. Sự kiện được kích hoạt đề cập đến việc trang có kích hoạt các sự kiện touch hoặc click khi bạn tương tác với trang đó hay không.
| Lựa chọn | Phương thức hiển thị | Biểu tượng con trỏ | Đã kích hoạt sự kiện |
|---|---|---|---|
| Di động | Di động | Hình tròn | chạm |
| Thiết bị di động (không chạm) | Di động | Bình thường | click |
| Máy tính | Máy tính | Bình thường | click |
| Máy tính (chạm) | Máy tính | Hình tròn | chạm |
Chế độ dành riêng cho thiết bị
Để mô phỏng kích thước của một thiết bị di động cụ thể, hãy chọn thiết bị đó từ danh sách Phương diện.
Để biết thêm thông tin, hãy xem bài viết Thêm thiết bị di động tuỳ chỉnh.
Xoay khung nhìn sang hướng ngang
Nhấp vào screen_rotation Xoay để xoay khung nhìn theo hướng ngang.
Lưu ý rằng nút Xoay 
sẽ biến mất nếu Thanh công cụ của thiết bị bị thu hẹp.
Xem thêm phần Đặt hướng.
Bật/tắt chế độ màn hình đôi
Một số thiết bị (ví dụ: Surface Duo) có hai màn hình và có hai cách sử dụng: với một hoặc cả hai màn hình đang hoạt động.
Để chuyển đổi giữa màn hình đôi và màn hình đơn, hãy nhấp vào devices_fold Bật/tắt chế độ màn hình đôi trên thanh công cụ.
Đặt tư thế thiết bị
Một số thiết bị (ví dụ: Asus Zenbook Fold) có màn hình có thể gập lại. Những màn hình như vậy có một tư thế: liên tục hoặc gập. Tư thế liên tục đề cập đến vị trí "bằng phẳng" và khi gập lại tạo thành một góc giữa các phần của màn hình.
Để đặt tư thế thiết bị, hãy chọn Liên tục hoặc Gập trong trình đơn thả xuống tương ứng trên thanh công cụ.
Hiện khung thiết bị
Khi mô phỏng kích thước của một thiết bị di động cụ thể như Nest Hub, hãy chọn biểu tượng More options (Tuỳ chọn khác) 
> Show device frame (Hiện khung thiết bị) để hiển thị khung thiết bị thực xung quanh khung nhìn.
Trong ví dụ này, Công cụ cho nhà phát triển hiển thị khung dành cho Nest Hub.
Thêm thiết bị di động tuỳ chỉnh
Cách thêm thiết bị tuỳ chỉnh:
Nhấp vào danh sách Thiết bị, rồi chọn Chỉnh sửa.
Trên thẻ Cài đặt > Thiết bị, hãy chọn một thiết bị trong danh sách các thiết bị được hỗ trợ hoặc nhấp vào Thêm thiết bị tuỳ chỉnh để thêm thiết bị của riêng bạn.
Nếu bạn muốn thêm thiết bị của riêng mình, hãy nhập tên, chiều rộng và chiều cao cho thiết bị, sau đó nhấp vào Thêm.
Không bắt buộc phải sử dụng các trường tỷ lệ pixel thiết bị, chuỗi tác nhân người dùng và loại thiết bị. Trường loại thiết bị là danh sách được đặt thành Thiết bị di động theo mặc định.
Quay lại khung nhìn, chọn thiết bị mới được thêm vào từ danh sách Phương diện.
Hiển thị thước
Nhấp vào biểu tượng Tuỳ chọn khác 
> Hiển thị thước để xem thước kẻ. Đơn vị kích thước của thước kẻ là pixel.
Công cụ cho nhà phát triển hiển thị thước kẻ ở trên cùng và ở bên trái của khung nhìn.
Nhấp vào thước kẻ tại các dấu cụ thể để cài đặt chiều rộng và chiều cao của khung nhìn.
Thu phóng khung nhìn
Sử dụng danh sách Thu phóng để phóng to hoặc thu nhỏ.
Chụp ảnh màn hình
Để chụp ảnh màn hình những gì bạn thấy trong khung nhìn, hãy nhấp vào 
Tuỳ chọn khác > Chụp ảnh màn hình.
Để chụp ảnh màn hình toàn bộ trang, bao gồm cả nội dung không hiển thị trong khung nhìn, hãy chọn Chụp ảnh màn hình ở kích thước đầy đủ trong cùng một trình đơn.
Điều tiết mạng và CPU
Để điều tiết cả mạng và CPU, hãy chọn Thiết bị di động cấp trung hoặc Thiết bị di động cấp thấp trong danh sách Trình điều tiết.
Thiết bị di động cấp trung mô phỏng 3G nhanh và điều tiết CPU để tốc độ chậm hơn gấp 4 lần so với bình thường. Thiết bị di động cấp thấp mô phỏng mạng 3G chậm và điều tiết CPU chậm hơn 6 lần so với bình thường. Xin lưu ý rằng chế độ điều tiết tương ứng với khả năng bình thường của máy tính xách tay hoặc máy tính để bàn.
Lưu ý rằng danh sách Throttle sẽ bị ẩn nếu DeviceToolbar (Thanh công cụ thiết bị) của bạn hẹp.
Chỉ điều tiết CPU
Để chỉ điều tiết CPU mà không điều tiết mạng, hãy chuyển đến bảng điều khiển Performance (Hiệu suất), nhấp vào biểu tượng Capture Settings (Cài đặt chụp ảnh) 
, sau đó chọn 4 lần giảm tốc độ hoặc 6 lần giảm tốc độ (6x) trong danh sách CPU (CPU).
Chỉ điều tiết mạng
Để chỉ điều tiết hệ thống mạng mà không điều tiết CPU, hãy chuyển đến bảng điều khiển Mạng rồi chọn 3G nhanh hoặc 3G chậm trong danh sách Điều tiết.
Bạn cũng có thể nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn Command, nhập 3G rồi chọn Bật chế độ điều tiết 3G nhanh hoặc Bật chế độ điều tiết 3G chậm.
Bạn cũng có thể thiết lập chế độ hạn chế băng thông mạng qua bảng Hiệu suất. Nhấp vào biểu tượng Capture Settings (Cài đặt chế độ cài đặt) 
rồi chọn Quick 3G (3G nhanh) hoặc 3G chậm (3G chậm) trong danh sách Network (Mạng).
Mô phỏng cảm biến
Sử dụng thẻ Cảm biến để ghi đè vị trí định vị, mô phỏng hướng thiết bị, buộc chạm và mô phỏng trạng thái rảnh.
Các phần tiếp theo cung cấp thông tin nhanh về cách ghi đè vị trí địa lý và đặt hướng thiết bị. Để xem danh sách đầy đủ các tính năng, hãy xem nội dung Mô phỏng cảm biến trên thiết bị.
Ghi đè vị trí địa lý
Để mở giao diện người dùng ghi đè vị trí địa lý, hãy nhấp vào biểu tượng Tuỳ chỉnh và điều khiển Công cụ cho nhà phát triển
, sau đó chọn Công cụ khác > Cảm biến.
Bạn cũng có thể nhấn tổ hợp phím Command+Shift+P (máy Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn lệnh, nhập Sensors rồi chọn Show Sensors (Hiển thị cảm biến).
Chọn một trong các giá trị đặt trước từ danh sách Vị trí hoặc chọn Khác... để nhập toạ độ của riêng bạn hoặc chọn Vị trí không có sẵn để kiểm tra cách trang của bạn hoạt động khi vị trí địa lý ở trạng thái lỗi.
Đặt hướng
Để mở giao diện người dùng hướng, hãy nhấp vào Tuỳ chỉnh và điều khiển Công cụ cho nhà phát triển
rồi chọn Công cụ khác > Cảm biến.
Bạn cũng có thể nhấn tổ hợp phím Command+Shift+P (máy Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn lệnh, nhập Sensors rồi chọn Show Sensors (Hiển thị cảm biến).
Chọn một trong các giá trị đặt trước trong danh sách Orientation (Hướng) hoặc chọn CustomOrientation (Hướng tùy chỉnh) để đặt các giá trị alpha, beta và gamma của riêng bạn.
