Pratinjau dan debug program mini - SuperApp

Anda dapat melakukan pratinjau dan debug program mini di Visual Studio Code atau menggunakan ekstensi Visual Studio Code untuk WindVane pada simulator Android atau iOS.

Jika Anda tidak perlu men-debug API JavaScript WindVane, gunakan Visual Studio Code.
Jika Anda perlu men-debug API JavaScript WindVane, gunakan ekstensi Visual Studio Code untuk WindVane pada simulator Android atau iOS.

Topik ini menjelaskan metode untuk mempratinjau dan men-debug program mini.

Pratinjau dan debug program mini di Visual Studio Code

Di Visual Studio Code, klik Preview Miniapp. Tentukan apakah akan menjalankan perintah npm start dari daftar drop-down yang muncul di bagian atas Visual Studio Code.
- Ya (Program mini dapat dipratinjau.): Program mini Anda sedang berjalan. Anda dapat mempratinjau program mini dengan memasukkan URL program mini. Jika Anda memilih opsi ini, kotak teks akan muncul di bagian atas Visual Studio Code. Masukkan URL program mini Anda. Jendela pratinjau akan muncul.
- Tidak (Program mini harus dimulai terlebih dahulu.'npm start' atau perintah mulai akan dipanggil.): Program mini Anda belum dimulai. Anda harus menjalankan perintah npm start untuk memulai program mini. Jika Anda memilih opsi ini, ekstensi Visual Studio Code untuk WindVane menjalankan perintah npm start di CLI perangkat lokal Anda untuk memulai program mini. Setelah program mini dimulai, kotak teks akan muncul di bagian atas ekstensi Visual Studio Code untuk WindVane. Anda dapat memasukkan URL yang ditampilkan dalam log npm start untuk membuka jendela pratinjau.
Masukkan URL program mini Anda di kotak teks yang muncul di bagian atas Visual Studio Code.
Catatan
Paket npm digunakan untuk mengembangkan, memulai, dan mengelola program mini. Anda dapat menjalankan perintah npm start untuk memulai program mini Anda. Jika Anda tidak dapat memulai program mini dengan menjalankan perintah npm start, Anda dapat mengubah parameter EMAS:Start Command di pengaturan ekstensi Visual Studio Code untuk WindVane untuk menentukan perintah startup untuk program mini. Setelah Anda memulai program mini Anda, server lokal tempat program mini dimulai dibuat di Node.js. Anda dapat mempratinjau program mini Anda di server lokal tersebut. Untuk mempratinjau program mini Anda, Anda harus menentukan URL server lokal tempat program mini Anda berjalan. URL ini adalah URL pratinjau program mini dan berada dalam format http://localhost:<Nomor port> atau http://<Alamat IP perangkat lokal Anda>:<Nomor port>.
Sebagai contoh, setelah proyek kerangka kerja untuk program mini Anda diinisialisasi menggunakan ekstensi Visual Studio Code untuk WindVane, port default 3000 digunakan. Anda dapat memasukkan http://<Alamat IP perangkat lokal Anda>:3000 di ekstensi Visual Studio Code untuk WindVane untuk mempratinjau program mini Anda. Jika port 3000 sudah digunakan, CLI akan memberi tahu Anda untuk mengubah nomor port saat Anda menjalankan perintah npm start. Jika Anda mengubah nomor port menjadi 3001, Anda dapat memasukkan http://<Alamat IP perangkat lokal Anda>:3001 untuk mempratinjau program mini.
Setelah Anda memasukkan URL pratinjau program mini, jendela pratinjau akan muncul di ekstensi Visual Studio Code untuk WindVane, seperti yang ditunjukkan pada gambar berikut.
Jalankan perintah Developer: Toggle Developer Tools untuk masuk ke konsol debugging, dan debug program mini di Visual Studio Code.

Pratinjau dan debug program mini di simulator

Penting

Untuk meningkatkan efisiensi pengembangan, setelah melakukan operasi pratinjau, simulator hanya akan menginstal aplikasi debug selama pratinjau pertama. Jika simulator target sudah berisi aplikasi debug, aplikasi tersebut tidak akan ditimpa. Jika Anda mengalami pengecualian panggilan JSAPI setelah pratinjau, itu mungkin karena simulator tidak memiliki aplikasi debug terbaru yang diinstal. Dalam hal ini, Anda perlu secara manual menghapus aplikasi debug di simulator dan melakukan pratinjau lagi.

Simulator Android

Klik Preview Miniapp in Android Emulator untuk memulai simulator Android.
Setelah simulator dimulai, kotak teks akan muncul di bagian atas Visual Studio Code. Masukkan URL pratinjau program mini Anda.
Catatan
Untuk mempratinjau program mini di simulator, program mini harus berjalan dan URL program mini harus tersedia. Jika Anda tidak dapat memperoleh URL program mini, program mini mungkin tidak dalam keadaan berjalan. Anda dapat mengklik Preview Miniapp dan memilih opsi No(The miniapp must be started first.'npm start' or start command will be called) dalam pesan yang muncul untuk memulai program mini. Anda juga dapat menjalankan perintah npm start di CLI perangkat lokal Anda untuk memulai program mini.
Setelah program mini dimulai, URL pratinjau dihasilkan untuk program mini. URL tersebut berada dalam format http://localhost:<Nomor port> atau http://<Alamat IP perangkat lokal Anda>:<Nomor port>. Sebagai contoh, jika Anda menggunakan template yang disediakan oleh ekstensi Visual Studio Code untuk WindVane untuk menginisialisasi proyek kerangka kerja, URL pratinjau berikut dihasilkan: http://<Alamat IP perangkat lokal Anda>:3000.
Setelah Anda memasukkan URL, simulator memulai kerangka kerja dan memuat URL program mini.
Buka Chrome dan masukkan chrome://inspect/#devices di bilah alamat. Informasi simulator ditampilkan di halaman yang muncul. Objek WebView tempat Anda dapat men-debug program mini muncul di Chrome setelah kerangka kerja dimulai.
Klik inspect di bawah informasi simulator di DevTools, lalu debug program mini di objek WebView.

Simulator iOS

Buka Safari, pilih Safari > Preferences > Advanced, lalu pilih Show Develop menu in menu bar untuk mengaktifkan fitur Pengembang Safari.
Klik Preview Miniapp in iOS Emulator untuk memulai simulator iOS. Jika beberapa simulator tersedia di perangkat lokal Anda, daftar drop-down akan muncul. Anda harus menentukan simulator untuk ekstensi Visual Studio Code untuk WindVane untuk memulai simulator.
Setelah simulator dimulai, kotak teks akan muncul di bagian atas Visual Studio Code. Masukkan URL pratinjau program mini Anda.
Catatan
Untuk mempratinjau program mini di simulator, program mini harus berjalan dan URL program mini harus tersedia. Jika Anda tidak dapat memperoleh URL program mini, program mini mungkin tidak dalam keadaan berjalan. Anda dapat mengklik Preview Miniapp dan memilih opsi No(The miniapp must be started first.'npm start' or start command will be called) dalam pesan yang muncul untuk memulai program mini. Anda juga dapat menjalankan perintah npm start di CLI perangkat lokal Anda untuk memulai program mini.
Setelah program mini dimulai, URL pratinjau dihasilkan untuk program mini. URL tersebut berada dalam format http://localhost:<Nomor port> atau http://<Alamat IP perangkat lokal Anda>:<Nomor port>. Sebagai contoh, jika Anda menggunakan template yang disediakan oleh ekstensi Visual Studio Code untuk WindVane untuk menginisialisasi proyek kerangka kerja, URL pratinjau berikut dihasilkan: http://<Alamat IP perangkat lokal Anda>:3000.
Di Safari, pilih Develop > Simulator. Semua objek WebView yang dapat Anda inspeksi ditampilkan.
Klik objek WebView yang ingin Anda inspeksi, lalu debug program mini di Web Inspector.