Mẹo sử dụng chế độ giả lập di động trên Chrome

Website testing đang dần càng phức tạp. Thời đại kiểm tra tính năng trên hàng tá trình duyệt đã qua đi từ lâu rồi. Tác phẩm của bạn cần được đánh giá thật kỹ lưỡng trên cả một loạt thiết bị đa dạng, từ di động đến máy tính với những hệ điều hành, độ phân giải, khích thước màn hình và tốc độ xử lý khác nhau. Trong những trường hợp cực đoan, thời gian cho test có thể lâu bằng thời gian phát triển ban đầu.
Quá trình này lại càng bị phức tạp hóa với sự xuất hiện của màn hình cản ứng, thiết bị lai, và hiển thị siêu nét. Nếu đang code trên một chiếc PC hết sức bình thường, với chuột và bàn phím, hiển nhiện bạn khó lòng hình dung được tương tác của người dùng trên tác phẩm của bạn sẽ diễn ra như thế nào với các thiết bị khác (ví dụ như tính năng hơ chuột để hiện test sẽ không làm việc trên các thiết bị cảm ứng). Như vậy thì, làm cách nào bạn có thể test ngay trên một thiết bị mà không cần phải chuyển đổi rắc rối ?
Thật may mắn, tất cả các trình duyệt hiện đại ngày nay đều đã cung cấp công cụ giả lập di động và Chrome mang đến bộ công cụ tốt nhất. Với chúng, bạn có thể xác định sớm vấn đề mà không cần rời bỏ chiếc máy tính cùng mội trường lập trình ấm cúng của mình.

Developer Tools

Khởi động Chrome, điều hướng đến trang web bạn muốn test và mở Developer Tools (Menu > Tools > Developer Tools, Cmd+Opt+I trên Mac hoặc F12 / Ctrl+Shift+I trên Windows và Linux).
Bạn giờ đây đã có thể kích hoạt giả lập bằng cách click vào icon Toggle device toolbar ở góc trái trên cùng:
Bộ giả lập thiết bị sẽ hiện lên:
Kích thước của màn hình giả lập có thể được thay đổi khi lựa chọn device type thành Responsive.

Giả lập cảm ứng

Di chuyển con trỏ chuột lên thiết bị để biến thành trỏ ‘chạm’ tròn. Thay đổi này sẽ phản ứng với các e0vent JavaScript dạng chạm như touchstart, touchmove và touchend. Event riêng cho cuột và hiệu ứng CSS sẽ không xảy ra.
Giữ phím Shift sau đó click và di chuyển con chuột để mô phỏng pinch zooming.

Mobile Emulator Device Toolbar

Bạn cũng rất nên dành chút thời gian làm quen với toolbar và menu phía trên cửa sổ trên mobile emulator:
Các mục điều khiển mặc định gồm:
  • kiểu thiết bị (hoặc đơn giản là Responsive)
  • độ phân giải hiện tại
  • tỷ lệ (màn hình có thể được phóng to hoặc thu nhỏ để khớp với ô giả lập hơn)
  • nút chuyển đổi portrait/landscape (giả sử ta lựa chọn kiểu thiết bị khác Responsive)
Menu 3 chấm cho phép bạn ẩn/hiện các điều khiển gia tăng:
  • khung thiết bị (hình ảnh minh họacủa điện thoại hoặc máy tính bảng, nếu có thể)
  • thước pixel
  • tỷ lệ pixel của thiết bị (như 2.0 có các màn hình Retina được giả lập)
  • the device type (a category such as “mobile” or “tablet”)
  • điều tiết mạng (một cách giới hạn băng thông và test hiệu năng trên các kết nôi chậm hơn)
  • tùy chọn cuối cùng cho phép bạn chụp screenshot kèm theo khung thiết bị nếu được hiển thị

  • Thanh CSS Media Query

    Thanh bên dưới toolbar hiển thị một loạt kích thước di động, tablet và các thiết bị khác thường thấy. Mục này click được khi Responsive được chọn làm thiết bị cho độ rộng đó.
    Lựa chọn Show media queries từ menu ba chấm để xem được bản tóm tắt theo màu của tất cả media query được set trong CSS.
    • BLUE – các query tập trung vào maximum width
    • GREEN – các query tập trung vào widths trong một khoảng nhất định
    • ORANGE – các query tập trung vào một độ rộng nhất định
    Bạn có thể click bất kỳ thanh nào để thiết đặt màn hình giả lập về độ rộng đó.

    Lựa chọn thiết bị cần giả lập

    Drop-down menu ở phía bên trái bạn lựa chọn một thiết bị. Bạn cũng sẽ được cung cấp một loạt preset cho smartphone và tablet, điển hình như iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy,…
    Not all devices are presented at once – choose Edit… at the bottom of the device drop-down or select Settings from the Developer Tools menu (F1) and choose the Devices tab:
    Không phải tất cả thiết bị đều được thể hiện cùng một lúc – chọn Edit… ở cuối drop-down thiết bị hoặc Settings từ menu Developer Tools (F1) và chọn tab Devices:
  • Bạn có thể mở hoặc tắt thiết bị hoặc tự nhập kích thước thiết bị thông qua:
    • tên
    • phân nhóm như “Mobile” hoặc “Tablet”
    • browser user agent string
    • độ phân giải của thiết bị
    • và tỷ lệ pixel (ví dụ như 2 cho màn hình iPhone Retina – mật độ pixel cao gấp đôi độ phân giải của view port được report).


Comments

Post a Comment