Bagaimana saya bisa men-debug javascript di Android?


281

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?


2
Di luar topik, tetapi pertimbangkan untuk memeriksa Snap.svg. Ini adalah remake dari RaphaelJS dari orang yang sama. Ini dibuat ulang tanpa dukungan browser lama, jadi lebih cepat, kodenya lebih bersih, dll.
Lajos Meszaros

Catatan untuk jawaban yang diterima: Di Samsung Experience> = 9, jika Anda belum menemukan perangkat Anda, alihkan jenis USB ke konektor suara.
BOZ

Jawaban:


245

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.


12
kapan oh kapan saya bisa melakukan debug secara lokal di Android untuk saat-saat ketika saya tidak bisa melakukannya dari jarak jauh?
Michael

Tidak yakin. Itu tidak masuk akal pada perangkat kecil seperti telepon karena layar real estat akan sangat terbatas untuk Web Inspektur penuh. Pada tablet mungkin lebih masuk akal, tetapi mereka harus menata ulang Inspektur Web untuk antarmuka sentuh yang merupakan upaya signifikan. Mungkin mereka sedang mengerjakannya tetapi siapa yang tahu.
Pierre-Antoine LaFayette

1
Saya menduga potongan pertama tanpa adaptasi yang signifikan akan menjadi awal yang baik, yaitu memungkinkan sejumlah besar fungsi digunakan. Beberapa tablet bahkan memiliki stylus sehingga acara mouse dapat bekerja sama.
Michael

Apa itu tentang perangkat kecil seperti telepon!?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…
Michael Dillon

Catatan dari tautan debugging jarak jauh Chrome untuk Android: "Anda harus masuk ke Chrome dengan salah satu akun Google Anda. Debugging jarak jauh tidak berfungsi dalam Mode Penyamaran atau Mode Tamu." Wow kenapa?
sdbbs

135

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;
}

23
Saya baru saja mencoba, tetapi trik about: debug tidak bekerja pada Nexus S saya dengan ICS 4.0.3.
derflocki

6
Anda harus mencoba bernavigasi about:debugdari dalam tab yang sama dengan halaman Anda saat ini terbuka. Alih-alih menavigasi, itu akan menampilkan "SHOW JAVASCRIPT CONSOLE" di bagian atas. Jika Anda mencoba mengakses about:debugdari tab baru, itu tidak akan berfungsi.
Denilson Sá Maia

10
Ini hanya browser cadangan, bukan? Saya mencobanya di Chrome untuk Android beta di KitKat tanpa hasil. (Sepertinya KitKat tidak lagi memiliki browser stok)
James

7
Ini membutuhkan peramban stok Android, dan itu tidak berfungsi di Chrome :)
giorgio79

6
Browser stok kitkat, jika pabrikan Anda menggunakannya, adalah Chromium. about:debugbenar-benar ke depan chrome://debugyang mengatakan "tidak dapat ditemukan" tetapi menunjukkan Debugopsi dalam pengaturan. Beberapa opsi tidak berlaku hingga tab baru dibuka sesudahnya.
cde


21

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 (?).)


Menambahkan panduan langkah demi langkah untuk menginstal OS X di stackoverflow.com/questions/13330221/…
leymannx

Saya sudah mencoba Weinre dan saya tidak puas dengan alat ini. Log tidak benar-benar dapat diandalkan. Beberapa kesalahan tidak ditampilkan. Bahkan jika mereka ditampilkan, Weinre hanya menampilkan pesan kesalahan, tanpa jejak tumpukan. Itu benar-benar membuatku jengkel.
Lewis

Saya sudah mencoba Weinre dan saya tidak puas dengan alat ini. Log tidak benar-benar dapat diandalkan. Beberapa kesalahan tidak ditampilkan. Bahkan jika mereka ditampilkan, Weinre hanya menampilkan pesan kesalahan, tanpa jejak tumpukan. Itu benar-benar membuatku jengkel.
Lewis

17

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.


Mengapa ini diturunkan? Ini adalah satu-satunya alat yang mendukung debugging jarak jauh webViews di dalam aplikasi asli.
Alfie Hanssen

Karena itu tidak mengatakan bagaimana melakukannya, kecuali itu mengarahkan Anda ke tautan seluruh proyek, jadi Anda harus banyak menggali sendiri sebelum benar-benar berhasil
Adaptabi

2
Alat ini sebenarnya cukup bagus dan menyelesaikan masalah saya. Sayang sekali saya harus mencari di Google untuk itu daripada melihat jawaban ini karena seseorang memutuskan untuk menguburnya. (Saya berakhir di sini dulu) Saya akan menambahkan beberapa detail untuk meningkatkan jawaban ini, lihat bagaimana semua ini berfungsi SO?
Aardvark

APK jsHybugger tidak lagi tersedia di Google Play atau untuk diunduh. Proyek disimpan di sini: github.com/dcendents/jsHybugger ; tetapi tampaknya tidak memasukkan kode untuk menghasilkan APK.
Adrian Herscu

14

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.


Terima kasih Ludvig, menemukan jawabannya tidak lama setelah posting asli, tetapi tindak lanjut yang baik.
jvenema

Ini bukan jawaban untuk pertanyaan utama, harap jadikan ini sebagai komentar (atau pertanyaan terpisah) dan hapus ini.
PJ Brunet

12

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.


5

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.


5

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)

5

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


6
Ya, tetapi tidak ada apa-apa untuk konsol
Nico

3

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>

Ini bagus untuk debugging javascript di perangkat seluler. Terima kasih
ako

3

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'.


Saya tidak tahu mengapa jawaban ini belum mendapat pengakuan lebih. Itu sangat sederhana dan bekerja untuk emulator dan perangkat fisik
Frank

3

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)


1

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 terlampirmasukkan deskripsi gambar di sini


0

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 .


0

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/ "


0

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)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.