Cách gỡ lỗi từ xa ứng dụng web trên Android

Ngày nay web đang được duyệt trên điện thoại di động nhiều hơn trên máy tính để bàn. Vì các thiết bị đã thực sự di động và kích thước màn hình nhỏ hơn. Vì vậy, nếu bạn đang phát triển một ứng dụng web, bạn không thể tránh được hỗ trợ cho điện thoại di động (Android hoặc iOS). Các trang web bị hỏng hoặc trông tồi tệ trên màn hình di động thực sự có thể gây tổn hại đến danh tiếng trực tuyến của bạn. Trải nghiệm người dùng trên điện thoại hoàn toàn khác với máy tính để bàn. Vì vậy, các nhà phát triển phải đặc biệt thiết kế các ứng dụng để thích ứng với màn hình di động.

Google Chrome Dev, cung cấp các công cụ cho phép bạn kiểm tra, gỡ lỗi, phân tích trải nghiệm trên thiết bị và bạn có thể sử dụng công cụ Chrome Dev trên máy cục bộ để gỡ lỗi ứng dụng của mình trên thiết bị di động. Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách thiết lập máy phát triển cục bộ của bạn để gỡ lỗi từ xa trên Android. Chúng tôi sẽ gỡ lỗi qua kết nối USB giữa thiết bị di động và máy phát triển cục bộ của bạn.

Bạn sẽ yêu cầu những điều sau, để tiếp tục với gỡ lỗi từ xa:

1. Điện thoại di động hoặc máy tính bảng Android đã cài đặt Chrome dành cho Android 28 (bạn có thể cài đặt nó từ ở đây).
2. Cáp USB để kết nối thiết bị Android của bạn với máy phát triển cục bộ, đồng thời đảm bảo bạn đã cài đặt các ổ đĩa cần thiết để kết nối điện thoại di động Android với máy tính.
3. Kiểm tra Danh sách trình điều khiển USB OEM và tìm ra các trình điều khiển phù hợp cho bạn.
4. Đã cài đặt Chrome 28+ trên máy phát triển cục bộ của bạn.
5. Đảm bảo rằng bạn đã cài đặt tiện ích mở rộng ADB Chrome trên máy phát triển cục bộ của mình. Bạn có thể cài đặt nó từ ở đây.

Trong hướng dẫn này, chúng tôi sẽ sử dụng Sony Xperia L (thiết bị Android) và Windows 7 trên máy phát triển cục bộ của chúng tôi. Vì vậy, hãy bắt đầu với gỡ lỗi từ xa:

1. Trước tiên, hãy đảm bảo rằng bạn đã bật chế độ Gỡ lỗi trên thiết bị Android của mình

Nếu bạn chưa kích hoạt, vui lòng tham khảo phần này:

• Đối với người dùng trên Android 4.2, hãy tham khảo: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
• Còn lại các bạn có thể tham khảo: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

Để biết thêm thông tin về cách thiết lập thiết bị Android để phát triển, vui lòng tham khảo: http://developer.android.com/tools/device.html#setting-up.

2. Kết nối thiết bị Android của bạn

Bây giờ kết nối thiết bị Android của bạn với máy phát triển cục bộ của bạn bằng cáp USB. Sau khi bạn kết nối thiết bị Android của mình, bạn cần bật gỡ lỗi web USB trên điện thoại của mình, bằng cách khởi chạy Chrome trên Android sau đó, -> Cài đặt -> Công cụ dành cho nhà phát triển -> Chọn Bật gỡ lỗi web USB

Khi chọn tùy chọn này nếu nó yêu cầu bạn xác nhận kết nối của bạn với máy phát triển, hãy chọn OK.

3. Gỡ lỗi

Sau khi cài đặt tiện ích mở rộng ADB, bạn sẽ thấy biểu tượng Android màu xám bên cạnh menu Chrome. Bây giờ hãy nhấp vào biểu tượng Android và chọn -> Khởi động ADB. Bây giờ nó sẽ chuyển sang màu xanh lục và sẽ hiển thị số lượng thiết bị được kết nối hiện tại. Sau đó nhấp vào biểu tượng và chọn -> Xem Mục tiêu Kiểm tra. Thao tác này sẽ mở một tab mới và sẽ hiển thị số lượng thiết bị Android được kết nối và các tab hiện đang mở trên chúng.

Bây giờ chọn tab từ danh sách mà bạn muốn gỡ lỗi. Thao tác này sẽ mở ra một Cửa sổ mới với Công cụ dành cho nhà phát triển.

Bây giờ, hãy kiểm tra một số phần tử từ trang và phần tử đó sẽ được đánh dấu trong thiết bị di động Chrome theo thời gian thực.

Bằng cách này, bạn có thể sửa các lỗi cụ thể của thiết bị bằng cách gỡ lỗi từ các công cụ Dev. Bạn có thể thực thi các lệnh từ các công cụ Dev sẽ được thực thi trong thiết bị di động Chrome. Đồng thời xem các bảng khác nhau như Mạng, Tài nguyên, Dòng thời gian, Hồ sơ, Kiểm toán.

Giờ đây, bạn có thể sửa các lỗi cụ thể dành cho thiết bị di động và gỡ lỗi ứng dụng dành cho thiết bị di động theo thời gian thực thay vì triển khai ứng dụng của bạn trên máy chủ, sau đó truy cập ứng dụng đó từ điện thoại của bạn và gỡ lỗi. Google Chrome Dev cung cấp các công cụ này để giải quyết một vấn đề thực sự, dành cho các nhà phát triển đang xây dựng các ứng dụng tương thích với thiết bị.