Monday, January 25, 2021

Truyền Thiết bị Android sang Google Chrome để kiểm tra phần tử và gỡ lỗi trang web

Có những lúc chúng ta cần gỡ lỗi các trang web hiển thị trên thiết bị di động. Và chắc chắn, chúng ta có thể sử dụng công cụ dành cho nhà phát triển web thiết kế web đáp ứng trên các trình duyệt như Firefox và Google chrome. Nhưng đôi khi, chúng tôi có thể cần gỡ lỗi cụ thể hơn cho các thiết bị di động. Trong trường hợp đó, tôi đã bắt đầu thích gỡ lỗi từ xa của Google Chrome. Trong bài đăng này, chúng ta sẽ xem cách Gỡ lỗi từ xa cho thiết bị Android.

Gỡ lỗi từ xa sẽ cho phép chúng tôi kiểm tra một trang chạy trên thiết bị Android từ máy phát triển của bạn. 

Sử dụng Google Chrome, chúng tôi có thể kết nối thiết bị Android của mình qua USB để gỡ lỗi các sự cố trang web từ máy của nhà phát triển. Điều này có thể thực hiện được thông qua Trình gỡ lỗi thiết bị từ xa DevTools của Google Chrome và với nó, chúng tôi có thể:

  • Thiết lập thiết bị Android khám phá nó từ máy phát triển.
  • Kiểm tra và gỡ lỗi nội dung trực tiếp trên thiết bị Android từ máy phát triển.
  • Màn hình truyền nội dung từ thiết bị Android sang phiên bản DevTools trên máy phát triển.

Nếu bạn chỉ đang tìm kiếm diễn viên trên màn ảnh, điều này cũng sẽ hiệu quả.

Vì vậy, làm thế nào để truyền Thiết bị Android sang Google Chrome nhằm mục đích kiểm tra phần tử và trang web gỡ lỗi:

Vì vậy, làm thế nào để truyền Thiết bị Android sang Google Chrome nhằm mục đích kiểm tra phần tử và trang web gỡ lỗi:

Bước 1 : Thiết lập gỡ lỗi USB trên thiết bị Android

  • Trên thiết bị Android của bạn, trước tiên hãy bật Tùy chọn nhà phát triển nếu chưa thực hiện. 
  • Bật gỡ lỗi USB từ Cài đặt điện thoại Android > Tùy chọn nhà phát triển> Bật gỡ lỗi USB . 
  • Tùy chọn nhà phát triển bị ẩn theo mặc định trên Android 4.2 trở lên. Nếu Tùy chọn nhà phát triển không hiển thị trong Cài đặt điện thoại Android , hãy làm như sau

Bật Tùy chọn nhà phát triển trên thiết bị Android

  • Trên Android 4.2 trở lên, bạn phải bật màn hình này như sau:
  •     Mở Cài đặt điện thoại Android . (Trên Android 8.0 trở lên) Chọn Hệ thống .
  •     Cuộn xuống dưới cùng và nhấn vào Giới thiệu về điện thoại.
  •     Cuộn xuống dưới cùng và nhấn vào Số bản dựng 7 lần. (Phiên bản MIUI trong trường hợp điện thoại Mi)
  •     Quay lại màn hình trước và tìm tùy chọn Nhà phát triển ở gần cuối
  •     Bật từ Tùy chọn nhà phát triển> Bật gỡ lỗi USB .

Bước 2: Gỡ lỗi nội dung trên thiết bị Android của bạn từ máy phát triển của bạn

  • Trên máy phát triển / máy tính, hãy mở Google Chrome. Đăng nhập vào Chrome bằng một trong các tài khoản Google của bạn .
  • Nhấn CTRL + SHIFT + I hoặc Google Chrome> Công cụ khác> Công cụ dành cho nhà phát triển
  • Trong Công cụ dành cho nhà phát triển mới, nhấp vào MENU > Công cụ khác> Thiết bị từ xa
  • Trong ngăn dưới cùng, đảm bảo rằng Khám phá thiết bị USB được bật trong tab CÀI ĐẶT .
  • Kết nối thiết bị Android trực tiếp với máy phát triển bằng cáp USB .
  • Chấp nhận lời nhắc Cho phép gỡ lỗi USB trên thiết bị Android của bạn.

Nhấp đúp vào Thiết bị Android của bạn được hiển thị trên ngăn dưới cùng bên trái. Một tab mới được mở cho thiết bị đó.

Mở Google Chrome trên thiết bị Android và nhập địa chỉ trang web để kiểm tra hoặc gỡ lỗi

Trên máy phát triển, liên kết sẽ được hiển thị. Nếu có nhiều tab mở trên thiết bị Android Google Chrome, thì sẽ có nhiều liên kết hơn.

Nhấp vào nút INSPECT tương ứng với một liên kết cụ thể để kiểm tra.

Màn hình của thiết bị Android được hiển thị như hình dưới đây.

Sau đó, bạn có thể khám phá các phần tử HTML trên thanh bên phải và cũng có thể xem các kiểu.

Bạn có thể chỉnh sửa các kiểu sau đó và ở đó và xem các thay đổi trực tiếp giống như chúng ta thường làm trên máy tính để bàn.

Yêu cầu:

  •     Google Chrome 32 trở lên được cài đặt trên máy phát triển.
  •    Trình điều khiển USB được cài đặt trên máy phát triển, nếu bạn đang sử dụng Windows .
  •     Một USB cáp để kết nối thiết bị Android với máy tính phát triển của bạn.
  •     Android 4.0 trở lên.
  •     Ứng dụng Google Chrome được cài đặt trên thiết bị Android của bạn.

No comments:

Post a Comment