Chuyển sang chế độ xem di động

Xem trước chế độ xem trên thiết bị di động chỉ bằng một cú nhấp chuột cho bất kỳ trang nào.

Khán giả web hiện đại không ngồi yên. Họ chuyển từ màn hình 27 inch tại nơi làm việc sang màn hình bỏ túi trên tàu và họ mong đợi mọi trang web đều được thiết kế riêng cho cả hai. Đối với các nhà thiết kế, nhà phát triển, nhà tiếp thị và thậm chí là người dùng thành thạo hàng ngày, điều đó đặt ra một câu hỏi hàng ngày: "Trang này sẽ trông như thế nào trên điện thoại thực?" DevTools của Chrome có thể trả lời câu hỏi đó—sau khi bạn tìm hiểu kỹ các menu, bảng điều khiển và một loạt các khung thiết bị. Chuyển sang Chế độ xem dành cho thiết bị di động sẽ thu hẹp hành trình đó thành một cú nhấp chuột hoặc phím tắt duy nhất, Chạm vào biểu tượng thanh công cụ (hoặc nhấn Alt + M) và trang hiện tại sẽ ngay lập tức bị giới hạn trong chế độ xem có kích thước bằng điện thoại. Một phông nền màu xám nhạt tách biệt trang khỏi phần còn lại của cửa sổ trình duyệt, biến nội dung của bạn thành ngôi sao trong khi nhắc nhở bạn trực quan rằng Chế độ xem dành cho thiết bị di động đang hoạt động. Một huy hiệu nhỏ lơ lửng ở góc hiển thị cài đặt trước của thiết bị hiện tại—bắt đầu với iPhone 14, Tiện ích mở rộng này đi kèm với ba điểm ngắt được yêu cầu phổ biến nhất—iPhone 14 (390 × 844 px), Pixel 7 (412 × 915 px) và iPad mini (768 × 1024 px). Mỗi cài đặt trước điều chỉnh thẻ meta viewport, độ rộng phần tử và hành vi cuộn để mô phỏng cảm giác của thiết bị đã chọn. Ai được lợi? Các nhà phát triển front-end có thể phát hiện lỗi bố cục trong vài giây mà không cần mở DevTools—thích hợp khi xử lý nhiều nhánh hoặc máy chủ dàn dựng. Các nhà thiết kế UI/UX sẽ có thể kiểm tra nhanh trước khi chuyển các thành phần Figma mới cho bộ phận kỹ thuật. Các nhóm đảm bảo chất lượng có thể viết các phím tắt vào bộ kiểm tra tự động để kiểm tra phản hồi nhanh hơn. Người sáng tạo nội dung và nhà tiếp thị xem trước bản tin, trang đích và nội dung nhúng trên mạng xã hội để đảm bảo khả năng đọc trên màn hình nhỏ. Nhân viên hỗ trợ khách hàng tái hiện các sự cố do người dùng thiết bị di động báo cáo không còn cần đến thiết bị vật lý hoặc trình mô phỏng nữa. Các nhà giáo dục và sinh viên khám phá các khái niệm thiết kế phản hồi sẽ có được môi trường dễ tiếp cận và an toàn. Cho dù bạn đang tinh chỉnh quy trình thanh toán vài phút trước khi ra mắt hay đang giảng dạy cho một lớp học toàn các nhà phát triển đầy tham vọng, tiện ích mở rộng này sẽ phù hợp với quy trình làm việc của bạn mà hầu như không cần phải học hỏi gì.