Kiểm tra giao diện Responsive của Website với DevTool của Chrome browser


Các bước sau đây sẽ giúp bạn xem 1 trang web trên Chrome Browser cho máy tính nhưng ở chế độ hiển thị cho thiết bị di động

 Làm thế nào để kiểm tra tính Responsive của 1 trang web mà không cần phải dùng đến 1 thiết bị di động thật sự?
Thật may là Chrome (và cả FireFox hay Microsoft Edge) có hỗ trợ chúng ta làm điều này.
Chúng ta chỉ cần thực hiện theo các bước sau:

  1. Bật trình duyệt Chrome, xem trang web mà bạn muốn kiểm tra
  2. Bật Developer Tools của Chrome bằng 1 trong số các cách sau:
    1. Ấn phím F12
    2. Ctrl + Shift + I 
    3. Menu > More Tools > Developer Tools
  3. Bật thanh công cụ thiết bị (Toggle Device Toolbar) - phím tắt Ctrl + Shift + M như trong hìnhnút bật thanh công cụ thiết bị
    Trình duyệt sẽ chuyển sang chế độ xem với 1 thanh chọn công cụ ở phía trên
  4. Tại thanh công cụ thiết bị (Device Toolbar), ta có thể chọn để giả lập 1 loại thiết bị theo tên (VD: Pixel 2)
    hoặc chọn chế độ thay đổi kích thước tự do (responsive) rồi thay đổi chiều rộng (width), chiều cao (height)
    hay sử dụng thanh breakpoints bên dưới các ô kích thước dể xem trang web thể hiện như thế nào trên những màn hình có kích cỡ tương ứng.

Với cách làm trên, ta có thể nhanh chóng biết được trang web của chúng ta có tương thích với kích cỡ màn hình của thiết bị đích đang được giả lập hay không.
Điểm thuận lợi cho chúng ta hiện nay (2021.09) là các trình duyệt khác như FireFox hay Edge đều hỗ trợ tính năng này.

PS: ngoài cách làm trên, nếu bạn có 1 thiết bị Android, Chrome có chế độ Remote Debugging để ta chuyển xem trang web trên máy tính như trên chính thiết bị Android được kết nối (có từ khóa rồi, các bạn tìm hiểu thêm nhé)


( đã được xem 1133 lần từ 23/09/2021 )

Phản hồi bài viết

   
Họ tên  
Email*
Mã xác thực email
Tiêu đề*
Nội dung*
Đính kèm 
 
 
Trang 1
Tôi là Lê Hữu Dũng
Giảng viên CNTT
Khoa Công nghệ Tin học
Viện Đại học Mở Hà Nội