Bagaimana saya bisa men-debug javascript di Android?

Saya sedang mengerjakan proyek yang melibatkan Raphaeljs. Ternyata, itu tidak berfungsi di Android. Ini tidak pada iPhone.

Bagaimana sih saya tentang men-debug sesuatu di browser Android? Ini WebKit, jadi jika saya tahu versinya, apakah akan debug pada versi lengkap dari WebKit menghasilkan hasil yang sama?

Pembaruan: Debugging Jarak Jauh

Sebelumnya, logging konsol adalah pilihan terbaik untuk debugging JavaScript di Android. Saat ini dengan debugging jarak jauh Chrome untuk Android, kami dapat memanfaatkan semua kebaikan Alat Pengembang Chrome untuk Desktop di Android. Lihat https://developers.google.com/chrome-developer-tools/docs/remote-debugging untuk informasi lebih lanjut.

Perbarui: Konsol JavaScript

Anda juga dapat menavigasi ke: debug di bilah URL untuk mengaktifkan menu debug dan konsol kesalahan JavaScript dengan perangkat Android terbaru. Anda akan melihat SHOW JAVASCRIPT CONSOLE di bagian atas Browser.

Saat ini di Android 4.0.3 (Ice Cream Sandwich), logcat keluar ke saluran browser. Jadi Anda bisa memfilter menggunakan adb logcat browser:* *:S.

Jawaban Asli

Anda dapat menggunakan consoleobjek JavaScript bawaan untuk mencetak pesan log yang dapat Anda tinjau adb logcat.

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

Menghasilkan output ini:

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://...

Menentukan versi WebKit

Jika Anda mengetik javascript:alert(navigator.userAgent)di bilah lokasi Anda akan melihat versi WebKit yang terdaftar misalnya

Di 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

Di Android Emulator 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

NB

Versi WebKit yang bukan bagian dari rilis Safari memiliki + setelah nomor versi, dan nomor versi mereka umumnya lebih tinggi daripada versi WebKit yang dirilis terbaru. Jadi, misalnya, 528+ adalah versi tidak resmi dari WebKit yang lebih baru dari versi 525.x yang dikirimkan sebagai bagian dari Safari 3.1.2.

Mencoba:

1. buka halaman yang ingin Anda debug

2. saat berada di halaman itu, di bilah alamat browser Android stok, ketik:

   about:debug 

   (Perhatikan tidak ada yang terjadi, tetapi beberapa opsi baru telah diaktifkan.)

Bekerja pada perangkat yang saya coba. Baca lebih lanjut tentang peramban Android tentang: debug, apa yang dilakukan pengaturan itu?

Sunting: Yang juga membantu mengambil lebih banyak informasi seperti nomor baris adalah menambahkan kode ini ke skrip Anda:

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

The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) menyediakan cara yang bagus yang dapat digunakan untuk mengakses konten dari Anda halaman web.

Saya menggunakan Weinre , bagian dari Apache Cordova .

Dengan Weinre, saya mendapatkan konsol debug Google Chrome di browser desktop saya, dan dapat menghubungkan Android ke konsol debug itu, dan men-debug HTML dan CSS. Saya dapat menjalankan perintah Javascript di konsol, dan itu mempengaruhi halaman Web di browser Android. Pesan log dari Android muncul di konsol debug desktop.

Namun saya pikir itu tidak mungkin untuk melihat atau melangkah melalui kode Javascript yang sebenarnya. Jadi saya menggabungkan Weinre dengan pesan log.

(Saya tidak tahu banyak tentang JConsole tetapi bagi saya sepertinya pemeriksaan HTML dan CSS tidak dimungkinkan dengan JConsole, hanya perintah Javascript dan pencatatan (?).)

Lihatlah jsHybugger . Ini akan memungkinkan Anda untuk men-debug kode js Anda dari jarak jauh untuk:

• Aplikasi hybrid Android (tampilan web, phonegap, worklight)
• Halaman web yang berjalan di browser Android default (bukan Chrome, mendukung ekstensi ADB tanpa alat ini)

Cara kerjanya (lebih detail dan alternatif di situs proyek, inilah yang saya temukan sebagai cara terbaik).

1. Instal APK jsHybugger di perangkat Anda
2. Aktifkan USB debugging pada perangkat Anda.
3. Hubungkan perangkat Android ke komputer desktop Anda melalui USB
4. Jalankan aplikasi di perangkat Android ('jsHybugger')
5. Masukkan URL target dan halaman di aplikasi. Tekan Mulai Layanan dan akhirnya Buka Browser
   • Anda akan disajikan daftar browser yang terinstal, pilih satu.
   • Browser diluncurkan.
6. Kembali di komputer desktop Anda, buka Chrome ke chrome: // inspect /
7. Jendela inspektur akan muncul dengan alat debugging krom yang ditautkan ke halaman pada perangkat Android.
8. debug pergi!

Sekali lagi, dengan Chrome di Android, gunakan ekstensi ADB tanpa jsHybugger. Saya pikir ini sudah dijelaskan dalam jawaban yang diterima untuk pertanyaan ini.

FYI, alasan mengapa RaphaelJS tidak berfungsi di android adalah bahwa webkit android (tidak seperti iPhone webkit) tidak mendukung SVG saat ini. Google baru-baru ini sampai pada kesimpulan bahwa SVG mendukung android adalah ide yang baik, sehingga tidak akan tersedia untuk beberapa waktu.

Debugging jarak jauh Chrome penuh dari browser asli Android pada Galaxy S6 di Android 5.1.1:

1. Aktifkan USB Debugging on phone (Pengaturan, tentang, ketuk nomor build dengan cepat, pengaturan pengembang, debugging USB)
2. Buka "Internet"
3. Arahkan ke 'about: debug' (Anda akan melihat kesalahan)
4. Menu LEBIH LANJUT> Pengaturan> Debug> Remote Debugging
5. Pasang telepon ke komputer dengan kabel USB
6. Di telepon, di browser web Internet, buka situs yang ingin Anda debug
7. Buka Chrome di komputer
8. Navigasikan ke 'chrome: // inspect'
9. Klik periksa pada tab browser yang ingin Anda periksa

Perangkat Galaxy S5 tampil di Chrome tetapi tab hanya muncul setelah Anda memulai ulang. Setelah memulai kembali dan mencoba melampirkan, peramban seluler mogok.

Raphael tidak didukung di browser Android pra 3.0, itulah masalahnya. Mereka tidak memiliki dukungan untuk grafis SVG. Itu memang memiliki dukungan untuk kanvas. Jika Anda tidak perlu menghidupkannya, Anda dapat membuat grafik dengan canvg:

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

Begitulah cara kami mengatasi masalah ini untuk rendering ikon SVG di browser Android default.

Halaman about:debug(atau chrome:\\debugkeduanya mengatakan tidak dapat ditemukan, tetapi aktifkan menu Debug di pengaturan) ketika dicoba di Chrome atau Opera di Android KitKat 4.4.2 di Tab Samsung

Jika Anda memiliki izin ROOT di perangkat Anda, Anda dapat melihat pesan konsol langsung di perangkat. Gunakan aplikasi seperti CatLog untuk melihat output log - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en Ini akan memungkinkan Anda melihat semua aktivitas logcat.

Di Android KitKat / 4.4.2, konsol browser di-output ke saluran Chromium. Anda dapat memfilter berdasarkan "Chromium" untuk mendapatkan semua aktivitas browser (termasuk aktivitas internal browser), atau cukup filter dengan "Console" untuk hanya melihat log konsol Browser.

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

Masukkan ke dalam baris alamat chrome://about. Anda akan melihat tautan ke semua halaman pengembang yang memungkinkan.

Anda dapat mencoba YConsole a js embedded console. Ini ringan dan mudah digunakan.

• Tangkap log dan kesalahan.
• Editor objek.

Cara Penggunaan :

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

Saat menjalankan emulator Android, buka browser Google Chrome Anda, dan di 'bidang alamat', masukkan:

chrome://inspect/#devices

Anda akan melihat daftar target jarak jauh Anda. Temukan target Anda, dan klik tautan 'periksa'.

Chrome memiliki fitur luar biasa yang hanya mengambil konten Chrome Android aktual (termasuk inspeksi dll.) Ke layar PC ...

• Aktifkan USB debugging pada perangkat, mungkin Anda juga perlu terhubung satu kali adb devicesuntuk memicu dialog "izinkan komunikasi dengan ..." pada perangkat seluler,
• menghubungkan perangkat Android ke PC,
• mulai Chrome di keduanya, dan
• lalu arahkan ke chrome://inspect/#devicespada PC.
• Di sini, tab dari ponsel Chrome terdaftar dan dapat diperiksa.

Ada juga manual terperinci di internet: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(menemukan bahwa setelah adb logcattidak menunjukkan apa pun dari browser)

Solusi saya adalah (untuk browser stok):

• Browser Stock
• "consolo.log" ke dalam kode sumber JS
• USB debug diaktifkan
• Android SDK
• Dari Android SDK: monitor.bat
• Monitor filter sebagai gambar terlampir

Studio Android menyediakan semua yang Anda butuhkan untuk melihat console.log dan lainnya. Di logcat cukup filter ke "/ Web Console" dan Anda akan melihat log js Anda ...

Jika Anda mendapatkan masalah apa pun, Anda dapat menambahkan plugin ini: https://github.com/apache/cordova-plugin-console

Jika Anda mencari opsi yang tidak jauh:

Pada rilis Jellybean sebelumnya dan yang tidak di-rooting, penampil logcat dapat digunakan jika android.permission.READL_LOGS diberikan melalui adb sekali.

Di firefox, ada addon konsol yang membaca dan menunjukkan semua log aplikasi dan ada juga pembakar lite .

Anda dapat mencoba "javascript-compiler-deva" dari npm library dengan menjalankan "npm instal javascript-compiler-deva" perintah dan kemudian menjalankan compiler.is menggunakan "node compiler.js".

Ini menciptakan server di port 8888. Anda kemudian dapat menekan " http: // localhost: 8888 " dan masukkan kode JavaScript Anda dan dapat melihat hasil dari setiap kode JavaScript termasuk "console.log" di browser ponsel itu sendiri.

Itu juga di-host di " https://javascript-compiler-deva.herokuapp.com/ "

Opsi debugging / about: config ... lokal sepertinya tidak berfungsi lagi di browser 2020 + chrome / ff / ...

Browser lain dengan konsol js non-jarak jauh adalah DevBrowser

atau WebInspector (pemilih file tidak berfungsi)