Cách xem trước trang web của bạn trên các thiết bị khác nhau bằng Google Chrome

Với thiết kế đáp ứng, bạn có thể xây dựng một trang web trông đẹp mắt trên điện thoại cũng như trên máy tính để bàn. Nhưng làm thế nào để bạn kiểm tra thiết kế của mình trên các thiết bị?

Khi bạn tạo một trang web, bạn muốn nó phải đáp ứng và thích ứng với các kích thước màn hình khác nhau. Một cách để kiểm tra điều này là sử dụng các công cụ dành cho nhà phát triển được tích hợp sẵn của Google Chrome.

Công cụ dành cho nhà phát triển của Chrome cho phép bạn gỡ lỗi các khía cạnh khác nhau trên trang web của mình. Điều này bao gồm việc thay đổi và xem trước mã nguồn HTML và CSS. Nó cũng cho phép bạn gỡ lỗi mã JavaScript phía máy khách và xem lưu lượng mạng.

DevTools cũng có một tùy chọn để xem trước trang web của bạn trên các thiết bị khác nhau. Điều này bao gồm các loại thiết bị di động khác nhau, iPad, máy tính bảng, v.v.

Để mở thanh công cụ Thiết bị trên Google Chrome, bạn cần mở cửa sổ Công cụ nhà phát triển Chrome:

1. Mở một trang web.
2. Nhấp chuột phải vào trang và nhấp vào Quan sát.

3. Cửa sổ Chrome DevTools sẽ mở ra. Nó có thể mở sang một bên hoặc cuối trình duyệt của bạn hoặc dưới dạng một cửa sổ mới.

4. Ở trên cùng bên trái của cửa sổ, có hai biểu tượng. Nhấp vào biểu tượng hiển thị nhiều thiết bị có kích thước khác nhau.

5. Màn hình sẽ thay đổi để cho bạn biết trang web sẽ trông như thế nào trên thiết bị di động.

Cách chuyển đổi giữa các thiết bị khác nhau

Sử dụng menu thả xuống ở đầu thanh công cụ thiết bị để chuyển đổi giữa các thiết bị khác nhau.

1. Trên cùng của thanh công cụ sẽ hiển thị loại thiết bị bạn hiện đang xem trang web của mình. Nhấp vào menu thả xuống để chọn một thiết bị khác từ danh sách.

2. Thay vì chọn một thiết bị hiện có, bạn có thể chọn xem trang web ở chế độ đáp ứng. Nhấp vào menu thả xuống và chọn Phản ứng nhanh nhẹn quyền mua.
3. Bên cạnh menu thả xuống, bạn cũng có thể chọn nhập chiều rộng và chiều cao tùy chỉnh của thiết bị.

4. Thay vì nhập theo chiều rộng và chiều cao, bạn cũng có thể nhấp và kéo các góc của cửa sổ để điều chỉnh kích thước.

Cách thêm thiết bị tùy chỉnh

Nếu bạn muốn lưu chiều rộng và chiều cao tùy chỉnh, bạn có thể thêm thiết bị tùy chỉnh. Sau đó, thanh công cụ thiết bị sẽ hiển thị thiết bị mới của bạn trong menu thả xuống dành cho thiết bị.

1. Nhấp vào menu thả xuống liệt kê tất cả các thiết bị.
2. Bấm vào Chỉnh sửa.
3. Trong thanh bên Cài đặt, hãy đảm bảo rằng bạn có Thiết bị tab đã chọn. Tại đây, bạn cũng có thể xem danh sách các thiết bị khác mà bạn có thể lựa chọn.
4. Bấm vào Thêm thiết bị tùy chỉnh.
5. Nhập tên, chiều rộng và chiều cao cho thiết bị. Đảm bảo rằng bạn cũng chọn loại thiết bị, chẳng hạn như thiết bị di động hay máy tính để bàn. Nếu bạn mở rộng Gợi ý về ứng dụng khách tác nhân người dùng tùy chọn, bạn có thể thêm các chi tiết khác như kiểu thiết bị, thương hiệu hoặc phiên bản.

6. Bấm vào cộng.
7. Quay lại menu thả xuống liệt kê tất cả các thiết bị. Bạn sẽ thấy thiết bị tùy chỉnh mới của mình trên danh sách.

8. Bạn có thể chỉnh sửa lại các chi tiết này sau bằng cách quay lại trang thiết bị tùy chỉnh. Bấm vào chỉnh sửa bên cạnh tên thiết bị của bạn để bắt đầu chỉnh sửa.

Nó rất hữu ích để có thể xem trước trang web của bạn trên các thiết bị và kích thước màn hình khác nhau, vì một số lý do.

Trước tiên, bạn có thể kiểm tra hiệu suất của trang web của mình trên các thiết bị khác nhau. Một số điện thoại di động có thể có tốc độ mạng hoặc CPU điều tiết nhanh hơn những điện thoại khác.

Thanh công cụ của thiết bị cho phép bạn chuyển đổi giữa các tùy chọn tốc độ mạng khác nhau. Điều này cho phép bạn kiểm tra tốc độ của bất kỳ cuộc gọi nào đến máy chủ hoặc kiểm tra việc tải và hiển thị dữ liệu trên trang web của bạn.

Ngoài ra, bạn cũng có thể xem thiết kế trông như thế nào trên một thiết bị cụ thể, từ quan điểm giao diện người dùng. Nếu bạn đang sử dụng các truy vấn phương tiện CSS, bạn có thể sử dụng công cụ này để kiểm tra xem chúng có hoạt động như bạn mong đợi hay không.

Bạn có thể sử dụng cửa sổ DevTools của Google Chrome để kiểm tra cách trang web của bạn thích ứng với các kích thước màn hình khác nhau và để đảm bảo trang web của bạn đáp ứng. Bạn cũng có thể sử dụng nó để kiểm tra hiệu suất của trang web và xem các truy vấn phương tiện của bạn có hoạt động như mong đợi hay không.

Bạn cũng có thể sử dụng Công cụ dành cho nhà phát triển của Google Chrome cho các mục đích khác. Bạn có thể sử dụng nó để gỡ lỗi bất kỳ sự cố CSS nào bằng cách thay đổi CSS trong tab Kiểu của cửa sổ Phần tử. Điều này cho phép bạn xem bất kỳ thay đổi CSS nào ngay lập tức, điều này có thể tăng tốc quy trình viết mã của bạn.

Đọc tiếp