Pada video sebelumnya, kita sudah mempelajari mengenai cara membuat perulangan, baik dengan menggunakan while, do while, dan for. Dan dari video sebelumnya lagi, kita juga sudah belajar mengenai cara membuat percabangan, baik menggunakan if dan switch.

Nah, bagi teman-teman yang masih baru di dunia pemograman, mungkin masih bingung ya dengan control flow seperti ini. Karena kalau kita menuliskan kode biasa, alur kerjanya sudah pasti dari atas ke bawah. Setelah masuk ke control flow, arahnya bisa berubah sehingga membingungkan. Contohnya seperti diagram do while yang di layar ini. Setelah mengerjakan statement kedua, browser memeriksa kondisi, kemudian alur kerjanya malah naik keatas, kembali ke statement kedua. Dan bisa terjadi secara berulang-ulang.

Tentunya kita ingin agar kita bisa menelusuri bagaimana cara kerja dari script yang sudah kita tulis. Bagi yang sudah pernah menuliskan kode menggunakan IDE, pastinya sudah tau dan sudah pernah terbantu ya, dengan fitur-fitur seperti break point, step. Atau fitur seperti watch dimana kita bisa mengamati isi dari variable kita ketika eksekusi script sedang berada di baris sekian. Nah fitur-fitur seperti ini ternyata sudah ada di Chrome Developer Tools. Dan di video ini, kita akan belajar mengenai cara menggunakannya untuk menelusuri script yang sudah kita buat.

Oke, sekarang kita masuk ke praktikum. Saya sudah membuatkan kode sederhana untuk praktek kali ini. Kita bahas sebentar kodenya. Pada baris pertama kita membuat variable message yang isinya “Hello World”. Kemudian kita melakukan perulangan sebanyak tiga kali, dimana di dalamnya kita memeriksa apakah nilai i habis dibagi dua? Apabila benar, maka kita tulis i adalah genap. Sedangkan bila salah maka kita tulis i adalah ganjil. Keluar dari perulangan, kita tulis “Akhir script”.

Kita coba jalankan script ini di browser. Lalu kita lihat hasilnya di console. Terlihat ada perulangan sebanyak tiga kali ya, dari angka 0 hingga 2. Dan apabila angkanya genap, maka tulisannya adalah genap. Dan bila angkanya ganjil, maka tulisannya adalah ganjil. Di bagian akhir ada tulisan lagi "Akhir script".

Nah, untuk menggunakan Chrome Developer Tools sebagai Debug Mode, kita bisa mengklik ke tab Sources. Lalu pada bagian kiri, kita pilih Page. Dan kita pilih file javascript kita, yaitu perulangan.js.

Pada sebelah kiri dari source code, terdapat nomor barisnya. Nomor baris ini bisa kita klik untuk memberikan breakpoint pada baris ini. Perhatikan kalau saya klik, maka nomor baris tersebut berubah menjadi warna biru. Artinya breakpoint di baris ke tiga. Nantinya pada saat browser mengeksekusi baris ketiga, maka browser akan berhenti dan masuk ke debug mode.

Kita coba ya. Agar browser mengeksekusi ulang script kita, maka kita perlu melakukan reload, atau menekan tombol f5. Nah perhatikan bahwa browser telah berhenti. Ada tulisan paused in debugger. Browser berhenti pada breakpoint kita, ditandai dengan warna latar belakang biru pada source code.

Ada beberapa hal yang menarik yang bisa kita lihat di sebelah kanan source code ya. Yang pertama adalah breakpoints. Tadi kita memberikan breakpoint di baris ketiga dengan kode for, bisa dilihat disini. Kalau misalkan kita tambahkan lagi breakpoint baru di baris kelima, maka isi breakpoints akan bertambah ya, baris kelima dengan kode if. Kita bisa menghapus sementara breakpoint dengan cara mengklik checkbox dari daftar breakpoints, atau menghapus permanen dengan cara mengklik nomor barisnya.

Lalu ada bagian Scope, dimana Chrome secara otomatis memperlihatkan semua variable yang sedang aktif di memory. Disini ada variable i yang berada di dalam block. Artinya variable i hanya bisa diakses dari dalam blok kode for ini saja. Diluar dari for, variable i sudah tidak ada. Kemudian ada variable message yang berada di bagian script, artinya variable ini bisa diakses dari bagian mana saja di dalam script kita. Yang menariknya lagi, kita bisa melihat isi dari masing-masing variable. Variable i masih undefined karena kita masih belum menjalankan kode inisialisasinya. Sedangkan variable message sudah berisi string "Hello World".

Lalu ada bagian Watch, dimana kita bisa menambahkan secara khusus variable-variable yang hendak kita awasi. Kalau kita sedang mengerjakan proyek besar, kemungkinan pada script kita terdapat banyak sekali variable yang secara otomatis ditampilkan di scope. Jadi kita perlu membuat sendiri daftar variable khusus untuk kita awasi. Kita bisa menggunakan Watch. Kita bisa tekan tanda tambah di sebelah kanan Watch, kemudian kita tambahkan nama variablenya seperti message dan i.

Nah, sekarang perhatikan bahwa for terdiri dari 3 bagian ya. Inisialisasi, kondisi dan increment. Kita sedang berada di bagian inisialisasi. Perhatikan warna dari kode inisialisasinya sedikit berbeda dari kode lainnya, karena warnanya adalah biru tua. Untuk menjalankan kode inisialisasi ini, kita bisa menekan tombol Step atau menekan tombol F9.

Browser menjalankan kode inisialisasi, dan sekarang nilai i berubah menjadi 0. Browser pindah ke kode berikutnya, yaitu if. Perhatikan kondisi dari if, apakah i habis dibagi 2? Nilai i sekarang adalah 0. Apakah 0 habis dibagi 2? Jawabannya adalah benar. Jadi kalau kita tekan step, maka browser berpindah ke kode di dalam if.

Kalau kita tekan step lagi, maka browser menuliskan 0 adalah Genap. Dan browser pindah ke kode berikutnya. Berhubung kode di dalam perulangan kita sudah habis, maka browser pindah ke bagian increment di dalam for. Nilai i akan ditambahkan dengan 1.

Kita tekan step. Nilai i sudah ditambahkan dengan 1. Sekarang browser pindah ke kode kondisi apakah i < 3. Apakah 1 kecil dari 3? Jawabannya benar, maka browser melanjutkan ke dalam kode perulangan lagi.

Kita masuk ke kondisi. Apakah 1 habis dibagi 2? Untuk kondisi sekarang, jawabannya salah ya. Maka browser melanjutkan ke kode di dalam else. Browser menulis "1 adalah Ganjil".

Selanjutnya browser kembali ke increment. Nilai i ditambah menjadi 2. Kemudian diperiksa apakah 2 lebih kecil dari 3. Karena benar, maka lanjut ke kode perulangan. Dan kita masuk lagi ke "2 adalah Genap".

Dan browser melakukan increment lagi. Kali ini nilai i ditambah menjadi 3. Dan berhubung nilai 3 sudah tidak memenuhi kondisi lebih kecil dari 3, maka browser sudah tidak menjalankan perulangan lagi. Browser melanjutkan ke kode berikutnya, yaitu "Akhir script".

Oke ya. Kita sudah mencoba cara menelusuri Javascript yang telah kita tulis dengan menggunakan Chrome Developer Tools. Menarik ya? Bagi teman-teman yang telah menuliskan kode Javascript dan kurang begitu mengerti apa yang terjadi dengan kode tersebut, dapat menggunakan cara ini untuk menelusuri scriptnya. Kita bisa lebih mengerti dengan langkah-langkah yang dilakukan oleh browser pada saat menjalankan script tersebut.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.