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

  • Tìm file cài OEM drivers tương thích với thiết bị android của bạn. Danh sách link của một số dòng máy:

 

Acer http://www.acer.com/worldwide/support/
alcatel one touch http://www.alcatelonetouch.com/global-en/support/
Asus http://support.asus.com/download/
Blackberry https://swdownloads.blackberry.com/Downloads/entry.do?code=4EE0932F46276313B51570F46266A608
Dell http://support.dell.com/support/downloads/index.aspx?c=us&cs=19&l=en&s=dhs&~ck=anavml
Fujitsu http://www.fmworld.net/product/phone/sp/android/develop/
HTC http://www.htc.com/support
Huawei http://consumer.huawei.com/en/support/index.htm
Intel http://www.intel.com/software/android
Kyocera http://www.kyocera-wireless.com/support/phone_drivers.htm
Lenovo http://support.lenovo.com/us/en/GlobalProductSelector
LGE http://www.lg.com/us/support/software-firmware
Motorola https://motorola-global-portal.custhelp.com/app/answers/detail/a_id/88481/
MTK http://online.mediatek.com/Public%20Documents/MTK_Android_USB_Driver.zip (ZIP download)
Samsung http://developer.samsung.com/galaxy/others/android-usb-driver-for-windows
Sharp http://k-tai.sharp.co.jp/support/
Sony Mobile Communications http://developer.sonymobile.com/downloads/drivers/
Toshiba http://support.toshiba.com/sscontent?docId=4001814
Xiaomi http://www.xiaomi.com/c/driver/index.html
ZTE http://support.zte.com.cn/support/news/NewsDetail.aspx?newsId=1000442

 

  • Kết nối thiết bị Android với PC.
  • Click phải trên biểu tượng Computer chọn Manage -> Device Manager.
  • Xác định tên thiết bị của bạn phía bên phải -> chọn Android Composite ADB Interface -> Update Driver -> browse my computer for driver software -> link tới nơi chứa OEM USB drivers đã tải ở trên.

 


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