Apakah ada solusi nyata untuk men-debug aplikasi cordova [ditutup]

130

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.htmlfile 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?

numediaweb
sumber

Jawaban:

139

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/#devicesdi 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.

masukkan deskripsi gambar di sini

Neotrix
sumber
3
Saya bisa melihat konsol dan aplikasi saya di chrome di komputer saya, sementara smartphone saya terhubung melalui usb. Solusi yang sangat keren.
emilie zawadzki
Tidak menemukan telepon saya sampai saya berlari adb start-server.
Leukipp
@Leukipp Saya juga menghadapi masalah yang sama tetapi setelah itu tambahkan ADT pada startup sistem windows saya. masalah saya pecahkan ..
Neotrixs
2
Jawaban menyajikan solusi untuk masalah yang salah - pertanyaannya bukan tentang debugging browser, ini tentang debugging WebView. Ini sedikit berbeda karena terbukti dari banyak pengguna frustrasi bingung karena WebViews mereka di mana aplikasi mereka ditampilkan, tidak muncul di chrome://inspect.
amn
1
Android 4.4+ :( Itulah alasannya ...
candjack
76

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

numediaweb
sumber
Saya kehilangan konfigurasi IP yang tepat, sekarang berfungsi dengan sempurna, terima kasih banyak!
Juan Carlos Alpizar Chinchilla
8
Weinre bukan debugger, hanya memungkinkan inspeksi DOM, Anda tidak dapat men-debug js dan bahkan menonton pesan konsol
Bogdan Mart
19
... bagaimana tautan ke video youtube merupakan jawaban yang dapat diterima?
Meekohi
2
@ Meekohi dia membuat video :)
candjack
10
Seperti semua jawaban stackoverflow - tautan ke solusi (baik dibuat oleh penulis atau tidak), tidak disukai. Simpan solusinya di sini, dan jangan di luar tempat mereka pergi suatu hari nanti.
DarkNeuron
56

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

rdchambers
sumber
Tampak hebat - juga memperhatikan ada plugin membangun phonegap yang tersedia untuk mengaktifkan fitur ini.
DavidC
1
Sesuai komentar Anda: dimatikan dalam --release builds (Thats not true)
Luckyy
9
Kembali. ini, saya menemukan tautan ini bermanfaat. Secara mencolok, gunakan Chrome untuk menavigasi ke chrome://inspectdan memastikan "Temukan Perangkat USB" dicentang. Ini akan menampilkan segala WebViews yang bisa di-debug di perangkat yang terhubung.
Sharadh
masalah dengan solusi ini console.logsepertinya tidak berhasil. Anda harus melalui alertsyang benar-benar beban.
João Pimentel Ferreira
(it's turned off in --release builds).pemberitahuan ini menyelamatkan hari saya!
maswerdna
32

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

José
sumber
7
Harap periksa kembali jawaban Anda akan berfungsi dalam kondisi OP. Debugger Chrome hanya bekerja dengan Android 4.4+.
Chris Neve
20

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/

Mitch
sumber
Ini adalah salah satu jawaban terbaik dan terlengkap dari bagian komentar ini, walaupun itu tidak membantu OP karena 4.4+.
Chris Neve
7

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.

Zaxxo
sumber
1
Ini adalah alat penting terutama bagi pengguna Windows yang ingin terhubung ke langkah men-debug iPhone - Saya sangat merekomendasikannya.
mike nelson
7

Pilihan lain adalah Visual Studio, yang memiliki dukungan pra-rilis untuk debugging aplikasi Cordova :

Pengalaman debugging terpadu . Pengembangan lintas platform sering membutuhkan alat yang berbeda untuk debugging setiap perangkat, emulator, atau simulator. Alat yang berbeda berarti alur kerja yang berbeda dan kehilangan produktivitas setiap kali Anda berpindah perangkat. Dengan Visual Studio, Anda dapat menggunakan alat debugging kelas dunia yang sama untuk semua target penyebaran, termasuk Windows, emulator Android, perangkat Android yang terpasang, perangkat iOS dan emulator, dan emulator Apache Ripple.

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 .

Josh
sumber
Karena XDK yang dulu luar biasa dari Intel menghentikan dukungan untuk debuggernya, saya harus mencari opsi baru. Visual Studio adalah satu-satunya solusi yang saya temukan yaitu solusi all-in-one (IDE, debugger, plugin manager, dll.). Pengaturan membutuhkan waktu tetapi sangat sederhana. Saya menggunakan Enterprise 2015. Itu membangun tetapi saya tidak yakin apakah itu menerbitkan (saya belum mencapai titik itu).
Victor Stoddard
5

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.

sgimeno
sumber
5

Hanya ingin menambahkan bahwa Anda dapat men-debug aplikasi Android menggunakan Genymotion . Ini CARA lebih cepat daripada emulator android stok.

Victor P
sumber
1
Genymotion memungkinkan untuk menggunakan debugging jarak jauh chrome karena tidak diperlakukan sebagai emulator tetapi sebagai perangkat nyata. Fitur kamera dan perangkat keras lainnya juga berfungsi, tetapi beberapa dari mereka dibayar.
shirk3y
4

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

Mohamed Selim
sumber
3

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?

QuickFix
sumber
Terima kasih atas infonya; Saya lebih suka menggunakan cara cordova gratis;) dan saya membuatnya bekerja sekarang (periksa jawaban saya) terima kasih! +1
numediaweb
1
periksa edit saya, sepertinya chrome tidak jauh dari solusi impian Anda
QuickFix
Perhatikan bahwa perangkat yang saya gunakan menjalankan Android 2.3 sementara debug jarak jauh chrome memerlukan Android 4.4 atau lebih tinggi. Tapi terima kasih "QuickFix"; Saya membuat semuanya berfungsi sekarang .. lihat tutorial saya;)
numediaweb
3

Pada Android 4.4+ w / SDK diinstal:

adb logcat chromium:D SystemWebViewClient:D \*:S
Gringo Suave
sumber
2

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:

  • Hubungkan perangkat ke komputer desktop Anda menggunakan kabel USB
  • Aktifkan USB debugging pada perangkat Anda (pada perangkat saya ini berada di bawah Pengaturan> Lainnya> Opsi pengembang> USB debugging)

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.

  • Jalankan aplikasi Cordova Anda di perangkat atau emulator
  • Di Chrome di komputer desktop Anda, masukkan chrome: // inspect / # devices di bilah alamat
  • Perangkat / emulator Anda akan ditampilkan bersama dengan perangkat lain yang dikenal yang terhubung ke komputer Anda, dan di bawah perangkat Anda akan ada rincian Cordova 'WebView' (pada dasarnya aplikasi Cordova Anda), yang berjalan pada perangkat / emulator ( cara kerja Cordova adalah pada dasarnya menciptakan jendela 'browser' di perangkat / emulator Anda, di mana terdapat 'WebView' yang merupakan aplikasi HTML / JavaScript yang Anda jalankan)
  • Klik tautan 'periksa' di bawah bagian 'WebView' tempat Anda melihat perangkat / emulator Anda terdaftar. Ini menampilkan alat pengembang Chrome yang sekarang memungkinkan Anda untuk men-debug aplikasi Anda.
  • Pilih tab 'sumber' dari alat pengembang Chrome untuk melihat JavaScript yang sedang dijalankan aplikasi Cordova Anda di perangkat / emulator. Anda dapat menambahkan breakpoints dalam JavaScript yang memungkinkan Anda untuk men-debug kode Anda.
  • Anda juga dapat menggunakan tab 'konsol' untuk melihat kesalahan (yang akan ditampilkan dengan warna merah), atau di bagian bawah konsol Anda akan melihat prompt '>'. Di sini Anda dapat mengetikkan variabel atau objek apa pun (misalnya objek DOM) yang ingin Anda periksa nilai saat ini, dan nilainya akan ditampilkan.
Chris Halcrow
sumber
2

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"

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

Kemudian tambahkan yang berikut ini

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

Ini berfungsi untuk saya di Nexus 5, Phonegap 3.7.0.

<preference name="phonegap-version" value="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/

brunettdan
sumber
BEJEEZUS KUDUS !!! AKU AKHIRNYA bisa men-debug apk saya !!! Terima kasih banyak, saya tidak tahu mengapa ini tidak di tempat lain yang lebih menonjol. Termasuk catatan ini kata demi kata dalam readme proyek saya.
Josh
2

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

chmod +x monitor
./monitor

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/

Faraz Kelhini
sumber
Untuk pengguna Linux, tergantung pada metode instalasi SDK Anda, mungkin juga ditemukan di ~ / Android / SDK / tools / monitor atau coba saja mengetik monitor.
Strixy
2

Anda juga dapat men-debug dengan chrome aplikasi HTML5 Anda

Saya membuat .bat untuk membuka chrome dalam mode debug

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security
dpfauwadel
sumber
1
Terima kasih tetapi saya menemukan pendekatan terbaik adalah dengan menggunakan weinre untuk men-debug desing dengan browser webkit terintegrasi dari perangkat itu sendiri!
numediaweb
1
Saya kedua itu, sedangkan riak memberi Anda ide rata-rata tentang bagaimana akan terlihat ketika Anda melepaskannya, yang bagus, kadang-kadang ada perbedaan membandingkan emulator dan perangkat nyata, terutama karena emulator bekerja dengan mesin browser web Anda ' sedang menjalankannya, yang tidak sama dalam beberapa situasi karena perangkat Anda akan berfungsi. Jadi saya biasanya menggunakan keduanya, riak untuk merancang UI, dan kami untuk menguji perilaku ketika sesuatu tidak berfungsi seperti yang diharapkan
Juan Carlos Alpizar Chinchilla
2

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.

  1. Aktifkan mode pengembang di perangkat Android Anda (buka pengaturan -> tentang ponsel -> ketuk 7x pada nomor build).

  2. Hubungkan komputer Anda dengan ponsel Anda melalui kabel USB.

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

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

Tadej
sumber
Ini berfungsi di ponsel saya (android 6) tetapi tidak berfungsi di tablet saya (note 8 android 4.4)
Danielo515
Itu masalah dengan tampilan web android. Memasang plugin crosswalk memungkinkan saya melakukan debugging seperti ini di perangkat yang lebih lama (hingga jelly bean)
Danielo515
1

Aku sangat mencintai kita! Bagaimana cara menggunakannya:

Pertama, kenakan index.html(pastikan app.settings.debugUrldiatur sebelum ini):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

Kemudian:

Berdasarkan pada http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

brauliobo
sumber
Weinre bukan debugger, itu hanya memungkinkan inspeksi DOM, Anda tidak dapat men-debug js dan bahkan menonton pesan konsol,
Bogdan Mart