Remote Debugging Android Devices - Công cụ tuyệt vời cho Frontend Developer



Trần Minh Trí / 04-07-2018

Đối với các dự án có sử dụng JavaScript, việc debug khi test trên trình duyệt  của di động là không khả thi. Để khắc phục tình trạng này, Chrome đã bổ sung một chức năng mới trên Chrome Devtools đó là Remote-debug Android Devices.

Sau đây là cách cài đặt và sử dụng Remote-debug Android Devices để phục vụ cho quá trình phát triển website.

Bước 1: Bật chế độ Development trên thiết bị Android.

  • Vào Setting → Tùy chọn nhà phát triển.
     
  • Bật chế độ tùy chọn nhà phát triển và gỡ lỗi USB.

Bước 2: Cài đặt OEM USB drivers cho PC


Bước 3:

  • Hủy kết nối rồi kết nối lại thiết bị android với PC một lần nữa.
  • Mở DevTools của chrome -> Main Menu -> More tools -> Remote devices.
  • Nếu trình duyệt nhận thiết bị thì ở tab Devices sẽ có tên thiết bị và trạng thái “Connected”.

    Lưu ý cần mở khóa thiết bị nếu có thiết lập và mở sẵn trình duyệt chrome trên thiết bị Android.
  • Mở tab Settings -> mở chế độ “Discover USB devices”.
  • Tại DevTools -> click vào tên thiết bị -> ở mục “New tab”: nhập link của website cần test vào -> nhấn open.

    Lúc này trên thiết bị android đã tự động mở trang mà ta vừa nhập link.
  • Phần quan trọng nhất đó là nút “Inspect”, sau khi ta nhấn nút này sẽ có một bảng remote giúp ta điều khiển trình duyệt của thiết bị android ngay trên PC. Tại bảng remote này ta có thể xem “Console”, “Elements” như trên trình duyệt của PC.

    Chúc các bạn cài đặt thành công.

to-top