Chế độ thiết bị mới cho thế hệ ưu tiên thiết bị di động
Cách đây hơn một năm, chúng tôi đã giới thiệu Chế độ thiết bị, một cách để mô phỏng thiết bị và làm việc với các thiết kế thích ứng. Giờ đây, đã đến lúc nâng cấp lớn lần đầu tiên, bắt đầu từ Chrome 49. Vậy có gì mới?
Thiết bị di động đang trở thành điểm xuất phát trong Chrome DevTools. Mặc dù trước đây chúng tôi đã cung cấp các cách mô phỏng thiết bị di động, nhưng chế độ mặc định để phát triển là máy tính. Phải luôn bật tính năng mô phỏng thiết bị di động. Giờ đây, việc sử dụng trang web dành cho thiết bị di động đã vượt qua máy tính ở nhiều nơi, nên chúng tôi cũng sẽ chuyển đổi vị trí trong DevTools.
Có gì mới?
Trước tiên, giao diện người dùng được tinh giản và sử dụng ít không gian hơn. Chúng tôi dự kiến Chế độ thiết bị mới sẽ trở thành chế độ phát triển chính cho hầu hết mọi người, vì vậy, một thiết kế đơn giản và rõ ràng mở rộng thanh điều hướng DevTools chính là một yêu cầu.
Thước đo thiết bị chuyển nhanh mới trên các truy vấn nội dung nghe nhìn.
Ngoài ra, chúng tôi đã căn giữa khung nhìn và thêm một thước đo thiết bị chuyển nhanh mới ở trên cùng. Đây là một công cụ hữu ích khi thiết kế thích ứng, giúp bạn biết được các kích thước thiết bị phổ biến nhất.
Cuối cùng, nhiều tuỳ chọn đã được đóng gói hoặc ẩn sau một nút bật/tắt bất cứ khi nào có thể. Các tuỳ chọn tổng hợp mới này giúp bạn dễ dàng chuyển đổi giữa các chế độ hơn. Để bật/tắt một số chế độ điều khiển hoặc tuỳ chỉnh trải nghiệm của bạn trên thanh công cụ, hãy nhấn vào biểu tượng trình đơn nhỏ có ba dấu chấm.
Tương thích theo mặc định
Thanh công cụ DevTools chính hiện mở rộng sang bên trái của cửa sổ trình duyệt và bao gồm các công cụ quan trọng nhất để mô phỏng nhiều thiết bị di động và máy tính. Bạn có thể chọn một trong hai chế độ phát triển:
- Thích ứng
- Thiết bị cụ thể
Trong cả hai chế độ, khung nhìn nằm trong cửa sổ có thể đổi kích thước riêng trong Chrome. Điều này có lợi thế đáng kể là bạn có thể mở rộng cửa sổ trình duyệt và DevTools theo cách bạn muốn và không cần phải chuyển đổi giữa các cửa sổ khi kiểm thử nhiều kích thước trang và chuyển đổi qua lại.
Đáp ứng là chế độ bạn nên sử dụng trong quá trình lặp lại để đảm bảo trang web của bạn hoạt động trên mọi loại thiết bị, chứ không chỉ một vài thiết bị cụ thể. Ở chế độ này, bạn có thể thay đổi kích thước tuỳ ý các tay nắm bên cạnh khung nhìn.
Thiết bị cụ thể đề cập đến trường hợp bạn chọn một thiết bị cụ thể và khoá khung nhìn theo kích thước của thiết bị đó. Điều này sẽ hữu ích khi bạn muốn thực hiện các bản sửa lỗi và điều chỉnh cuối cùng cho một số thiết bị phổ biến sắp ra mắt. Đó là lý do chúng tôi không chỉ hiển thị một danh sách khổng lồ gồm tất cả các loại thiết bị trong trình đơn thả xuống, mà còn hiển thị những loại thiết bị phổ biến nhất hiện nay. Nếu bạn chọn một thiết bị, chúng tôi sẽ cố gắng hết sức để thiết bị đó hoạt động giống như thiết bị thực: Tất cả các sự kiện chạm, tác nhân người dùng, khung nhìn và giao diện người dùng của thiết bị (nếu có) đều được mô phỏng.
Tích hợp tính năng gỡ lỗi từ xa
Các trình mô phỏng, ngay cả những trình mô phỏng tốt nhất hiện có, cũng chỉ có thể giúp bạn làm được đến thế. Có một số việc mà tính năng mô phỏng không thể làm được ngày nay, chẳng hạn như:
- Kiểm tra xem nút có đủ lớn để bạn dùng ngón tay cái nhấn vào hay không.
- Kiểm tra hiệu suất của trang web trên một chiếc điện thoại có tốc độ chậm hơn.
- Gỡ lỗi các vấn đề ngẫu nhiên và hạn chế của một số thiết bị.
Để kiểm thử đầy đủ tất cả các trường hợp này, bạn cần kiểm thử, làm việc và gỡ lỗi bằng các thiết bị thực tế.
Hiện tại, bạn có thể duyệt đến chrome://inspect, kết nối thiết bị qua USB và mở một phiên gỡ lỗi từ xa thông qua DevTools. Nhưng giờ đây, chúng tôi đã tiến thêm một bước và tái cấu trúc giao diện và hoạt động của tính năng gỡ lỗi từ xa, nhúng tính năng này vào phần cốt lõi của DevTools. Thay vì chuyển đến một trang khác, giờ đây, bạn có thể truy cập vào Kiểm tra thiết bị dưới dạng hộp thoại ngay trong trình đơn chính mới. Điều này giúp bạn dễ dàng đưa tính năng gỡ lỗi thực tế vào quy trình làm việc của mình – chỉ cần cắm điện thoại vào, không cần thoát khỏi DevTools!
Nơi mới cho các chế độ điều khiển mô phỏng còn lại
Vì thiết bị di động hiện là chế độ mặc định trên DevTools, nên các tính năng như điều tiết mạng đã chuyển sang vị trí thích hợp, trong trường hợp này là Bảng điều khiển mạng.
Một số tính năng, chẳng hạn như mô phỏng cảm biến hoặc chế độ cài đặt kết xuất như mô phỏng phương tiện in đã được chuyển sang một vị trí nhất quán trong Ngăn. Bạn có thể tìm thấy tất cả các tính năng bổ sung trong trình đơn chính mới trong phần "Công cụ khác".
Chúng tôi hiểu rằng đây là một thay đổi quan trọng và chúng ta sẽ cần thời gian để làm quen. Bạn sẽ tìm thấy thông tin đầy đủ về mọi nội dung trong đó trong tài liệu mới cập nhật về Chế độ thiết bị. Chúng tôi rất mong nhận được ý kiến của bạn trên Twitter hoặc nếu bạn cần nhiều hơn 140 ký tự, hãy gửi ý kiến trên công cụ theo dõi lỗi của chúng tôi (vâng, ngay cả đối với các yêu cầu về tính năng).