Cara meyusuri kode Anda

By Dave Gash

Dave is a Tech Writer

By Paul Bakaus

Open Web Developer Advocate at Google • Tools, Performance, Animation, UX

By Kayce Basques

Technical Writer for Chrome DevTools

Dengan mengeksekusi kode baris per baris atau fungsi per fungsi, Anda bisa mengamati perubahan dalam data dan dalam laman untuk memahami secara persis apa yang sedang terjadi. Anda juga bisa memodifikasi nilai data yang digunakan oleh skrip, dan Anda bahkan bisa memodifikasi skrip itu sendiri.

Mengapa nilai variabel ini 20 bukannya 30? Mengapa baris kode itu sepertinya tidak berpengaruh? Mengapa flag ini true padahal seharusnya false? Setiap developer menghadapi pertanyaan ini, dan menyusuri kode untuk mengetahui jawabannya.

Setelah menyetel breakpoint, kembalilah ke laman dan gunakan seperti biasa hingga mencapai breakpoint. Ini menghentikan sementara semua JavaScript di laman, fokus berpindah ke panel Sources di DevTools, dan breakpoint akan disorot. Anda kini bisa secara selektif mengeksekusi kode dan memeriksa datanya, langkah demi langkah.

TL;DR

• Susur kode untuk mengamati masalah sebelum atau saat masalah terjadi dan uji perubahan melalui pengeditan langsung.
• Sebaiknya lewati proses log konsol, karena data yang tercatat di log sudah kedaluwarsa pada saat tiba di konsol.
• Aktifkan fitur 'Async call stack' untuk mendapatkan visibilitas lebih besar ke dalam tumpukan panggilan fungsi asinkron.
• Kotak hitamkan skrip untuk menyembunyikan kode pihak ketiga dari tumpukan panggilan Anda.
• Gunakan fungsi bernama daripada fungsi anonim untuk meningkatkan keterbacaan tumpukan panggilan.

Stepping sedang beraksi

Semua opsi langkah dinyatakan melalui ikon yang bisa diklik di bilah sisi, namun bisa juga dipicu lewat pintasan. Inilah ringkasannya:

Ikon/Tombol	Aksi	Keterangan
	Resume	Melanjutkan eksekusi hingga breakpoint berikutnya. Jika tidak ada breakpoint yang ditemui, eksekusi normal akan dilanjutkan.
	Long Resume	Melanjutkan eksekusi dengan breakpoint dinonaktifkan selama 500 md. Praktis untuk sejenak melompati breakpoint yang jika tidak dilompati akan terus menghentikan sementara suatu kode, mis., breakpoint di dalam loop. Klik dan tahan Resume hingga diperluas untuk menampilkan aksi.
	Step Over	Mengeksekusi apa saja yang terjadi di baris berikutnya dan melompat ke baris berikutnya.
	Step Into	Jika baris berikutnya berisi panggilan fungsi, Step Into akan melompat ke dan menghentikan sementara fungsi itu pada baris pertamanya..
	Step Out	Mengeksekusi sisa fungsi saat ini kemudian berhenti sementara pada pernyataan berikutnya setelah panggilan fungsi.
	Deactivate breakpoints	Menonaktifkan sementara semua breakpoint. Gunakan untuk melanjutkan eksekusi penuh tanpa benar-benar membuang breakpoint Anda. Klik lagi untuk mengaktifkan ulang breakpoint.
	Pause on exceptions	Secara otomatis menghentikan kode sementara bila terjadi pengecualian.

Gunakan step into sebagai aksi tipikal "baris per baris" Anda, karena ini akan memastikan hanya satu pernyataan yang dieksekusi, tidak peduli fungsi apa pun yang Anda masuki dan tinggalkan.

Gunakan Pause on exceptions bila Anda menduga ada pengecualian tak tertangkap yang menyebabkan masalah, namun Anda tidak tahu di mana adanya. Ketika opsi ini diaktifkan, Anda bisa menyaringnya dengan mengeklik kotak centang Pause On Caught Exceptions; dalam hal ini, eksekusi hanya dihentikan sementara bila terjadi pengecualian yang ditangani secara khusus.

Menampilkan properti menurut cakupan

Ketika Anda menghentikan sementara sebuah skrip, panel Scope menunjukkan semua properti yang didefinisikan-sekarang pada saat tersebut.

Panel disorot dengan warna biru pada tangkapan layar di bawah ini.

Panel Scope hanya terisi saat skrip dihentikan sementara. Ketika laman Anda sedang berjalan, panel Scope kosong.

Panel Scope menunjukkan properti yang didefinisikan di tingkat lokal, closure, dan global.

Jika properti memiliki ikon carat di sebelahnya, itu berarti bahwa ia adalah sebuah objek. Klik pada ikon carat untuk memperluas objek dan menampilkan propertinya.

Kadang-kadang properti dibuat redup. Misalnya, properti constructor lebih redup daripada properti confirm pada tangkapan layar di bawah ini.

Properti lebih gelap yang bisa dienumerasi. Properti lebih terang dan diredupkan, tidak bisa dienumerasi. Lihat thread Stack Overflow berikut untuk informasi selengkapnya: Apa arti warna dalam panel Scope Chrome Developer Tools?

Tumpukan panggilan

Dekat bagian atas bilah sisi terdapat bagian Call Stack. Bila kode dihentikan sementara di breakpoint, tumpukan panggilan akan menampilkan jalur eksekusi, dalam urutan kronologis terbalik, yang akan membawa kode tersebut ke breakpoint itu. Ini tidak cuma berguna untuk memahami di mana eksekusi terjadi sekarang, melainkan bagaimana eksekusi bisa sampai ke situ, merupakan faktor penting dalam proses debug.

Contoh

Kejadian onclick pertama di baris 50 dalam file index.html memanggil fungsi setone() di baris 18 dalam file JavaScript dgjs.js, yang kemudian memanggil fungsi setall() di baris 4 dalam file yang sama, di mana eksekusi dihentikan sementara pada breakpoint saat ini.

Mengaktifkan async call stack

Mengaktifkan fitur async call stack agar bisa lebih jelas melihat eksekusi dari panggilan fungsi asinkron Anda.

1. Buka panel Sources di DevTools.
2. Pada panel Call Stack, aktifkan kotak centang Async.

Video di bawah ini berisi skrip sederhana untuk memperagakan fitur async call stack. Dalam skrip, digunakan pustaka pihak ketiga untuk memilih elemen DOM. Sebuah fungsi dengan nama onClick telah didaftarkan sebagai penangan kejadian onclick untuk elemen. Setiap kali onClick dipanggil, itu akan memanggil fungsi bernama f, yang sekadar memaksa skrip untuk berhenti sementara lewat kata kunci debugger.

Dalam video ini, breakpoint dipicu, dan tumpukan panggilan diperluas. Hanya ada satu panggilan di tumpukan: f. Fitur async call stack kemudian diaktifkan, skrip dilanjutkan, breakpoint dipicu lagi, kemudian tumpukan panggilan diperluas untuk kedua kalinya. Kali ini, tumpukan panggilan berisi semua panggilan yang mengarah ke f, termasuk panggilan pustaka pihak-ketiga, dan panggilan ke onClick. Saat pertama skrip dipanggil, hanya ada satu panggilan di tumpukan panggilan. Saat kedua kali, ada empat panggilan. Singkatnya , fitur async call stack memberikan peningkatan visibilitas pada tumpukan panggilan lengkap fungsi asinkron.

Tip: Berikan nama pada fungsi untuk meningkatkan keterbacaan tumpukan panggilan

Fungsi anonim membuat tumpukan panggilan sulit dibaca. Berikan nama pada fungsi Anda untuk meningkatkan keterbacaan.

Cuplikan kode pada dua tangkapan layar di bawah ini setara secara fungsional. Fungsi sebenarnya dari kode ini tidaklah penting, yang penting adalah kode dalam tangkapan layar pertama menggunakan fungsi anonim, sedangkan yang kedua menggunakan fungsi bernama.

Dalam tumpukan panggilan di tangkapan layar pertama, dua fungsi teratas hanya dinamai (anonymous function). Dalam tangkapan layar kedua, dua fungsi teratas diberi nama, yang mempermudah memahami alur program secara sekilas. Bila Anda menggunakan banyak file skrip, termasuk pustaka dan kerangka kerja pihak-ketiga, dan tumpukan panggilan Anda sedalam lima atau sepuluh panggilan, maka jauh lebih mudah memahami alur tumpukan panggilan bila fungsi-fungsi itu diberi nama.

Tumpukan panggilan dengan fungsi anonim:

Tumpukan panggilan dengan fungsi bernama:

Kotak-hitamkan kode pihak ketiga

Kotak-hitamkan file skrip untuk meninggalkan file pihak ketiga dari tumpukan panggilan Anda.

Sebelum kotak-hitam:

Setelah kotak-hitam:

Untuk mengotakhitamkan sebuah file:

1. Buka DevTools Settings.

1. Dalam menu navigasi di sebelah kiri, klik Blackboxing.

1. Klik Add pattern.

2. Dalam bidang teks Pattern masukkan pola nama file yang ingin Anda kecualikan dari tumpukan panggilan. DevTools mengecualikan semua skrip yang cocok dengan pola.

1. Dalam menu tarik-turun di sebelah kanan bidang teks, pilih Blackbox untuk mengeksekusi file skrip namun mengecualikan panggilan dari tumpukan panggilan, atau pilih Disabled untuk mencegah file dieksekusi.

2. Klik Add untuk menyimpan.

Saat berikutnya Anda menjalankan laman dan breakpoint terpicu, DevTools akan menyembunyikan panggilan fungsi dari skrip yang telah dikotak-hitamkan dari tumpukan panggilan.

Manipulasi data

Bila eksekusi kode dihentikan sementara, Anda bisa mengamati dan memodifikasi data yang sedang diproses. Hal ini sangat penting saat mencoba melacak variabel yang kelihatannya memiliki nilai yang salah atau parameter yang diteruskan yang belum diterima sebagaimana diharapkan.

Tampilkan panel samping Console dengan mengeklik Show/Hide drawer atau menekan ESC. Dengan konsol yang dibuka sambil menyusuri kode, sekarang Anda bisa:

• Ketikkan nama variabel untuk melihat nilainya saat ini dalam cakupan fungsi saat ini
• Ketikkan pernyataan penetapan JavaScript untuk mengubah nilai

Cobalah memodifikasi nilai, kemudian lanjutkan eksekusi untuk melihat bagaimana ia mengubah hasil kode Anda dan apakah perilakunya seperti yang Anda harapkan.

Contoh

Kami menunjukkan bahwa nilai parameter dow saat ini adalah 2, namun ubahlah secara manual menjadi 3 sebelum melanjutkan eksekusi.

Pengeditan langsung

Mengamati dan menghentikan sementara eksekusi kode akan membantu Anda menemukan kesalahan, dan pengeditan langsung memungkinkan Anda dengan cepat melihat pratinjau perubahan tanpa perlu memuat ulang.

Untuk mengedit langsung sebuah skrip, cukup klik di bagian editor pada panel Sources saat menyusuri kode. Buat perubahan yang diinginkan dalam editor Anda, kemudian terapkan perubahan tersebut dengan Ctrl + S (atau Cmd + S pada Mac). Pada titik ini, seluruh file JS akan dihubungkan ke dalam VM dan semua definisi fungsi akan diperbarui.

Sekarang, Anda bisa melanjutkan eksekusi; skrip modifikasi Anda akan dieksekusi menggantikan yang asli, dan Anda bisa mengamati efek perubahan tersebut.

Contoh

Kami menduga bahwa parameter dow, dalam setiap kasus, berubah +1 ketika diteruskan ke fungsi setone() – sehingga, nilai dow< pada saat diterima, adalah 1 padahal seharusnya 0, 2 padahal seharusnya 1, dll. Untuk menguji dengan cepat apakah pengurangan nilai yang diteruskan mengonfirmasikan bahwa ini adalah masalah, kami menambahkan baris 17 di awal fungsi, lakukan dengan Ctrl + S dan lanjutkan.

Mengelola eksekusi thread

Gunakan panel Threads pada panel Sources untuk menghentikan sementara, masuk ke, dan memeriksa thread lainnya, seperti thread service worker atau web worker.

Untuk mendemonstrasikan panel Threads, bagian ini menggunakan demo berikut: Contoh dasar Web Worker.

Jika Anda membuka DevTools pada aplikasi, Anda bisa melihat bahwa skrip utama terletak di main.js:

Dan skrip web worker terletak di worker.js:

Skrip utama mendengarkan perubahan pada bidang masukan Multiply number 1 atau Multiply number 2. Setelah perubahan, skrip utama mengirimkan pesan ke web worker dengan nilai dari dua angka yang diperbanyak. Web worker melakukan pelipatgandaan dan kemudian meneruskan hasilnya kembali ke skrip utama.

Misalkan Anda menyetel breakpoint di main.js yang terpicu ketika angka pertama berubah:

Dan Anda juga menyetel breakpoint di worker.js ketika worker menerima pesan:

Memodifikasi angka pertama di UI aplikasi memicu kedua breakpoint.

Dalam panel Threads, panah biru menunjukkan thread yang sedang dipilih. Misalnya, dalam tangkapan layar di atas, thread Utama dipilih.

Semua kontrol DevTools untuk menyusuri kode (melanjutkan atau menghentikan sementara eksekusi skrip, Melangkahi panggilan fungsi berikutnya, Masuk ke dalam panggilan fungsi berikutnya, dll.) berkaitan dengan thread tersebut. Dengan kata lain, jika Anda menekan tombol Resume script execution selagi DevTools Anda terlihat seperti tangkapan layar di atas, thread Utama akan melanjutkan eksekusi, namun thread web worker masih akan dihentikan sementara. Bagian Call Stack dan Scope juga hanya menampilkan informasi untuk thread Utama.

Bila Anda ingin menyusuri kode untuk thread web worker, atau melihat cakupan dan informasi tumpukan panggilan, klik saja pada label di panel Threads, sehingga panah biru muncul di sebelahnya. Tangkapan layar di bawah ini menunjukkan bagaimana tumpukan panggilan dan informasi cakupan berubah setelah memilih thread worker. Sekali lagi, jika Anda menekan salah satu tombol penyusuran kode (melanjutkan eksekusi skrip, melangkahi panggilan fungsi berikutnya, dll.), aksi tersebut hanya akan berkaitan dengan thread worker. Thread Utama tidak terpengaruh.