Làm cách nào để gỡ lỗi javascript trên Android?

Tôi đang làm việc trong một dự án liên quan đến Raphaeljs. Hóa ra, nó không hoạt động trên Android. Nó hiện trên iPhone.

Làm thế quái nào để tôi gỡ lỗi một cái gì đó trên trình duyệt Android? Đó là WebKit, vì vậy nếu tôi biết phiên bản, việc gỡ lỗi trên phiên bản WebKit đầy đủ đó có mang lại kết quả tương tự không?

Cập nhật: Gỡ lỗi từ xa

Trước đây, ghi nhật ký bảng điều khiển là tùy chọn tốt nhất để gỡ lỗi JavaScript trên Android. Ngày nay, với gỡ lỗi từ xa Chrome cho Android, chúng tôi có thể sử dụng tất cả các ưu điểm của Công cụ dành cho nhà phát triển Chrome dành cho máy tính để bàn trên Android. Hãy xem https://developers.google.com/chrome-developer-tools/docs/remote-debugging để biết thêm thông tin.

Cập nhật: Bảng điều khiển JavaScript

Bạn cũng có thể điều hướng đến about: gỡ lỗi trong thanh URL để kích hoạt menu gỡ lỗi và bảng điều khiển lỗi JavaScript với các thiết bị Android gần đây. Bạn sẽ thấy SHOW JAVASCRIPT TIÊU THỤ ở đầu Trình duyệt.

Hiện tại trong Android 4.0.3 (Ice Cream Sandwich), logcat xuất ra kênh trình duyệt. Vì vậy, bạn có thể lọc bằng cách sử dụng adb logcat browser:* *:S.

Câu trả lời gốc

Bạn có thể sử dụng consoleđối tượng JavaScript tích hợp để in thông điệp tường trình mà bạn có thể xem lại adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Sản xuất đầu ra này:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

Xác định phiên bản WebKit

Nếu bạn nhập javascript:alert(navigator.userAgent)vào thanh vị trí, bạn sẽ thấy phiên bản WebKit được liệt kê, vd

Trong Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Trên Trình giả lập Android Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

Lưu ý

Các phiên bản WebKit không phải là một phần của bản phát hành Safari có dấu + sau số phiên bản và số phiên bản của chúng thường cao hơn phiên bản WebKit được phát hành mới nhất. Vì vậy, ví dụ, 528+ là bản dựng không chính thức của WebKit, phiên bản mới hơn phiên bản 525.x được phát hành như một phần của Safari 3.1.2.

Thử:

1. mở trang mà bạn muốn gỡ lỗi

2. trong khi trên trang đó, trên thanh địa chỉ của trình duyệt Android gốc, hãy nhập:

   about:debug 

   (Lưu ý không có gì xảy ra, nhưng một số tùy chọn mới đã được bật.)

Hoạt động trên các thiết bị tôi đã thử. Đọc thêm về trình duyệt Android về: gỡ lỗi, những cài đặt đó làm gì?

Chỉnh sửa: Điều gì cũng giúp lấy thêm thông tin như số dòng là thêm mã này vào tập lệnh của bạn:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Các http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) cung cấp một cách thoải mái, bạn có thể sử dụng để truy cập vào nội dung của bạn trang web.

Tôi sử dụng Weinre , một phần của Apache Cordova .

Với Weinre, tôi nhận được bảng điều khiển gỡ lỗi của Google Chrome trong trình duyệt máy tính để bàn của mình và có thể kết nối Android với bảng điều khiển gỡ lỗi đó và gỡ lỗi HTML và CSS. Tôi có thể thực thi các lệnh Javascript trong bảng điều khiển và chúng ảnh hưởng đến trang Web trong trình duyệt Android. Thông báo nhật ký từ Android xuất hiện trong bảng điều khiển gỡ lỗi trên máy tính để bàn.

Tuy nhiên tôi nghĩ rằng không thể xem hoặc xem qua mã Javascript thực tế. Vì vậy, tôi kết hợp Weinre với thông điệp tường trình.

(Tôi không biết nhiều về JConsole nhưng đối với tôi, việc kiểm tra HTML và CSS không thể thực hiện được với JConsole, chỉ có các lệnh Javascript và ghi nhật ký (?).).

Hãy xem jsHybugger . Nó sẽ cho phép bạn gỡ lỗi từ xa mã js của bạn cho:

• Ứng dụng lai Android (webview, phonegap, worklight)
• Các trang web chạy trong trình duyệt Android mặc định (không phải Chrome, nó hỗ trợ tiện ích mở rộng ADB mà không có công cụ này)

Làm thế nào điều này hoạt động (chi tiết và thay thế trên trang web của dự án, đây là những gì tôi thấy là cách tốt nhất).

1. Cài đặt APK jsHybugger trên thiết bị của bạn
2. Kích hoạt gỡ lỗi USB trên thiết bị của bạn.
3. Cắm thiết bị Android vào máy tính để bàn của bạn qua USB
4. Chạy ứng dụng trên thiết bị Android ('jsHybugger')
5. Nhập URL mục tiêu và trang trong ứng dụng. Nhấn Start Service và cuối cùng là mở Trình duyệt
   • Bạn sẽ được trình bày một danh sách các trình duyệt được cài đặt, chọn một trình duyệt.
   • Trình duyệt khởi chạy.
6. Quay lại máy tính để bàn của bạn, mở Chrome sang chrome: // tests /
7. Một cửa sổ thanh tra sẽ xuất hiện với các công cụ gỡ lỗi chrome được liên kết với trang trên thiết bị Android.
8. gỡ lỗi!

Một lần nữa, với Chrome trên Android, hãy sử dụng tiện ích mở rộng ADB mà không cần jsHybugger. Tôi nghĩ rằng điều này đã được mô tả trong câu trả lời được chấp nhận cho câu hỏi này.

FYI, lý do tại sao RaphaelJS không hoạt động trên Android là vì webkit android (không giống như webkit iPhone) không hỗ trợ SVG tại thời điểm này. Google mới chỉ đưa ra kết luận rằng SVG hỗ trợ Android là một ý tưởng hay, do đó, nó sẽ không có sẵn trong một thời gian.

Gỡ lỗi hoàn toàn từ xa Chrome của trình duyệt gốc Android trên Galaxy S6 trên Android 5.1.1:

1. Bật gỡ lỗi USB trên điện thoại (Cài đặt, về, nhấn nhanh vào số bản dựng, cài đặt của nhà phát triển, gỡ lỗi USB)
2. Mở "Internet"
3. Điều hướng đến 'about: debug' (bạn sẽ thấy lỗi)
4. Menu THÊM> Cài đặt> Gỡ lỗi> Gỡ lỗi từ xa
5. Gắn điện thoại vào máy tính bằng cáp USB
6. Trên điện thoại, trong trình duyệt web Internet, hãy mở trang web bạn muốn gỡ lỗi
7. Mở Chrome trên máy tính
8. Điều hướng đến 'chrome: // tests'
9. Nhấp vào kiểm tra trên tab trình duyệt bạn muốn kiểm tra

Các thiết bị Galaxy S5 hiển thị trong Chrome nhưng các tab chỉ hiển thị sau khi bạn khởi động lại. Sau khi khởi động lại và cố gắng đính kèm, trình duyệt di động gặp sự cố.

Raphael không được hỗ trợ trên các trình duyệt Android 3.0 trước, đó là vấn đề của bạn. Họ không hỗ trợ đồ họa SVG. Nó không có hỗ trợ cho vải mặc dù. Nếu bạn không cần phải làm động nó, bạn có thể kết xuất đồ họa với canvg:

http://code.google.com.vn/p/canvg/

Đó là cách chúng tôi giải quyết vấn đề này để hiển thị các biểu tượng SVG trong trình duyệt Android mặc định.

Các about:debug(hoặc chrome:\\debugcả hai đều nói Trang không thể được tìm thấy, nhưng cho phép các Gỡ lỗi trình đơn trong các thiết lập) khi thử trên Chrome hay Opera trên Android KitKat 4.4.2 trên Tab Samsung

Nếu bạn có quyền ROOT trên thiết bị của mình, bạn có thể xem tin nhắn bảng điều khiển trực tiếp trên thiết bị. Sử dụng một ứng dụng như CatLog để xem đầu ra nhật ký - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=vi Điều này sẽ cho phép bạn xem tất cả hoạt động logcat.

Trong Android KitKat / 4.4.2, bảng điều khiển trình duyệt được xuất ra kênh Chromium. Bạn có thể lọc theo "Chromium" để có được tất cả hoạt động của trình duyệt (bao gồm cả hoạt động bên trong của trình duyệt) hoặc chỉ đơn giản là lọc theo "Bảng điều khiển" để chỉ xem nhật ký bảng điều khiển Trình duyệt.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Đặt vào dòng địa chỉ chrome://about. Bạn sẽ thấy các liên kết đến tất cả các trang dev có thể.

Bạn có thể thử YConsole một giao diện điều khiển nhúng js. Nó rất nhẹ và đơn giản để sử dụng.

• Bắt nhật ký và lỗi.
• Đối tượng biên tập.

Cách sử dụng:

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Khi chạy trình giả lập Android, hãy mở trình duyệt Google Chrome của bạn và trong 'trường địa chỉ', nhập:

chrome://inspect/#devices

Bạn sẽ thấy một danh sách các mục tiêu từ xa của bạn. Tìm mục tiêu của bạn và nhấp vào liên kết 'kiểm tra'.

Chrome có một tính năng tuyệt vời chỉ đơn giản là đưa nội dung Chrome thực tế của Android (bao gồm kiểm tra, v.v.) lên màn hình PC ...

• Bật gỡ lỗi USB trên thiết bị, có thể bạn cũng cần kết nối một lần qua adb devicesđể kích hoạt hội thoại "cho phép giao tiếp với ..." trên thiết bị di động,
• kết nối thiết bị Android với PC
• bắt đầu Chrome trên cả hai và
• sau đó điều hướng đến chrome://inspect/#devicestrên PC.
• Tại đây, các tab từ Chrome trên điện thoại di động được liệt kê và có thể được kiểm tra.

Ngoài ra còn có một hướng dẫn sử dụng trên mạng: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrom

(nhận thấy rằng sau khi adb logcathiển thị không có gì từ trình duyệt)

Giải pháp của tôi là (đối với trình duyệt chứng khoán):

• Trình duyệt chứng khoán
• "consolo.log" vào mã nguồn JS
• Đã gỡ lỗi USB
• SDK Android
• Từ SDK Android: Monitor.bat
• Bộ lọc màn hình như hình ảnh đính kèm

Android studio cung cấp tất cả những gì bạn cần để xem console.log và những thứ khác. Trong logcat, chỉ cần lọc thành "/ Bảng điều khiển web" và bạn sẽ thấy nhật ký js của mình ...

Nếu bạn gặp bất kỳ vấn đề gì, bạn có thể thêm plugin này: https://github.com/apache/cordova-plugin-console

Nếu bạn đang tìm kiếm các tùy chọn không từ xa:

Trên các bản phát hành Jellybean không có gốc và trước đó, người xem logcat có thể được sử dụng nếu ERIC.READL_LOGS được cấp qua adb một lần.

Trên firefox, có một addon giao diện điều khiển đọc và hiển thị tất cả các nhật ký ứng dụng và cũng có fireite lite .

Bạn có thể thử "javascript-Trình biên dịch-deva" từ thư viện npm bằng cách chạy lệnh "npm cài đặt javascript-Trình biên dịch-deva" và sau đó chạy trình biên dịch.is bằng cách sử dụng "nút trình biên dịch.js".

Nó tạo một máy chủ tại cổng 8888. Sau đó, bạn có thể nhấn " http: // localhost: 8888 " và nhập mã JavaScript của bạn và có thể thấy kết quả của bất kỳ mã JavaScript nào bao gồm cả "console.log" trong chính trình duyệt điện thoại.

Nó cũng được lưu trữ trong " https://javascript-compiler-deva.herokuapp.com/ "

Các tùy chọn gỡ lỗi cục bộ / about: config ... dường như không hoạt động trong năm 2020+ trình duyệt chrome / ff / .. nữa.

Một trình duyệt khác với bảng điều khiển js không từ xa là DevBrowser

hoặc WebInspector (bộ chọn tệp không hoạt động)