Khi ngày càng có nhiều người bắt đầu lướt trên thiết bị di động của họ, nó đang trở nên thích hợp với chúng tôi - quản trị viên web - để đảm bảo rằng các trang web của chúng tôi hiển thị tốt trong trình duyệt trên điện thoại di động. Thiết kế web đáp ứng có lẽ là cách để đi, nhưng vẫn đòi hỏi rất nhiều thử nghiệm để đảm bảo nó phù hợp độc đáo trong tất cả các thiết bị và kích thước màn hình. Nó gần như không thể có được tất cả các thiết bị di động trên thế giới, nhưng với một công cụ tiện lợi trong công cụ dành cho nhà phát triển của Google Chrome, bạn có thể dễ dàng kiểm tra trang web của mình trong một danh sách lớn các thiết bị di động (mà không tốn một xu nào).

Trình mô phỏng “Chế độ thiết bị” trong Công cụ dành cho nhà phát triển của Chrome là một công cụ hữu ích để bạn kiểm tra trang web của mình trên nhiều thiết bị di động. Như tên gọi của nó, nó mô phỏng trình duyệt trong các thiết bị khác nhau để bạn có thể xem cách trang web của bạn hiển thị trong mỗi trình duyệt.

Để bắt đầu, hãy mở Chrome và tải trang web bạn muốn thử nghiệm. Nhấn F12 (“Cmd + Opt + I” cho Mac OS X) để mở Công cụ nhà phát triển. Ngoài ra, bạn có thể nhấp chuột phải và chọn "Kiểm tra phần tử".

Trong cửa sổ Công cụ nhà phát triển, nhấp vào biểu tượng di động ở góc trên cùng bên trái.

Chuyển trở lại cửa sổ Chrome chính và bạn sẽ thấy trang web được thay đổi thành chế độ lưới.

Bây giờ, tất cả những gì bạn phải làm là chọn thiết bị di động trong danh sách thả xuống “Thiết bị”. Trang web sẽ tự động thay đổi kích thước cho phù hợp với kích thước màn hình của thiết bị.

Di chuyển qua danh sách thiết bị, bạn có thể tìm thấy một số thiết bị phổ biến như iPhone 3GS, 4, 5, 6, 6 Plus, Samsung Galaxy Note, v.v.

Những thứ khác mà bạn có thể kiểm tra ở chế độ thiết bị bao gồm thay đổi độ phân giải màn hình, thiết lập tỷ lệ pixel, thay đổi tác nhân người dùng của trình duyệt, v.v.

Để thoát khỏi "chế độ thiết bị", chỉ cần quay lại cửa sổ Công cụ dành cho nhà phát triển và nhấp lại vào biểu tượng di động hoặc chỉ cần đóng cửa sổ Công cụ dành cho nhà phát triển.

Phần kết luận

Công cụ nhà phát triển trong Google Chrome là một công cụ rất mạnh mẽ và hữu ích dành cho quản trị viên web và nhà phát triển để kiểm tra và gỡ lỗi trang web của họ. Cũng có một công cụ tương tự trong Firefox (trên thực tế, hầu hết các trình duyệt đều có chế độ công cụ dành cho nhà phát triển), nhưng trình duyệt trong Chrome có nhiều tính năng hơn và dễ sử dụng hơn.