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

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?

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.

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

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

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

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/

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.

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 .

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.

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

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

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?

Pada Android 4.4+ w / SDK diinstal:

adb logcat chromium:D SystemWebViewClient:D \*:S

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.

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/

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/

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

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.

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:

• Install: sudo npm install -g weinre
• Lari: weinre --boundHost -all-
• buka di browser: http: // localhost: 8080 / client / # anonymous
• target menonton muncul saat Anda membuka aplikasi

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

Perangkat dengan android <= 4.0.4 perlu menambahkan plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt