Sử dụng chế độ thiết bị để ước chừng giao diện và hiệu suất của trang trên thiết bị di động.
Tổng quan
Chế độ thiết bị là tên của một tập hợp các tính năng trong Chrome DevTools giúp bạn mô phỏng thiết bị di động. Các tính năng này bao gồm:
- Mô phỏng khung hiển thị trên thiết bị di động
- Điều tiết CPU
- Hạn chế băng thông mạng
- Ngoài ra, trong bảng điều khiển Cảm biến:
Các điểm hạn chế
Hãy coi chế độ thiết bị là phép tính xấp xỉ bậc nhất về giao diện và cảm giác của trang trên thiết bị di động. Với chế độ thiết bị, bạn không thực sự chạy mã 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 của mình.
Có một số khía cạnh mà thiết bị di động không bao giờ có thể mô phỏng được trong Công cụ cho nhà phát triển. Ví dụ: cấu trúc của CPU di động khác rất nhiều so với cấu trúc của CPU máy tính xách tay hoặc máy tính. Khi nghi ngờ, tốt nhất bạn nên chạy trang của mình trên thiết bị di động. Sử dụng tính năng Gỡ lỗi từ xa để xem, thay đổi, gỡ lỗi và lập hồ sơ mã của trang trên 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ở thanh công cụ trên thiết bị
Để mở thanh công cụ thiết bị, hãy làm theo các bước sau:
- Mở Công cụ cho nhà phát triển.
- Nhấp vào (thiết bị) Toggle device toolbar (Bật/tắt thanh công cụ thiết bị) nằm trong thanh thao tác ở trên cùng.
Mô phỏng khung nhìn trên thiết bị di động
Theo mặc định, thanh công cụ thiết bị sẽ mở ra trong khung nhìn có Kích thước được đặt thành Thích ứng. Bằng cách sử dụng trình đơn thả xuống Kích thước, bạn có thể mô phỏng kích thước của một thiết bị di động cụ thể.
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 các 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, bạn có thể sử dụng thanh giá trị đặt trước về chiều rộng để đặt chiều rộng bằng cách 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ỡ vừa | 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 | 2560 px |
Hiển thị truy vấn đa phương tiện
Để hiện các điểm ngắt truy vấn nội dung nghe nhìn ở phía trên khung hiển thị, hãy nhấp vào Tuỳ chọn khác > Hiện truy vấn nội dung nghe nhìn.
Tuỳ chọn khác > Hiện truy vấn nội dung nghe nhìn.
Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị thêm 2 thanh phía trên khung nhìn:
- Thanh màu xanh dương có các điểm ngắt
max-width. - 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 sao cho điểm ngắt được kích hoạt.
Để tìm khai báo @media tương ứng, hãy nhấp chuột phải vào giữa các điểm ngắt rồi chọn Reveal in source code (Hiện trong mã nguồn). Công cụ cho nhà phát triển sẽ mở bảng điều khiển Nguồn tại dòng tương ứng trong Trình chỉnh sửa.
Đặt tỷ lệ pixel của thiết bị
Tỷ lệ pixel của thiết bị (DPR) là tỷ lệ giữa số pixel thực tế trên màn hình phần cứng và số pixel logic (CSS). Nói cách khác, DPR cho Chrome biết cần dùng bao nhiêu pixel trên 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 (Số điểm trên mỗi inch).
Cách đặt giá trị DPR:
Nhấp vào Tuỳ chọn khác > Thêm tỷ lệ pixel của thiết bị.
Trong thanh thao tác ở đầu khung hiển thị, hãy chọn một giá trị DPR trong trình đơn thả xuống DPR mới.
> Thêm tỷ lệ pixel của thiết bị.Đặt loại thiết bị
Sử dụng danh sách Loại thiết bị để mô phỏng thiết bị di động hoặc thiết bị máy tính.
Nếu bạn không thấy danh sách này trên thanh thao tác ở trên cùng, hãy chọn Tuỳ chọn khác > Thêm loại thiết bị.
> Thêm loại thiết bị.Bảng tiếp theo mô tả sự khác biệt giữa các lựa chọn.
Phương thức kết xuất đề cập đến việc Chrome kết xuất trang dưới dạng khung hiển thị dành cho thiết bị di động hay máy tính. Biểu tượng con trỏ là loại con trỏ mà bạn thấy khi di chuột lên trang. Sự kiện được kích hoạt đề cập đến việc trang có kích hoạt sự kiện touch hoặc click khi bạn tương tác với trang hay không.
| Phương thức | Phương thức kết xuất | Biểu tượng con trỏ | Sự kiện được kích hoạt |
|---|---|---|---|
| Thiết bị di động | Thiết bị di động | Hình tròn | chạm |
| Di động (không cảm ứng) | Thiết bị di động | Bình thường | click |
| Máy tính | Máy tính | Bình thường | click |
| Máy tính (cảm ứng) | 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ị đó trong danh sách Kích thước.
Để 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 hiển thị sang hướng ngang
Nhấp vào biểu tượng Xoay để xoay khung hiển thị sang hướng ngang.
Xin lưu ý rằng nút Xoay sẽ biến mất nếu Thanh công cụ của thiết bị có kích thước hẹp.
sẽ biến mất nếu Thanh công cụ của thiết bị có kích thước hẹp.
Xem thêm phần Đặt hướng.
Bật/tắt chế độ Dual Screen
Một số thiết bị (ví dụ: Surface Duo) có 2 màn hình và 2 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 chế độ một màn hình và chế độ hai màn hình, hãy nhấp vào biểu tượng Bật/tắt chế độ hai màn hình trên thanh công cụ.
Đặt tư thế thiết bị
Một số thiết bị, chẳng hạn như Asus Zenbook Fold, có màn hình có thể gập lại. Màn hình như vậy có một tư thế: liên tục hoặc gập lại. Tư thế liên tục đề cập đến vị trí "phẳng" và tư thế gập 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 thị khung hình của 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 Tuỳ chọn khác > Hiện khung thiết bị để hiện khung thiết bị thực xung quanh khung hiển thị.
> Hiện khung thiết bị để hiện khung thiết bị thực xung quanh khung hiển thị.
Trong ví dụ này, Công cụ cho nhà phát triển cho thấy khung hì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 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 đang 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ị, rồi nhấp vào Thêm.
Các trường tỷ lệ pixel trên thiết bị, chuỗi tác nhân người dùng và loại thiết bị là không bắt buộc. 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 hiển thị, hãy chọn thiết bị mới thêm trong danh sách Kích thước.
Hiển thị thước
Nhấp vào biểu tượng Tuỳ chọn khác > Hiện thước để xem thước. Đơn vị đo kích thước của thước là pixel.
> Hiện thước để xem thước. Đơn vị đo kích thước của thước là pixel.
Công cụ cho nhà phát triển hiển thị các thước đo ở trên cùng và bên trái của khung nhìn.
Nhấp vào các thước đo tại các dấu cụ thể để đặ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 Phóng to để 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 hiển thị, hãy nhấp vào biểu tượng Tuỳ chọn khác > Chụp ảnh màn hình.
Tuỳ chọn khác > Chụp ảnh màn hình.
Để chụp ảnh màn hình toàn trang, bao gồm cả nội dung không hiển thị trong khung hiển thị, hãy chọn Chụp ảnh màn hình với kích thước đầy đủ trong cùng một trình đơn.
Để thêm khung thiết bị khi chụp ảnh màn hình ở Chế độ dành riêng cho thiết bị, trước tiên, hãy nhấp vào Hiện khung thiết bị, rồi nhấp vào Chụp ảnh màn hình như hướng dẫn trước đó.
Để tìm hiểu những cách khác để chụp ảnh màn hình bằng Công cụ cho nhà phát triển, hãy xem bài viết 4 cách chụp ảnh màn hình bằng Công cụ cho nhà phát triể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 tầm trung hoặc Thiết bị di động cấp thấp trong danh sách Điều tiết.
Thiết bị di động tầm trung mô phỏng kết nối 3G nhanh và điều tiết CPU để tốc độ chậm hơn 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 của bạn chậm hơn 6 lần so với bình thường. Xin lưu ý rằng việc điều tiết này 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.
Xin lưu ý rằng danh sách Giảm tốc độ sẽ bị ẩn nếu Thanh công cụ thiết bị của bạn hẹp.
Chỉ điều tiết CPU
Để chỉ điều chỉnh tốc độ CPU chứ không điều chỉnh tốc độ mạng, hãy chuyển đến bảng Hiệu suất, nhấp vào Cài đặt chụp 
, rồi chọn Giảm tốc độ 4 lần, Giảm tốc độ 6 lần hoặc Giảm tốc độ 20 lần trong danh sách CPU.
Chỉ điều tiết mạng
Để chỉ điều chỉnh tốc độ mạng chứ không điều chỉnh tốc độ CPU, hãy chuyển đến bảng điều khiển Network (Mạng) rồi chọn Fast 3G (3G nhanh) hoặc Slow 3G (3G chậm) trong danh sách Throttle (Điều chỉnh tốc độ).
Hoặc nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn lệnh, nhập 3G rồi chọn Bật chế độ điều tiết mạng 3G nhanh hoặc Bật chế độ điều tiết mạng 3G chậm.
Bạn cũng có thể đặt chế độ điều tiết mạng trong bảng Hiệu suất. Nhấp vào Cài đặt chụp rồi chọn 3G nhanh hoặc 3G chậm trong danh sách Mạng.
rồi chọn 3G nhanh hoặc 3G chậm trong danh sách Mạng.
Mô phỏng cảm biến
Sử dụng bảng điều khiển Cảm biến để ghi đè thông tin vị trí địa lý, mô phỏng hướng thiết bị, lực nhấn và mô phỏng trạng thái không hoạt động.
Các phần tiếp theo trình bày nhanh 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 bài viết Mô phỏng các cảm biến trên thiết bị.
Ghi đè thông tin định vị vị trí địa lý
Để mở giao diện người dùng ghi đè vị trí địa lý, hãy nhấp vào Tuỳ chỉnh và kiểm soát Công cụ cho nhà phát triển rồi chọn Công cụ khác > Cảm biến.
rồi chọn Công cụ khác > Cảm biến.
Hoặc nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn lệnh, nhập Sensors, rồi chọn Hiện cảm biến.
Chọn một trong các chế độ cài đặt sẵn trong danh sách Vị trí, hoặc chọn Khác... để nhập toạ độ của riêng bạn, hoặc chọn Không xác định được vị trí để kiểm tra cách trang của bạn hoạt động khi dịch vụ định vị đị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à kiểm soát Công cụ cho nhà phát triển rồi chọn Công cụ khác > Cảm biến.
rồi chọn Công cụ khác > Cảm biến.
Hoặc nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn lệnh, nhập Sensors, rồi chọn Hiện cảm biến.
Chọn một trong các chế độ đặt sẵn trong danh sách Hướng hoặc chọn Hướng tuỳ chỉnh để đặt các giá trị alpha, beta và gamma của riêng bạn.
