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