2 adalah lintas platform. Ia bekerja di mana pun node dan npm bekerja. Satu-satunya persyaratan adalah untuk npx , yang membutuhkan npm versi 5. 2 atau lebih besar dan npm init yang membutuhkan versi npm lebih besar dari 6. 0. Jika Anda terjebak pada versi npm yang lebih lama, Anda masih dapat menggunakan 2 dengan menjalankan perintah berikut untuk menginstal proyek secara global Show
Kemudian Anda dapat menggunakan _2 seperti pada contoh berikut _Menginstal Versi TertentuAnda juga dapat menginstal versi tertentu
BERKONTRIBUSIMenyiapkan Salinan Lokal
catatan. Anda dapat menggunakan 3 dari 2 tanpa menjalankan 0 juga dimungkinkan untuk menjalankan secara langsung titik masuk NodeJS 6 atau 7 8 adalah folder yang diabaikan git, jadi Anda harus menggunakan folder ini untuk pengujian Bab ini menjelaskan prosedur dan alat yang tersedia untuk mengembangkan aplikasi HTML5 di NetBeans IDE, termasuk informasi tentang cara membuat, menjalankan, mengintegrasikan, dan men-debug aplikasi Anda Bab ini berisi bagian-bagian berikut 19. 1 Tentang Mengembangkan Aplikasi HTML5Proyek aplikasi HTML5 adalah aplikasi yang ditampilkan di browser di desktop atau perangkat seluler Anda. Aplikasi HTML5 biasanya terdiri dari file HTML, CSS, dan JavaScript. JavaScript yang digunakan untuk memanipulasi dan memproses objek dalam aplikasi umumnya ditangani di sisi klien oleh mesin JavaScript di browser web. Aplikasi HTML5 sering digunakan sebagai klien yang menggunakan berbagai layanan web. IDE menyediakan alat berikut untuk mendukung pengembangan aplikasi HTML5 dan HTML5 dalam aplikasi web PHP dan Java
IDE juga menyediakan alat untuk mengemas aplikasi HTML5 sebagai aplikasi seluler asli melalui Apache Cordova 19. 2 Bekerja dengan Aplikasi HTML5Alur kerja berikut menunjukkan cara bekerja dengan aplikasi HTML5 Cara mengembangkan aplikasi HTML5 19. 3 Membuat Proyek Aplikasi HTML5IDE menyediakan panduan untuk membuat proyek HTML5 dan file HTML, CSS, dan JavaScript yang biasanya berisi proyek HTML5. Saat Anda menggunakan panduan Proyek Baru untuk membuat proyek HTML5, Anda memiliki opsi untuk membuat proyek berdasarkan templat situs. Dalam wisaya Anda dapat menentukan templat situs yang terletak di sistem lokal Anda atau mengunduh salah satu templat situs yang tercantum dari repositori online Untuk membuat proyek aplikasi HTML5
Saat Anda mengklik Selesai, IDE akan membuat proyek dan menampilkan simpul untuk proyek tersebut di jendela Proyek 19. 3. 1 Cara Membuat Aplikasi HTML5 untuk Platform SelulerIDE menyertakan templat situs HTML5 yang memungkinkan Anda membuat aplikasi seluler dengan mudah yang dibangun di atas platform Cordova. Cordova memungkinkan Anda membuat aplikasi yang memanfaatkan beberapa fungsi asli yang disediakan di perangkat seluler Android dan iOS. Anda dapat membuat aplikasi HTML5 menggunakan template Cordova atau menambahkan dukungan untuk Cordova ke aplikasi HTML5 Anda Anda harus menginstal Cordova di sistem lokal Anda sebelum dapat membuat proyek Cordova. IDE akan meminta Anda untuk menginstal Cordova jika instalasi Cordova Anda tidak terdeteksi saat Anda membuat aplikasi Cordova atau saat Anda menambahkan dukungan untuk Cordova ke aplikasi. Anda dapat menemukan petunjuk penginstalan dan detail tambahan tentang platform di situs berikut Catatan IDE menggunakan Git dan NodeJS untuk bekerja dengan Cordova. Anda harus mengonfigurasi pengaturan proxy untuk Git dan NodeJS dengan benar jika Anda menggunakan proxy Untuk mengembangkan aplikasi untuk platform seluler, Anda harus terlebih dahulu menginstal perangkat lunak platform yang diperlukan dan platform tersebut harus dikenali oleh IDE. Jika Anda mengembangkan untuk platform Android, Anda perlu menentukan lokasi SDK Android di sistem lokal Anda Catatan Perangkat iOS dan emulator hanya tersedia di OS X. IDE secara otomatis mendeteksi detail penginstalan iOS di OS X Cara mendaftarkan platform seluler Android dengan IDE
Cara membuat aplikasi Cordova baru
Bagaimana cara menambahkan dukungan Cordova ke aplikasi HTML5
Bagaimana cara menambahkan plugin Cordova ke aplikasi Cordova
19. 3. 2 Cara Menambahkan Dukungan untuk Fitur HTML5 ke AplikasiAnda dapat memasukkan JavaScript dan CSS ke aplikasi web Java dan aplikasi PHP dengan menambahkan file ke proyek. Anda juga dapat menggunakan jendela Properti Proyek untuk menyertakan pustaka JavaScript dan mengonfigurasi praprosesor CSS yang ingin Anda gunakan dalam proyek. Anda dapat menjalankan aplikasi di browser seluler dan di perangkat Android dan iOS serta emulator dan men-debug file JavaScript. Tidak perlu mengubah jenis proyek aplikasi atau membuat proyek baru Cara menambahkan pustaka JavaScript ke web Java atau aplikasi PHP
19. 4 Menjalankan Aplikasi HTML5Proyek aplikasi HTML5 biasanya dijalankan di browser di desktop atau perangkat seluler Anda. Saat Anda menjalankan aplikasi HTML5 di sistem lokal Anda untuk pengujian atau debug, Anda tidak perlu mengompilasi atau menerapkan aplikasi ke server karena mesin JavaScript di browser biasanya menangani semua skrip di aplikasi. Untuk menjalankan aplikasi Anda terlebih dahulu menentukan browser dan kemudian menjalankan aplikasi Anda dapat menjalankan aplikasi HTML5 pada emulator untuk platform seluler atau menerapkan aplikasi ke perangkat seluler 19. 4. 1 Cara Menentukan BrowserSaat Anda ingin menjalankan aplikasi atau file HTML5 dari IDE, Anda perlu menentukan browser target. IDE memungkinkan Anda untuk dengan mudah memilih salah satu browser yang diinstal pada sistem lokal Anda atau browser WebKit tertanam. Jika Anda sedang mengembangkan aplikasi untuk perangkat seluler, Anda dapat memilih untuk menjalankan aplikasi di emulator untuk perangkat seluler atau menerapkan langsung ke perangkat seluler Untuk menentukan browser untuk aplikasi HTML5
Daftar browser diatur dalam tabel untuk membantu Anda memilih browser target. Jika Anda memilih browser atau perangkat di baris atas tabel, Anda dapat men-debug aplikasi di IDE dan menggunakan fitur lain yang disediakan saat IDE terintegrasi dengan browser. Tabel mengatur browser di kolom berikut
Anda harus menginstal Apache Cordova di mesin lokal Anda jika ingin menentukan target di kolom Cordova Jika Anda ingin menjalankan aplikasi di browser pada perangkat seluler Android atau di emulator Android, Anda perlu menginstal Android SDK di sistem lokal Anda dan mendaftarkan lokasi Android SDK di jendela Opsi. Perangkat dan simulator iOS hanya tersedia di OS X Jika Anda ingin men-debug aplikasi atau file HTML5, atau menyinkronkan IDE dengan browser Anda untuk memeriksa kode Anda, Anda harus memilih Chrome dengan Konektor NetBeans atau Browser WebKit Tertanam sebagai browser target 19. 4. 2 Cara Menjalankan AplikasiSetelah Anda menentukan browser, Anda dapat menjalankan aplikasi dengan cara berikut
Saat Anda menjalankan aplikasi, IDE secara otomatis membuka aplikasi di browser atau perangkat seluler yang dipilih dan membuka Log Browser di jendela Keluaran Jika lebih dari satu proyek terbuka, Anda dapat menentukan salah satu proyek sebagai Proyek Utama. Setelah Anda menentukan proyek sebagai Proyek Utama, pintasan keyboard F6 akan selalu menjalankan Proyek Utama terlepas dari proyek yang dipilih di jendela Proyek 19. 4. 3 Cara Menjalankan FileAnda dapat menjalankan file HTML dalam aplikasi HTML5 dengan cara berikut
Saat Anda menjalankan file, IDE membuka file di browser target untuk aplikasi tersebut 19. 5 Mengintegrasikan Proyek HTML5 dengan BrowserEkstensi NetBeans tersedia untuk browser Chrome yang memungkinkan IDE dan browser untuk berkomunikasi. Untuk mengintegrasikan IDE dengan browser Chrome, Anda perlu memasang ekstensi NetBeans Connector dari Toko Web Chrome atau memasang ekstensi secara manual. Setelah Anda menginstal ekstensi, Anda dapat melakukan tugas berikut di browser Chrome
Jangan tutup bilah info di tab di browser Chrome yang memberi tahu Anda bahwa "Konektor NetBeans sedang men-debug tab ini". Menutup bilah info akan memutus IDE dari browser Chrome. Untuk menyambungkan kembali IDE, tutup tab tempat aplikasi berjalan dan jalankan kembali aplikasi dari IDE Catatan. Anda hanya perlu menginstal ekstensi satu kali 19. 5. 1 Cara Memasang Ekstensi dari Toko Web ChromeSetelah mengunduh, Anda dapat melakukan langkah-langkah berikut untuk menginstal ekstensi NetBeans untuk browser Chrome Untuk menginstal ekstensi NetBeans untuk Chrome
19. 5. 2 Cara Memasang Ekstensi Secara ManualJika Anda tidak dapat terhubung ke Toko Web Chrome, Anda dapat memasang ekstensi Konektor NetBeans secara manual dengan melakukan langkah-langkah berikut Untuk menginstal ekstensi Chrome secara manual
19. 6 Memeriksa Kode HTML5 dengan BrowserAnda dapat menggunakan mode Inspeksi untuk membantu Anda menemukan dan mengedit kode sumber di aplikasi HTML5. Saat mode Inspeksi diaktifkan, informasi tentang beberapa tindakan yang Anda lakukan di browser seperti memilih dan menyorot elemen dikomunikasikan ke IDE. Saat Anda menjalankan aplikasi, Anda dapat menggunakan browser untuk membantu menemukan elemen HTML dalam kode sumber Anda. Saat Anda memilih atau menempatkan kursor di atas elemen di jendela browser, elemen tersebut secara bersamaan disorot atau dipilih di jendela DOM Browser IDE. Saat Anda memilih elemen, aturan gaya untuk elemen tersebut secara otomatis ditampilkan di tab Pilihan di jendela Gaya CSS Untuk memeriksa aplikasi Anda dengan browser
Saat Anda memindahkan kursor atau memilih elemen di browser, konten jendela berikut di IDE diperbarui untuk disinkronkan dengan tindakan Anda di browser
Saat Anda mengaktifkan mode Inspeksi di browser, elemen apa pun yang berada dalam status 'hover' akan tetap dalam status hingga Anda menonaktifkan mode Inspeksi. Anda dapat memilih elemen dalam status hover dan memeriksa serta memodifikasi properti status hover dan melihat perubahan pada elemen di browser Anda Untuk mengaktifkan mode Inspeksi di browser Chrome, Anda perlu menginstal ekstensi NetBeans untuk mengintegrasikan IDE dengan browser 19. 7 Mengubah Ukuran Layar BrowserSatu aplikasi HTML5 dapat dilihat di berbagai perangkat dengan ukuran layar berbeda. IDE dapat membantu Anda mengembangkan proyek yang dapat merespons dan beradaptasi dengan perangkat tampilan yang berbeda dengan memungkinkan Anda melihat halaman pada ukuran layar yang berbeda. Saat Anda menjalankan aplikasi HTML5 dari IDE, Anda dapat memilih untuk melihat halaman dalam salah satu ukuran layar default atau membuat ukuran layar kustom Anda dapat melihat aplikasi Anda di browser apa pun, tetapi jika Anda ingin dapat dengan cepat beralih di antara ukuran layar, Anda perlu menentukan salah satu browser terintegrasi berikut sebagai browser target
Saat Anda melihat aplikasi di salah satu browser terintegrasi, Anda dapat memilih ukuran tampilan di menu di browser Anda dapat menentukan browser target untuk aplikasi di jendela Project Properties atau di daftar drop-down Set Project Configuration di toolbar IDE 19. 7. 1 Cara Beralih Antar Ukuran LayarPeramban terintegrasi menyediakan menu yang memungkinkan Anda beralih di antara ukuran layar umum yang telah dikonfigurasi sebelumnya di menu. Saat Anda memilih ukuran layar baru, area tampilan browser akan diubah ukurannya ke ukuran yang dipilih. Dengan mengubah ukuran layar, Anda dapat melihat bagaimana tata letak aplikasi merespons berbagai ukuran, misalnya, sebagai hasil dari kueri media yang ditentukan dalam lembar gaya Setelah Anda meluncurkan aplikasi, Anda dapat memilih ukuran layar dari menu di browser. Lokasi menu untuk memilih opsi ukuran layar bergantung pada browser target
Saat Anda menjalankan aplikasi HTML5, lokasi halaman saat ini ditampilkan di bilah Lokasi. Halaman dirender menggunakan mesin browser WebKit yang berjalan di server ringan tersemat ( 19. 7. 2 Cara Membuat Ukuran Layar KhususAnda dapat membuat ukuran khusus untuk jendela dengan memilih Sesuaikan di menu ukuran layar. Saat Anda memilih Kustomisasi, browser akan menampilkan jendela yang memungkinkan Anda membuat ukuran baru dan mengubah opsi ukuran layar default. Anda juga dapat mengedit isi menu 19. 8 Membuat Template HTML5Template HTML5 memungkinkan Anda dengan cepat membuat proyek HTML5 yang berisi file dan struktur yang didasarkan pada template. Template situs dapat membantu Anda mengembangkan proyek dengan cepat dengan menyediakan beberapa file JavaScript, CSS, dan HTML yang kemudian dapat Anda modifikasi sesuai kebutuhan Anda Saat Anda membuat proyek HTML5 di panduan Proyek Baru, Anda dapat memilih untuk menggunakan templat situs 19. 8. 1 Cara Membuat Templat SitusAnda dapat menggunakan IDE untuk membuat templat situs yang didasarkan pada proyek Anda dengan melakukan langkah-langkah berikut Untuk membuat templat situs
Template apa pun yang Anda simpan ditambahkan secara otomatis ke daftar drop-down Pilih Template di panduan Aplikasi HTML5 Baru 19. 9 Membuat Cascading Style SheetsAnda dapat menghasilkan lembar gaya kaskade (CSS) dari definisi tipe dokumen (DTD) yang ada, membuat lembar gaya kosong dan mengedit file di editor CSS atau menggunakan praprosesor CSS untuk menghasilkan lembar gaya Saat Anda mengedit file CSS, IDE menyediakan jendela dan kotak dialog yang dapat membantu Anda membuat aturan dan deklarasi CSS. Setelah Anda membuat aturan, Anda dapat menambahkan deklarasi ke aturan tersebut dengan mengedit style sheet di editor atau di jendela CSS Styles. Saat mengedit file CSS, Anda dapat memanfaatkan fitur editor standar, termasuk penyelesaian, indentasi, pewarnaan sintaks, dan perintah clipboard standar Jika Anda ingin menggunakan preprocessor CSS untuk menghasilkan style sheet, IDE mendukung sintaks LESS dan Sassy CSS. Untuk mengkompilasi file LESS atau Sass dan menghasilkan style sheet, Anda harus terlebih dahulu menginstal perangkat lunak praprosesor LESS atau Sass di sistem lokal Anda. Setelah Anda menginstal perangkat lunak preprosesor, Anda dapat mengonfigurasi perangkat lunak untuk mengkompilasi file dan menghasilkan file CSS setiap kali file LESS atau Sass disimpan 19. 9. 1 Cara Membuat Lembar Gaya CascadingAnda dapat menggunakan panduan File Baru untuk membuat lembar gaya cascading baru di proyek Anda. Setelah Anda membuat style sheet, Anda dapat melihat file baru di jendela Proyek dan jendela File. Saat Anda membuat lembar gaya, file terbuka di Editor Sumber Untuk membuat lembar gaya kaskade
19. 9. 2 Cara Menambahkan Aturan CSS ke Cascading Style SheetAnda dapat membuat aturan CSS dalam lembar gaya dengan mengetik langsung di editor sumber atau dengan menggunakan kotak dialog Edit Aturan CSS. Anda dapat membuka kotak dialog Edit CSS Rules dari jendela CSS Styles Untuk menambahkan Aturan CSS ke lembar gaya
Setelah Anda mengklik OK Anda dapat melihat bahwa aturan baru terdaftar di jendela CSS Styles dan jendela Navigator dan aturan tersebut ditambahkan ke file CSS di editor 19. 9. 3 Cara Menambahkan Properti ke Aturan CSSAnda dapat menambahkan properti dan nilai ke aturan CSS dengan mengedit style sheet secara manual di editor sumber, dengan memilih nilai di jendela Gaya CSS atau dengan menentukan nilai di kotak dialog Tambahkan Properti Untuk menambahkan properti ke aturan CSS di jendela CSS Styles
Saat Anda menekan tombol kembali, properti dan nilai ditambahkan ke aturan di editor CSS Untuk menambahkan properti ke aturan CSS di kotak dialog Tambahkan Properti
19. 9. 4 Membuat File Preprocessor CSSAnda dapat membuat file praprosesor Sass atau LESS yang dapat dikompilasi untuk menghasilkan file CSS Anda. IDE menyediakan wizard untuk menghasilkan file preprocessor dan untuk mengonfigurasi perangkat lunak preprocessor untuk melihat lokasi perubahan pada file. Anda harus menginstal perangkat lunak preprocessor CSS pada sistem lokal Anda jika Anda ingin mengkompilasi file preprocessor secara lokal untuk menghasilkan file CSS Anda dapat menggunakan penyelesaian kode dan pewarnaan sintaks di editor untuk membantu Anda mengedit file praprosesor CSS Cara membuat file preprocessing CSS
19. 9. 5 Cara Menghasilkan File CSS Menggunakan CSS PreprocessorIDE dapat dikonfigurasi untuk mengkompilasi file praprosesor LESS dan Sass untuk menghasilkan file CSS. Saat Anda mengedit file praprosesor CSS dalam proyek Anda, Anda dapat mengkompilasi file secara lokal untuk melihat bagaimana perubahan Anda memengaruhi tata letak aplikasi. Perangkat lunak praprosesor CSS harus diinstal pada sistem lokal Anda jika Anda ingin mengompilasi file secara lokal Anda dapat menemukan instruksi untuk menginstal LESS dan Sass di situs berikut Jika Anda ingin file preprocessor dikompilasi secara otomatis saat Anda menyimpannya, Anda perlu mendaftarkan perangkat lunak preprocessor CSS dengan IDE. Anda dapat menentukan lokasi executable untuk perangkat lunak praprosesor CSS di jendela Opsi Cara mendaftarkan perangkat lunak preprocessor CSS di IDE
Anda dapat mengonfigurasi perangkat lunak untuk melihat lokasi file praprosesor di aplikasi Anda dan mengompilasi file CSS secara otomatis saat file praprosesor disimpan. Anda dapat mengaktifkan compile on save untuk file preprocessor CSS saat Anda membuat file atau di jendela Project Properties Catatan Jika Anda mengubah file CSS yang dihasilkan, perubahan Anda akan hilang saat berikutnya file praprosesor CSS dikompilasi Cara mengaktifkan compile on save di jendela Project Properties
19. 10 Membuat File JavaScriptIDE menyediakan wizard untuk membuat file JavaScript dan dukungan untuk JavaScript di editor sumber. Saat Anda menjalankan aplikasi, tab Log Browser terbuka di jendela Keluaran 19. 10. 1 Cara Membuat File JavaScriptAnda dapat menambahkan file JavaScript ke proyek Anda dengan salah satu dari dua cara
Anda dapat menggunakan panduan File Baru untuk menambahkan file JavaScript ke proyek kapan saja. Anda juga dapat menggunakan wizard untuk membuat file fungsi JavaScript umum yang dapat Anda gunakan untuk menyediakan fungsionalitas ke beberapa proyek HTML5 atau web. Jika kategori HTML atau Web tidak tersedia dalam instalasi Anda, Anda dapat memilih File JavaScript di kategori Lainnya di wizard File Baru. Jika Anda ingin file JavaScript terlihat di jendela Proyek, buat file JavaScript di subfolder proyek yang sesuai, seperti Template default yang digunakan untuk file JavaScript hanya berisi informasi lisensi. Anda dapat menggunakan Pengelola Template untuk memodifikasi template JavaScript Untuk membuat file JavaScript mandiri
Untuk mengedit template File JavaScript
19. 10. 2 Cara Mengedit File JavaScriptAnda dapat mengedit file JavaScript di editor sumber. Editor sumber menyediakan fitur standar seperti penyelesaian kode dan pewarnaan sintaks. Editor menyediakan penyorotan kode untuk metode dan variabel, serta variabel global dan properti objek literal. Saat file JavaScript dibuka di editor sumber, jendela Navigator menampilkan struktur file JavaScript dan memungkinkan Anda menavigasi ke elemen dalam kode dengan mudah. Fitur pengeditan JavaScript juga berfungsi untuk kode JavaScript yang disematkan dalam file PHP, JSP, dan HTML IDE menyediakan beberapa template kode JavaScript untuk membantu Anda menghasilkan kode. Anda dapat melihat daftar templat kode JavaScript default dan menambahkan templat kode Anda sendiri di tab Templat Kode di kategori Editor di jendela Opsi IDE menyediakan alat untuk membantu Anda dengan kode JavaScript Anda. Saat Anda mengedit kode, parser berjalan di latar belakang dan memberikan peringatan dan petunjuk mendetail untuk mengatasi potensi masalah. Anda dapat mengonfigurasi petunjuk JavaScript yang ditampilkan di jendela Opsi. Saat Anda mengedit file JavaScript, Anda dapat menggunakan jendela Log Peramban untuk mengevaluasi ekspresi JavaScript Penyelesaian kode JavaScript memberi Anda pilihan kelas inti JavaScript bawaan IDE untuk dimasukkan ke dalam kode Anda dan dapat menunjukkan kepada Anda metode yang tersedia untuk string JavaScript. Penyelesaian kode berfungsi dengan semua tipe literal dalam JavaScript. Mesin analisis tipe dan penyelesaian kode juga mengetahui tentang kelas gaya prototipe (hanya fungsi reguler) dan operator untuk membangunnya NetBeans IDE berkonsultasi dengan parameter tipe untuk parameter fungsi dan tipe pengembalian ( Untuk mengedit file JavaScript
19. 10. 3 Cara Men-debug File JavaScriptAnda dapat menggunakan IDE untuk men-debug file JavaScript di aplikasi HTML5. Proses debug JavaScript dimulai secara otomatis saat Anda menjalankan pengujian aplikasi atau unit di salah satu browser yang mendukung proses debug. Saat Anda men-debug aplikasi, jendela berikut memberikan detail debug Tabel 19-1 JavaScript Debugging Windows Deskripsi JendelaJendela breakpoint Menampilkan daftar breakpoint di semua aplikasi yang terbuka Jendela Tumpukan Panggilan Menampilkan tumpukan eksekusi saat ini dari program JavaScript Jendela variabel Menampilkan variabel dan jam tangan yang valid dalam cakupan saat ini Anda dapat membuat jam tangan baru dari jendela Variabel. Untuk detail tentang membuat jam tangan, lihat Log Peramban Menampilkan pengecualian, kesalahan, dan peringatan yang dihasilkan oleh browser Saat Anda menjalankan aplikasi, debugger akan menjeda eksekusi aplikasi pada breakpoint pertama dalam JavaScript yang ditemui dan file JavaScript yang berisi breakpoint terbuka di editor. IDE juga secara otomatis membuka jendela debugger JavaScript. Anda dapat menggunakan tombol debug di bilah alat untuk menjelajahi file JavaScript Untuk men-debug file JavaScript di IDE, IDE harus dapat berkomunikasi dengan debugger. Untuk menggunakan debugger JavaScript di IDE, Anda harus memilih salah satu opsi browser berikut sebagai browser target Tabel 19-2 Browser yang mendukung JavaScript Debugging Deskripsi BrowserBrowser WebKit Tertanam IDE menyertakan browser yang didasarkan pada WebKit. Browser WebKit tertanam memungkinkan Anda untuk melihat dan men-debug aplikasi HTML5 di IDE. Jika Anda memilih Browser WebKit Tertanam sebagai browser di jendela Properti Proyek, IDE akan membuka browser di jendela di IDE saat Anda menjalankan aplikasi dan proses debug diaktifkan secara otomatis Chrome dengan Konektor NetBeans IDE menyertakan ekstensi yang dapat Anda instal di browser Chrome yang memungkinkan IDE dan browser untuk berkomunikasi. Jika Anda memilih Chrome dengan NetBeans Connector sebagai browser di jendela Properties, IDE akan membuka browser Chrome saat Anda menjalankan aplikasi. Debugging diaktifkan secara otomatis jika ekstensi dipasang saat Anda menjalankan aplikasi. Jika ekstensi tidak terpasang, IDE akan meminta Anda untuk memasang ekstensi 19. 10. 4 Cara Mengatur Breakpoints JavaScriptUntuk men-debug JavaScript di aplikasi Anda di IDE, Anda perlu menentukan breakpoint yang akan menjeda eksekusi skrip saat ditekan. Anda dapat menyetel breakpoint JavaScript berikut di IDE Tabel 19-3 Jenis Titik Hentakan JavaScript Deskripsi titik hentiDOM Gunakan breakpoint ini untuk men-debug perubahan yang dibuat pada pohon DOM Garis Gunakan breakpoint ini untuk men-debug baris kode tertentu di file JavaScript Anda Peristiwa Gunakan breakpoint ini untuk men-debug tindakan di aplikasi Anda yang dipanggil oleh peristiwa XMLHttpRequest Gunakan breakpoint ini untuk men-debug permintaan URL Untuk membuka kotak dialog New Breakpoint
Langkah-langkah untuk menyetel breakpoint JavaScript akan bergantung pada jenis breakpoint Untuk menyetel breakpoint DOM
Untuk mengatur breakpoint baris
Untuk mengatur breakpoint acara
Untuk menyetel breakpoint XMLHttpRequest
19. 10. 5 Cara Menjalankan Tes Unit pada File JavaScriptAnda dapat mengonfigurasi IDE untuk menggunakan JS Test Driver atau Karma untuk menjalankan pengujian unit untuk file JavaScript Anda. Untuk menggunakan runner pengujian, Anda perlu menginstal runner pengujian, lalu mengonfigurasi runner pengujian untuk menentukan browser dan framework pengujian yang ingin digunakan oleh runner pengujian dan file yang akan dimuat saat menjalankan pengujian. Setelah Anda mengonfigurasi pelari pengujian untuk aplikasi Anda, Anda dapat menjalankan pengujian dari jendela Proyek. Anda dapat melihat hasil pengujian di jendela Keluaran IDE Debugging pengujian unit diaktifkan secara otomatis jika Anda menetapkan Chrome dengan NetBeans Connector sebagai salah satu browser JS Test Driver saat Anda mengonfigurasi JS Test Driver di jendela Layanan Untuk menjalankan pengujian unit dengan JS Test Driver
Saat Anda mengklik Uji, IDE menjalankan pengujian unit. Anda dapat membuka jendela Test Results untuk melihat hasilnya. Anda dapat melihat detail tentang tes khusus di jendela Keluaran Catatan Untuk menggunakan JS Test Driver di IDE Anda perlu mendownload JS Test Driver JAR yang tersedia dari lokasi berikut
Situs JS Test Driver juga menyediakan dokumentasi dan detail tentang penggunaan JS Test Driver 19. 10. 6 Cara Menambahkan Perpustakaan JavaScript ke ProyekJika Anda menggunakan pustaka JavaScript yang akan menyediakan fungsionalitas tertentu dalam proyek Anda, Anda dapat menggunakan panduan Proyek Baru untuk menambahkan pustaka ke proyek saat Anda membuat proyek atau menambahkan pustaka JavaScript ke proyek di jendela Properti Proyek Untuk menambahkan library JavaScript ke HTML5 atau aplikasi web
|