Việc phát triển cho thiết bị di động cũng cần dễ dàng như quá trình phát triển cho máy tính. Chúng tôi đã và đang nỗ lực trong Công cụ của Chrome cho nhà phát triển để giúp mọi thứ trở nên dễ dàng hơn cho bạn và đã đến lúc tiết lộ 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. Trước tiên là gỡ lỗi từ xa, sau đó chúng ta sẽ giới thiệu quy trình mô phỏng đúng thiết bị di động.
Chuyển màn hình thiết bị của bạn lên máy tính
Cho đến nay, trong lúc gỡ lỗi từ xa, bạn phải chuyển đổi qua lại giữa thiết bị và công cụ cho nhà phát triển. Giờ đây, Ghi màn hình hiển thị màn hình của thiết bị ngay bên cạnh các công cụ cho nhà phát triển. Nhìn thấy sản phẩm thì tốt, nhưng tương tác với sản phẩm 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ỏ máy tính
- Nhập trên bàn phím máy tính--tất cả các thao tác nhấn phím đều được gửi đến thiết bị. Tiết kiệm thời gian rất nhiều so với việc 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ỉ 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ề ghi màn hình ghi lại 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. Cần có 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, nhưng nếu dùng thử sau đó, bạn phải tải bản tải xuống SDK Android 400 MB, thêm tệp nhị phân adb vào $PATH và một số câu lệnh thần kỳ.
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à trò chuyện với các thiết bị kết nối USB 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 phiên gỡ lỗi từ xa ngay lập tức.
Tính năng này hoạt động tốt 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 dùng thử tính năng nà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 tài liệu đầy đủ..
Chuyển tiếp cổng cho các 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ì 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 thao tác trên toàn bộ các dự án của mình mà không cần phải sử dụng phương pháp tạo đườ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 và các cổng 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ó 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 các 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à thao tác chạm, nhưng giờ đây, bạn có thể mô phỏng nhiều đặc điểm của thiết bị trên máy tính như trên thực tế, giúp tiết kiệm thời gian và đẩy nhanh vòng lặp.
Mô phỏng kích thước màn hình, devicePixelRatio và <meta viewport> với hoạt động mô phỏng sự kiện chạm toàn bộ
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 đã nỗ lực để giúp phiên bản mô phỏng mới cho thiết bị di động có thể thể hiện gần như những gì bạn nhìn thấy trên thiết bị thực. Ví dụ: trình duyệt WebKit duy trì 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ể cho việc tự động định cỡ văn bản. Thuật toán này sẽ thay đổi để giúp văn bản dễ đọc. Trong 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ị của thiết bị có DPI cao 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 chế độ xem của bạn để cho phép bạn phóng to dữ liệu 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 thích ứng, bao gồm cả việc tải nhiều thành phần dành riêng cho mỗi dpi.
Việc mô phỏng thiết bị không bao gồm mọi 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 hướng của iOS 5. Để trải nghiệm sự thay đổi đó, hãy sử dụng thiết bị.
Mô phỏng đúng cách <meta viewport> (và @viewport)
Việc kiểm thử hành vi của width=device-width và minimum-scale:1.0 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 đó 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 sẽ hoạt động. Để thu phóng, bạn chỉ cần shift+kéo hoặc shift+cuộn để phóng to nội dung. Bạn sẽ có được cái nhìn tuyệt vời về việc chia tỷ lệ nội dung vượt ra khỏi khung nhìn.
Cuối cùng, các chế độ chờ 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 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à nhận được đúng 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 toàn bộ 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 có thể điều chỉnh từng đặc điểm một.
Truy cập vào 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ạ
Để có bản minh hoạ đầy đủ về tất cả các tính năng này trong thực tế, 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 về Công cụ cho thiết bị di động: