Mô phỏng thiết bị di động bằng chế độ thiết bị

Sofia Emelianova
Sofia Emelianova

Sử dụng chế độ thiết bị để ước tính 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 Công cụ của Chrome cho nhà phát triển giúp bạn mô phỏng thiết bị di động. Các tính năng này bao gồm:

Các điểm hạn chế

Hãy coi chế độ thiết bị là ước chừng thứ tự đầu tiên về giao diện trang của bạn trên thiết bị di động của bạn. 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 để 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ờ có thể mô phỏng. Ví dụ: kiến trúc của CPU dành cho thiết bị di động rất khác so với kiến trúc của CPU của máy tính xách tay hoặc máy tính để bàn. Nếu 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 Điều khiển từ xa Gỡ lỗi để xem, thay đổi, gỡ lỗi và phân tích tài nguyên mã của một trang trên máy tính xách tay hoặc máy tính để bàn trong khi mã 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ụ của thiết bị, hãy làm theo các bước sau:

  1. Mở Công cụ cho nhà phát triển.
  2. Nhấp vào Thiết bị Bật/tắt thanh công cụ thiết bị nằm trong thanh tác vụ ở trên cùng.

Nút bật tắt thanh công cụ của thiết bị

Mô phỏng 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 với Kích thước được đặt thành Thích ứng. Sử dụng trình đơn thả xuống Phương diện, bạn có thể mô phỏng kích thước của một thiết bị di động cụ thể.

Thanh công cụ của thiết bị.

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.

Ô điều khiển để thay đổi kích thước của khung nhìn khi ở Chế độ khung nhìn thích ứng.

Ngoài ra, hãy sử dụng thanh giá trị đặt trước cho chiều rộng để đặt chiều rộng bằng một cú nhấp chuột vào một trong các giá trị sau:

Thanh giá trị đặt trước cho chiều rộng.

Thiết bị di động cỡ nhỏ Thiết bị di động cỡ nhỏ Thiết bị di động cỡ nhỏ Máy tính bảng Máy tính xách tay Máy tính xách tay L 4K
320px 375px 425px 768px 1024px 1440px 2560px

Hiện truy vấn về nội dung nghe nhìn

Để hiển thị các đ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. Tuỳ chọn khác > Hiển thị truy vấn về nội dung nghe nhìn.

Hiển thị truy vấn về nội dung nghe nhìn.

Giờ đây, Công cụ cho nhà phát triển hiển thị thêm hai thanh bổ sung 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ó các điểm ngắt min-width.

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.

Nhấp vào giữa các điểm ngắt để thay đổi chiều rộng của khung nhìn.

Để 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.

Hiển thị trong trình đơn thả xuống mã nguồn.

Đặt tỷ lệ pixel của thiết bị

Tỷ lệ pixel trên 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 (Số chấm cao trên mỗi inch).

Cách đặt giá trị DPR:

  1. Nhấp vào biểu tượng Lựa chọn khác Tùy chọn khác. > Thêm tỷ lệ pixel của thiết bị.

    Thêm tỷ lệ pixel của thiết bị.

  2. Trong thanh tác vụ ở đầu khung nhìn, chọn giá trị DPR từ trình đơn thả xuống DPR mới.

    Đang đặt giá trị DPR.

Đặt loại thiết bị

Sử dụng danh sách Device Type (Loại thiết bị) để mô phỏng thiết bị di động hoặc thiết bị máy tính.

Danh sách Loại thiết bị.

Nếu bạn không thấy danh sách này trên thanh tác vụ ở trên cùng, hãy chọn biểu tượng Tuỳ chọn khác Tùy 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 lựa chọn. Phương thức hiển thị đề cập đến việc Chrome hiển thị trang dưới dạng khung nhìn trên thiết bị di động hay máy tính. Biểu tượng con trỏ đề cập đến loại con trỏ chuột bạn thấy khi di chuột qua trang. Sự kiện được kích hoạt cho biết liệu trang có kích hoạt hay không Sự kiện touch hoặc click khi bạn tương tác với trang.

Phương thứcPhương thức hiển thịBiểu tượng con trỏĐã kích hoạt các sự kiện
Di độngDi độngHình trònchạm
Di động (không chạm)Di độngBình thườngclick
Máy tínhMáy tínhBình thườngclick
Máy tính (cảm ứng)Máy tínhHình trònchạ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.

Danh sách Phương diện.

Để biết thêm thông tin, hãy xem nội dung 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.

Hướng ngang.

Lưu ý rằng nút Xoay Xoay. sẽ biến mất nếu Thanh công cụ trên thiết bị của bạn bị hẹp.

Thanh công cụ của thiết bị.

Xem thêm phần Đặt hướng.

Bật/tắt chế độ Dual Screen

Một số thiết bị, ví dụ như Surface Duo, có hai màn hình và 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 chế độ 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ụ.

Đã bật chế độ Dual Screen.

Đặ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. Những màn hình như vậy có tư thế: liên tục hoặc gập. Tư thế liên tục dùng để chỉ tư thế "phẳng" và 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ụ.

Tư thế gập được đặt.

Hiển thị khung hình của thiết bị

Khi mô phỏng các 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 Tuỳ chọn khác Tùy chọn khác. > Hiển thị khung thiết bị để hiển thị khung thiết bị thực xung quanh khung nhìn.

Hiển thị khung hình thiết bị.

Trong ví dụ này, Công cụ cho nhà phát triển hiển thị khung của Nest Hub.

Khung thiết bị của Nest Hub.

Thêm thiết bị di động tuỳ chỉnh

Cách thêm thiết bị tuỳ chỉnh:

  1. Nhấp vào danh sách Thiết bị, rồi chọn Chỉnh sửa.

    Chỉnh sửa.

  2. Trên phần Cài đặt > Thẻ Thiết bị, 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.

  3. 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.

    Tạo thiết bị tuỳ chỉnh.

    Không bắt buộc phải sử dụng các trường tỷ lệ pixel của thiết bị, chuỗi tác nhân người dùngloạ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.

  4. Quay lại khung nhìn, chọn thiết bị mới được thêm vào từ danh sách Kích thước.

Hiển thị thước

Nhấp vào biểu tượng Lựa chọn khác Tùy chọn khác. > Hiển thị thước để xem thước. Đơn vị kích thước của thước kẻ là pixel.

Hiển thị thước.

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.

Thước kẻ ở phía trên và bên trái khung nhìn.

Nhấp vào thước kẻ tại các điểm cụ thể để đặt chiều rộng và chiều cao cho 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ỏ.

Thu phóng.

Chụp ảnh màn hình

Để chụp ảnh màn hình nội dung bạn thấy trong khung nhìn, hãy nhấp vào Tùy chọn khác. Tùy chọn khác > Chụp ảnh màn hình.

Tùy chọn Chụp ảnh màn hình trong trình đơn Tùy chọn khác.

Để chụp ảnh chụp màn hình của 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 đủ từ cùng một trình đơn.

Để cung cấp khung hình 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 Hiển thị khung hình thiết bị, sau đó nhấp vào Chụp ảnh màn hình theo hướng dẫn trước đó.

Chụp ảnh màn hình có bao gồm khung thiết bị.

Để tìm hiểu các 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 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 cấp trung hoặc Thiết bị di động cấp thấp từ Danh sách Điều tiết.

Danh sách Điểm điều tiết.

Thiết bị di động cấp trung mô phỏng mạng 3G nhanh và điều tiết CPU để CPU 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 chậm hơn 6 lần so với bình thường. Giữ lại xin lưu ý rằng mức điều tiết tương ứng với khả năng thông thường của máy tính xách tay hoặc máy tính để bàn của bạn.

Lưu ý rằng danh sách Throttle (Điều tiết) sẽ bị ẩn nếu Thanh công cụ trên thiết bị của bạn bị thu hẹp.

Chỉ điều tiết CPU

Để chỉ điều tiết CPU chứ không phải mạng, hãy chuyển đến bảng điều khiển Performance (Hiệu suất), rồi nhấp vào Capture) Cài đặt Cài đặt chụp. và sau đó 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 từ danh sách CPU.

Danh sách CPU.

Chỉ điều tiết mạng

Để chỉ điều tiết mạng chứ không phải CPU, hãy chuyển đến bảng Network (Mạng) rồi chọn Fast 3G hoặc 3G chậm trong danh sách Tốc độ chậm.

Danh sách Điểm điều tiết.

Hoặc nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Command Trình đơn, 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.

Trình đơn lệnh.

Bạn cũng có thể đặt hạn chế băng thông mạng trong bảng Hiệu suất. Nhấp vào Cài đặt chụp Cài đặt chụp. rồi chọn 3G nhanh hoặc 3G chậm trong danh sách Mạng.

Đang đặt hạn chế băng thông mạng trong bảng điều khiển Hiệu suất.

Mô phỏng cảm biến

Sử dụng bảng điều khiển Cảm biến để ghi đè vị trí định vị vị trí, 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 của 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 Tuỳ chỉnh và kiểm soát Công cụ cho nhà phát triển 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.

Cảm biến

Hoặc nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Command Trình đơn, nhập Sensors rồi chọn Show Sensors (Hiện cảm biến).

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 giá trị đặt trước toạ độ riêng hoặc chọn Không có vị trí để kiểm tra cách trang của bạn hoạt động khi định vị vị trí đang ở trạng thái lỗi.

Vị trí địa lý

Đặt hướng

Để mở giao diện người dùng về 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 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.

Cảm biến

Hoặc nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Command Trình đơn, nhập Sensors rồi chọn Show Sensors (Hiện cảm biến).

Hiển thị cảm biến

Chọn một trong các giá trị đặt trước từ danh sách Orientation (Hướng) hoặc chọn CustomOrientation (Hướng tuỳ chỉnh) để đặt các giá trị alpha, beta và gamma riêng của bạn.

Hướng