Saya menghabiskan dua hari terakhir mencoba mencari cara untuk men-debug aplikasi HTML5 yang saya buat menggunakan Cordova 3.2 dan digunakan untuk perangkat Android 2.3. Semua artikel / tulisan yang saya lihat menyediakan peretasan daripada solusi nyata :( dan sebagian besar waktu, tidak ada yang berfungsi untuk kasus saya; debug gaya css dan kode Angular dalam aplikasi saya ..
Sejauh ini saya menguji;
debug.phonegap.com
Saya menyuntikkan skrip ke index.html
file kemudian mengunjungi URL yang dihasilkan di debug.phonegap.com tetapi tidak ada yang terjadi; hanya halaman kosong.
Weinre
Sebagian besar artikel yang saya temukan menunjuk ke repositori Github usang yang menghitung file Jar .. tetapi tidak ditemukan :(
Inspeksi tepi
Ini berfungsi dan menunjukkan halaman web yang saya jelajahi di PC di dalam ponsel .. Tetapi masalahnya adalah ia menggunakan beberapa browser terintegrasi (atau emulator) daripada yang menjalankan aplikasi phonegap; jadi hasilnya tidak akurat.
Emulator Chrome
Sama seperti Edge inspect; itu tidak memungkinkan untuk melihat web-kit nyata v530 yang dikirimkan dengan Android 2.3.
Solusi impian
Solusi sempurna adalah ekstensi ke Google Chrome (desktop) yang memungkinkan Anda untuk beralih ke browser desktop yang sama dengan yang ditemukan di platform Android 2.3; tidak ada persaingan tidak ada peretasan, hanya peramban itu sendiri dengan web-kit v 530.
Sayangnya solusi seperti itu tidak ada :( atau saya salah?
Ada saran?
Jawaban:
UNTUK ANDROID:
Anda hanya perlu mengaktifkan "debugging jarak jauh USB" di dalam perangkat android Anda dan pasang dengan kabel USB. Kemudian buka aplikasi Anda di perangkat. Chrome akan mendeteksi browser jarak jauh dan Anda dapat melihat konsol dengan cara yang sama dari yang Anda lihat saat menggunakan Chrome secara lokal.
Gunakan tautan ini:
chrome://inspect/#devices
di browser Chrome (Anda harus menempelkannya ke bilah navigasi).Jika aplikasi Anda mogok di perangkat, Anda hanya perlu melihat log konsol di dalam browser Anda dan melihat apa yang terjadi. Anda juga dapat menambahkan fungsionalitas, mengubah variabel, dan mengesampingkan fungsi dengan cara yang sama daripada yang kami lakukan dengan browser lokal kami.
Baca artikel ini untuk informasi lebih lanjut tentang langkah-langkah yang harus diambil.
Ini HANYA berfungsi dengan perangkat yang menjalankan Android 4.4+.
UNTUK iOS:
Gunakan Safari untuk iOS, ikuti langkah-langkah ini:
1. Di perangkat iOS Anda, buka Pengaturan> Safari> Lanjutan> Inspektur Web untuk mengaktifkan Inspektur Web
2. Buka Safari di perangkat iOS Anda.
3. Hubungkan ke komputer Anda melalui USB.
4. Buka Safari di komputer Anda.
5.Dalam menu Safari, buka Develop dan, cari nama perangkat Anda.
6. Pilih tab yang ingin Anda debug.
sumber
adb start-server
.chrome://inspect
.MEMPERHATIKAN
Jawaban ini sudah lama (Januari 2014) banyak solusi debug baru tersedia sejak saat itu.
Saya akhirnya berhasil! menggunakan weinre dan cordova (tanpa membangun Phonegap) dan untuk menghemat kerumitan para dev di masa depan, yang mungkin menghadapi masalah yang sama, saya membuat tutorial YouTube ;)
sumber
Jika Anda dapat menggunakan perangkat Android 4.4+, maka Anda dapat menggunakan Debugging Jarak Jauh Chrome bahkan di WebView internal aplikasi. Ini adalah debugger yang jauh lebih baik daripada Weinre, tetapi kuncinya adalah menggunakan versi Android terbaru.
Bangunan Cordova baru-baru ini secara otomatis mengaktifkan debugging semacam ini selama itu adalah build debug (itu dimatikan dalam build --release).
sumber
chrome://inspect
dan memastikan "Temukan Perangkat USB" dicentang. Ini akan menampilkan segala WebViews yang bisa di-debug di perangkat yang terhubung.console.log
sepertinya tidak berhasil. Anda harus melaluialerts
yang benar-benar beban.(it's turned off in --release builds).
pemberitahuan ini menyelamatkan hari saya!Yang terbaik bagi saya adalah melampirkan debugger Chrome.
Untuk melakukannya, jalankan aplikasi Anda di emulator atau perangkat (menggunakan $ cordova emulate)
lalu, buka Google Chrome dan buka
chrome://inspect/
Anda akan melihat daftar dengan menjalankan aplikasi. Aplikasi Anda harus ada di sana. Klik "periksa".
Jendela baru akan terbuka dengan alat pengembang. Di sana Anda dapat mengklik "konsol" untuk memeriksa kesalahan
sumber
Jika aplikasi Anda menjalankan Cordova 3.3+ dan perangkat Anda menjalankan Android 4.4+ maka Anda dapat menggunakan Debugging Remote Webview Chrome untuk men-debug aplikasi Cordova Anda.
Untuk dapat melakukan itu, Anda harus terlebih dahulu mengaktifkan USB debugging pada ponsel Anda.
Kemudian buka tab "periksa perangkat". Di Chrome, buka Pengaturan > Alat lainnya > Periksa perangkat .
Jika Anda meluncurkan aplikasi di perangkat saat terhubung ke komputer, Tampilan Web akan muncul di daftar perangkat. Klik tautan "Periksa" dari tampilan web Anda dan Alat Debug untuk tampilan Web Anda akan muncul.
Berikut ini adalah artikel yang sepenuhnya menjelaskan cara melakukannya: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/
sumber
Sudahkah Anda mencoba 'GapDebug' ? Gratis.
Tampaknya untuk mengintegrasikan versi Safari Webkit Inspector dan Chrome Dev Tools untuk menawarkan pengalaman debugging terintegrasi pada OS X dan Windows.
sumber
Pilihan lain adalah Visual Studio, yang memiliki dukungan pra-rilis untuk debugging aplikasi Cordova :
Sekarang setelah Microsoft merilis edisi Visual Studio Community secara gratis , Anda dapat mencobanya tanpa biaya. Anda harus mengunduh Visual Studio, dan Visual Studio Tools untuk Apache Cordova .
sumber
Sejauh yang saya tahu, satu-satunya alat produktif untuk debugging nyata di aplikasi Cordova untuk platform Android dari 2,2 ke 4,3 adalah jshybugger . Weinre adalah seorang inspektur, bukan seorang debugger. JsHybugger memberikan kode yang memungkinkan Anda melakukan debug di dalam WebView android.
sumber
Hanya ingin menambahkan bahwa Anda dapat men-debug aplikasi Android menggunakan Genymotion . Ini CARA lebih cepat daripada emulator android stok.
sumber
Anda dapat menggunakan Intel XDK IDE untuk mengembangkan dan debug pada emulator atau pada perangkat nyata
Saya juga menemukan alat Visual Studio 2015 RC untuk cordova sangat bagus, dengan itu emulator riak
sumber
Jika Anda menggunakan build phonegap, ada opsi untuk mengaktifkan debug.
Untuk bangunan lokal, Anda dapat menginstal weinre dengan npm: https://npmjs.org/package/weinre
Dan tautan ke dokumen weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/
Dan ada sesuatu yang disebut debugging jarak jauh krom tapi saya tidak tahu banyak tentang itu, Anda dapat melihat artikel Raymond Camden: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-dan-Remote-Debugging-untuk-Android
Documents untuk debugging jarak jauh chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (jika saya mengerti benar Anda memerlukan perangkat android dengan chrome sebagai browser default) Mungkin yang terdekat dengan impian Anda larutan?
sumber
Pada Android 4.4+ w / SDK diinstal:
sumber
Jika Anda menggunakan Cordova 3.3 atau lebih tinggi dan perangkat Anda menjalankan Android 4.4 atau lebih tinggi, Anda dapat menggunakan 'Remote Debugging di Android dengan Chrome'. Instruksi lengkap ada di sini:
https://developer.chrome.com/devtools/docs/remote-debugging
Singkatnya:
Atau , jika Anda menggunakan Cordova 3.3+ dan tidak memiliki perangkat fisik dengan 4.4, Anda dapat menggunakan emulator yang menggunakan Android 4.4+ untuk menjalankan aplikasi melalui emulator, di komputer desktop Anda.
sumber
Inilah solusinya menggunakan Phonegap Build. Tambahkan yang berikut ke config.xml Anda untuk dapat memeriksa dengan Debugging Chrome Webview Jarak Jauh.
Pertama, pastikan tag widget Anda mengandung xmlns: android = "http://schemas.android.com/apk/res/android"
Kemudian tambahkan yang berikut ini
Ini berfungsi untuk saya di Nexus 5, Phonegap 3.7.0.
Bangun aplikasinya di Bangun Phonegap, instal APK, sambungkan ponsel ke USB, aktifkan USB debugging di ponsel Anda lalu kunjungi chrome: // inspect.
Sumber: https://www.genuitec.com/products/gapdebug/learning-center/configuration/
sumber
Gunakan Monitor Perangkat Android
Monitor Perangkat Android dilengkapi paket dengan SDK Android yang akan Anda instal sebelumnya. Di monitor perangkat Anda dapat melihat Anda seluruh log perangkat, pengecualian, pesan semuanya. Ini berguna untuk men-debug crash aplikasi atau masalah seperti lainnya. Untuk menjalankan ini, buka tools / folder di dalam SDK Android Anda “/ var / Android-SDK-Linux / Tools”. Kemudian jalankan yang berikut ini
Jika Anda berada di windows, langsung buka file monitor.exe. Ada tab di bawah "LogCat" di mana Anda akan melihat semua pesan terkait perangkat. Anda akan melihat semua pesan di sini termasuk pengecualian perangkat android yang tidak terlihat perangkat pemeriksaan krom. Pastikan untuk membuat filter menggunakan tanda "+" di tab logcat, sehingga Anda melihat pesan hanya untuk aplikasi Anda.
Sumber: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/
sumber
monitor
.Anda juga dapat men-debug dengan chrome aplikasi HTML5 Anda
Saya membuat .bat untuk membuka chrome dalam mode debug
sumber
Anda dapat men-debug Aplikasi Cordova Android yang diinstal pada ponsel Anda dari jarak jauh dari komputer melalui kabel USB (Anda juga dapat mengklik dari jauh aplikasi web seolah-olah Anda sedang melihat aplikasi web dari komputer Anda) dengan "Chrome Remote Debugging". Anda juga dapat men-debug aplikasi web yang dilihat di browser Android Stock atau Chrome di Android dengan cara ini.
Aktifkan mode pengembang di perangkat Android Anda (buka pengaturan -> tentang ponsel -> ketuk 7x pada nomor build).
Hubungkan komputer Anda dengan ponsel Anda melalui kabel USB.
Makan siang Chrome di komputer Anda dan arahkan ke chrome: // periksa dan klik tombol "Periksa" di sebelah perangkat jarak jauh yang ingin Anda debug (di bawah tab "Perangkat"). ATAU klik kanan di dalam Chrome di komputer Anda -> Inspeksi -> Costumize dan kontrol DevTools (3 titik vertikal - sudut kanan atas alat pengembang) -> Lebih banyak alat -> Perangkat Jarak Jauh -> di bawah Perangkat di sisi kiri, klik pada Anda perangkat yang terhubung dengan Anda melalui USB -> klik pada tombol Inspect untuk aplikasi yang Anda inginkan.
Kemudian klik "Konsol" dan Anda dapat men-debug JavaScript dengan cara yang sama, seperti yang Anda lakukan pada aplikasi web normal dengan alat pengembang Chrome.
sumber
Aku sangat mencintai kita! Bagaimana cara menggunakannya:
Pertama, kenakan
index.html
(pastikanapp.settings.debugUrl
diatur sebelum ini):Kemudian:
sudo npm install -g weinre
weinre --boundHost -all-
Berdasarkan pada http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/
sumber
Perangkat dengan android <= 4.0.4 perlu menambahkan plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt
sumber