Việc phát triển cho thiết bị di động phải dễ dàng như phát triển cho máy tính. Chúng tôi đã nỗ lực hết mình trong Chrome DevTools để giúp bạn dễ dàng hơn. Giờ đây, chúng tôi xin ra mắt một số tính năng mới có thể cải thiện đáng kể hoạt động phát triển web dành cho thiết bị di động. Trước tiên, hãy gỡ lỗi từ xa rồi chúng ta sẽ tiết lộ tính năng mô phỏng thiết bị di động thích hợp.
Quay màn hình thiết bị của bạn vào máy tính
Cho đến nay, trong khi gỡ lỗi từ xa, bạn phải chuyển mắt qua lại giữa thiết bị và công cụ phát triển. Giờ đây, Screencast sẽ hiển thị màn hình của thiết bị ngay bên cạnh các công cụ phát triển. Việc xem là tốt, nhưng tương tác với nó còn tốt hơn:
- Các lượt nhấp trên bản ghi màn hình được dịch thành các thao tác nhấn và các sự kiện chạm thích hợp sẽ được kích hoạt trên thiết bị.
- Kiểm tra phần tử trên thiết bị bằng con trỏ trên máy tính
- Nhập trên bàn phím máy tính – tất cả thao tác nhấn phím đều được gửi đến thiết bị. Giúp tiết kiệm rất nhiều thời gian so với việc nhập bằng ngón tay cái.
- Di chuyển trang bằng cách hất trang bằng con trỏ hoặc chỉ cần trượt trên bàn di chuột của máy tính xách tay.
Tài liệu đầy đủ về tính năng truyền màn hình trình bày tất cả những điều này và nhiều nội dung khác, chẳng hạn như gửi cử chỉ chụm để thu phóng. Yêu cầu Chrome trên Android Beta (m32).
Gỡ lỗi từ xa dễ dàng
18 tháng trước, Chrome đã ra mắt tính năng gỡ lỗi từ xa thích hợp cho trình duyệt WebKit. Tuy nhiên, nếu đã thử tính năng này vào thời điểm đó, bạn phải tải SDK Android 400 MB xuống, thêm tệp nhị phân adb vào $PATH và một số câu thần chú dòng lệnh kỳ diệu.
Giờ đây, chúng tôi rất vui mừng được thông báo rằng bạn có thể quên tất cả những điều đó. Giờ đây, Chrome có thể tự động phát hiện và giao tiếp với các thiết bị được kết nối qua USB. Chúng tôi đã triển khai giao thức adb trực tiếp qua USB trong Chrome, vì vậy, bạn có thể dễ dàng chuyển đến Menu > Tools > Inspect Devices và bắt đầu ngay phiên gỡ lỗi từ xa.
Cách này hoạt động hiệu quả trên tất cả các nền tảng, bao gồm cả Chrome OS. Tuy nhiên, xin lưu ý rằng trên Windows, trước tiên, bạn cần cài đặt trình điều khiển USB thích hợp để giao tiếp với thiết bị. Nếu chưa từng thử, bạn cũng cần bật tính năng gỡ lỗi qua USB trên thiết bị và xác nhận rằng bạn đang sử dụng Chrome Beta cho Android. Đọc toàn bộ tài liệu.
Chuyển tiếp cổng cho dự án cục bộ
Bạn đang phát triển trên localhost:8000 nhưng điện thoại của bạn không thể truy cập vào đó. Vì vậy, chúng tôi đã thêm tính năng chuyển tiếp cổng trực tiếp vào quy trình gỡ lỗi từ xa. Giờ đây, bạn có thể dễ dàng làm việc trên toàn bộ dự án mà không cần bất kỳ thủ thuật nào về đường hầm. Trên about:inspect, hãy nhấp vào Chuyển tiếp cổng để đặt những cổng bạn muốn sử dụng. Các cổng này sẽ sáng màu xanh lục nếu đã sẵn sàng.
Mô phỏng thiết bị di động
Không phải lúc nào bạn cũng có các thiết bị cần thiết để kiểm tra khả năng tương thích, phải không? Mặc dù việc gỡ lỗi từ xa trên thiết bị thực sẽ mang lại cho bạn cảm nhận tốt nhất về hiệu suất và cảm ứng, nhưng giờ đây, bạn có thể mô phỏng một cách chân thực nhiều đặc điểm của thiết bị trên máy tính, giúp tiết kiệm thời gian và làm vòng lặp lặp lại nhanh hơn nhiều.
Mô phỏng kích thước màn hình, devicePixelRatio và <meta viewport> bằng tính năng mô phỏng sự kiện chạm đầy đủ
Nếu bạn đã thấy tính năng Chỉ số thiết bị trước đây, thì tính năng hiện có là một bản nâng cấp lớn. Nhóm chúng tôi đã nỗ lực để trình mô phỏng thiết bị di động mới có thể hiển thị gần giống với những gì bạn thấy trên thiết bị thực. Ví dụ: trình duyệt WebKit duy trì một thuật toán tự động định cỡ văn bản phức tạp và trên thực tế, mỗi thiết bị có một "hệ số điều chỉnh" cụ thể cho việc tự động định cỡ văn bản thay đổi để giúp văn bản dễ đọc. Ở chế độ mô phỏng, bạn có thể xác nhận hành vi này đang được áp dụng và xem kết quả.
Tỷ lệ pixel của thiết bị
Cho đến nay, gần như không thể xem nội dung hiển thị trên thiết bị có độ phân giải cao DPI trên thiết bị có độ phân giải thấp DPI. Giờ đây, tính năng mô phỏng dPR trong DevTools sẽ điều chỉnh chế độ xem để cho phép bạn phóng to vào một tình huống DPI sâu. Ngoài ra, bạn có thể mong đợi window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), v.v. phản ánh chế độ cài đặt của bạn, cho phép bạn xem cách ứng dụng thích ứng, bao gồm cả việc tải các thành phần dành riêng cho dpi khác nhau.
Tính năng mô phỏng thiết bị không mở rộng đến các tính năng hoặc lỗi của trình duyệt. Vì vậy, trong khi mô phỏng iOS, WebGL vẫn sẽ hoạt động và bạn sẽ không gặp phải lỗi thu phóng theo hướng iOS 5. Để trải nghiệm sự biến thiên đó, hãy chuyển đến thiết bị.
Mô phỏng đúng cách <meta viewport> (và @viewport)
Trước đây, việc kiểm thử hành vi của width=device-width và minimum-scale:1.0 chỉ là một trò chơi dành cho thiết bị. Giờ đây, bạn có thể nhanh chóng thử nhiều khung nhìn và quan sát cách các khung nhìn đó được kết xuất.
Mô phỏng sự kiện chạm
Chế độ cài đặt mô phỏng màn hình cảm ứng sẽ đảm bảo rằng các lượt nhấp của bạn được diễn giải là touchstart, v.v. Ngoài ra, các sự kiện tổng hợp như thu phóng, cuộn và kéo sẽ hoạt động. Để chụm để phóng to, bạn chỉ cần shift+kéo hoặc shift+cuộn để phóng to nội dung. Bạn sẽ có được một chế độ xem tuyệt vời về việc điều chỉnh tỷ lệ nội dung ngoài khung nhìn.
Cuối cùng, các tính năng dự phòng của bạn về hành vi giả mạo tác nhân người dùng (cả ở tiêu đề yêu cầu và cấp window.navigator), vị trí địa lý và mô phỏng hướng cho phép bạn khám phá toàn bộ chức năng của thiết bị.
Giá trị đặt trước cho thiết bị
Các chế độ cài đặt trước mô phỏng cho phép bạn chọn một điện thoại hoặc máy tính bảng và nhận kích thước màn hình, dPR, UA áp dụng cho thiết bị đó, cùng với các sự kiện chạm đầy đủ và khung nhìn được mô phỏng. Bạn có thể thử các giá trị đặt trước cụ thể hoặc dễ dàng điều chỉnh từng đặc điểm này.
Truy cập vào devtools.chrome.com để xem tài liệu đầy đủ về tính năng Mô phỏng thiết bị di động bằng DevTools
Bản minh hoạ
Để xem bản minh hoạ đầy đủ về tất cả các tính năng này đang hoạt động, hãy xem bài nói chuyện dài 23 phút của tôi tại Chrome Dev Summit về DevTools dành cho thiết bị di động: