Tuyệt chiêu: Sử dụng chế độ giả lập di động trên Chrome

10430

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:

enable mobile emulation

Bộ giả lập thiết bị sẽ hiện lên:

mobile device emulator

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:

mobile phone simulator device toolbar

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

mobile phone simulator device toolbar options

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.

mobile phone emulator media queries

  • 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:

device simulation options

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

Đến gần hơn với giấc mơ với sự kiện “Đòn bẩy cho giấc mơ khởi nghiệp”
do UOB Việt Nam & The FinLab phối hợp tổ chức

*Hồ Chí Minh: 17h00 – 21h00 ngày 04/03/2017

9

Note that all browsers identify themselves with a user agent string sent with all HTTP headers. This can be examined on the client or server-side and, during the dark days of web development, would be used to modify or provide a different user experience. In extreme cases, the viewer would be directed to a different site. The technique was always flawed but has become largely redundant owing to Responsive Web Design techniques and completely unsustainable given the number of devices available on the market.

Chú ý rằng tất cả trình duyệt tự xác định chính nó với một user agent string đã gửi với tất cả HTTP header. Bước này có thể được khảo sát trên phía client hoặc server và (trong những ngày tối tăm nhất lập trình web) sẽ được sử dụng để chỉnh sửa hoặc cung cấp một trải nghiệm người dùng khác đi. Trong các trường hợp cực đoan, người xem sẽ được chuyển hướng đến site khác. Kỹ thuật này từ trước đến nay luôn tồn tại khuyết điểm nhưng thực sự đã trở nên dư thừa trước sự xuất hiện của các kỹ thuật Responsive Web Design mới, và không thể duy trì được nữa do số thiết bị hiện có trên thị trường hiện nay.

Giả Lập “bớp” băng thông

Drop-down “Throttling”  cho phép bạn mô phỏng kết nối chậm chạp thường thấy ở mạng di động hay wifi khách sạn/sân bay chập chờn! Bạn có thể sử dụng tính năng này để đảm bảo site hoặc ứng dụng của mình load nhanh hơn và luôn responsive trong mọi môi trường.

Drop-down “throttling” nằm trong tab Network và toolbar thiết bị của Chrome’s device toolbar (khi được kích hoạt). Bạn có thể tự tinh chỉnh băng thông theo cách riêng bằng việc chọn Edit… ở cuối drop-down throttling hoặc chọn Settings từ menu Developer Tools (F1) và chọn tab Throttling:

Click Add custom profile và nhập:

  • tên profile
  • tốc độ download theo kilobits/s
  • tốc độ upload the kilobits/s
  • độ trễ theo milli giây (khoảng delay thường thấy khi thực hiện một network request)

Đến gần hơn với giấc mơ với sự kiện “Đòn bẩy cho giấc mơ khởi nghiệp”
do UOB Việt Nam & The FinLab phối hợp tổ chức

*Hồ Chí Minh: 17h00 – 21h00 ngày 04/03/2017

9

Giả lập cảm biến

Smart phones và tablets thường có rất nhiều cảm ứng như GPS, con quay hồi chuyển và gia tốc không có trong các thiết bị desktop. Những cảm ứng này có thể được giả lập trong Chrome thông qua mục More tools -> Sensors trong menu ba chấm của Developer Tools:

A new pane appears which allows you to define:

Một cửa sổ mới sẽ xuất hiện cho phép bạn xác định:

  • Kinh-vĩ độ hiện tại hoặc lựa chọn một thành phố lớn nào đó từ drop-down. Bạn cũng có thể lựa chọn Location unavailable để giả lập phản ứng của ứng dụng khi thiết bị không thu được tín hiệu GPS.
  • Về tính năng xoay. Bạn có thể xoay theo các preset có sẵn hoặc xoay thiết bị bằng cách click và kéo.

Remote Real Device Debugging

Cuối cùng, Chrome cũng đã cho phép bạn kết nối một thiết bị Android thật thông qua USB remote device debugging. Lựa chọn More tools -> Remote devices trong menu ba chấm chính của Developer Tools. Kiểm tra xem mục Discover USB devices đã được đánh dấu hay chưa, sau đó kết nối điện thoại/tablet và làm theo hướng dẫn.

Chrome còn cho phép bạn set up port forwarding, để bạn có thể chuyển hướng đến địa chỉ web trên local server của thiết bị. Ô preview của Chrome hiển thị hình ảnh đồng bộ của màn hình thiết bị và bạn có thể tương tác đồng thời qua thiệt bị hoặc bản thân Chrome.

Để test Progressive Web Apps ở chế độ offline, bạn có thể sử dụng một loạt tính năng tuyệt vời của developer tools, kể cả tab Application. Chú ý rằng, không giống ứng dụng thật có yêu cầu HTTPS, Chrome cho phép PWAs chạy từ localhost thông qua kết nối HTTP.

Đến gần hơn với giấc mơ với sự kiện “Đòn bẩy cho giấc mơ khởi nghiệp”
do UOB Việt Nam & The FinLab phối hợp tổ chức

*Hồ Chí Minh: 17h00 – 21h00 ngày 04/03/2017

9

Tuyệt! Tôi chả cần thêm thiết bị nào nữa rồi!

Giả lập trình duyệt di động của Chrome hiển nhiên rất mạnh mẽ và hữu ích, nhưng vẫn còn thiếu sót rất nhiều đặc biệt khi bạn muốn tìm hiểu chuyên sâu về trải nghiệm người dùng.

Hơn nữa, không có bộ giả lập thiết bị nào hoàn hảo cả. Ví dụ như, Chrome hiển thị phiên bản của page trên iPhone hay iPad nhưng sẽ không giả lập các hỗ trợ chuẩn hoặc quirks của Safari.

That said, for quick and dirty mobile testing, Chrome’s device emulation is excellent. It’s far easier than switching between real smart phone and tablet devices and you’ll have all the developer tools at your disposal. It will save hours of effort.

Như vậy, giả lập thiết bị của Chrome rất thích hợp cho testing nhanh, đơn giản; với khả năng chuyển đổi thiệt bị giữa smartphone và table vô cùng dễ dàng và bộ developer tools mạnh mẽ trong tầm tay giúp bạn tiếp kiệm vô vàn thời gian quý giá.

Techtalk via Sitepoint

CHIA SẺ