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