Temukan alur kerja proses debug baru dengan referensi komprehensif tentang fitur proses debug Chrome DevTools ini.
Lihat Memulai Proses Debug JavaScript di Chrome DevTools untuk mempelajari dasar-dasar proses debug.
Menjeda kode dengan titik henti sementara
Tetapkan titik henti sementara agar Anda dapat menjeda kode di tengah eksekusi. Untuk mempelajari cara menetapkan titik henti sementara, lihat Menjeda Kode dengan Titik Henti Sementara.
Periksa nilai saat dijeda
Saat eksekusi dijeda, debugger akan mengevaluasi semua variabel, konstanta, dan objek dalam fungsi saat ini hingga titik henti sementara. Debugger menampilkan nilai saat ini secara inline di samping deklarasi yang sesuai.
Anda dapat menggunakan Console untuk membuat kueri variabel, konstanta, dan objek yang dievaluasi.
Melihat pratinjau properti class/fungsi saat kursor diarahkan
Saat eksekusi dijeda, arahkan kursor ke nama fungsi atau class untuk melihat pratinjau propertinya.
Penyusunan kode
Setelah kode dijeda, lakukan tahapan melewatinya, satu per satu ekspresi, dengan menyelidiki alur kontrol dan nilai properti selama proses berlangsung.
Melangkahi baris kode
Saat dijeda pada baris kode yang berisi fungsi yang tidak relevan dengan masalah yang Anda debug, klik Step over untuk menjalankan fungsi tanpa melangkah ke fungsi tersebut.
Misalnya, Anda sedang men-debug kode berikut:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
Anda dijeda di A
. Dengan menekan Step over, DevTools akan mengeksekusi semua kode dalam fungsi yang
Anda ulangi, yaitu B
dan C
. DevTools kemudian dijeda pada D
.
Melangkah ke baris kode
Saat dijeda pada baris kode yang berisi panggilan fungsi yang terkait dengan masalah yang Anda debug, klik Step into untuk menyelidiki fungsi tersebut lebih lanjut.
Misalnya, Anda sedang men-debug kode berikut:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
Anda dijeda di A
. Dengan menekan Step into, DevTools mengeksekusi baris kode ini, lalu dijeda di
B
.
Meninggalkan baris kode
Saat dijeda di dalam fungsi yang tidak terkait dengan masalah yang Anda debug, klik Step out untuk menjalankan kode fungsi lainnya.
Misalnya, Anda sedang men-debug kode berikut:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
Anda dijeda di A
. Dengan menekan Step out, DevTools mengeksekusi kode lainnya di
getName()
, yang dalam contoh ini hanya B
, lalu dijeda di C
.
Menjalankan semua kode hingga baris tertentu
Saat men-debug fungsi yang panjang, mungkin ada banyak kode yang tidak terkait dengan masalah yang Anda debug.
Anda dapat melewati semua baris, tetapi itu bisa merepotkan. Anda dapat menetapkan titik henti sementara baris kode pada baris yang Anda minati, lalu menekan Lanjutkan Eksekusi Skrip , tetapi ada cara yang lebih cepat.
Klik kanan baris kode yang Anda inginkan, lalu pilih Lanjutkan ke sini. DevTools menjalankan semua kode sampai titik tersebut, lalu dijeda di baris tersebut.
Lanjutkan eksekusi skrip
Untuk melanjutkan eksekusi skrip setelah dijeda, klik Lanjutkan Eksekusi Skrip . DevTools akan mengeksekusi skrip hingga titik henti sementara berikutnya, jika ada.
Paksa eksekusi skrip
Untuk mengabaikan semua titik henti sementara dan memaksa skrip untuk melanjutkan eksekusi, klik lama Lanjutkan Eksekusi Skrip lalu pilih Paksa eksekusi skrip .
Mengubah konteks thread
Saat bekerja dengan web worker atau service worker, klik konteks yang tercantum di panel Threads untuk beralih ke konteks tersebut. Ikon panah biru menunjukkan konteks yang saat ini dipilih.
Panel Threads pada screenshot di atas ditandai dengan warna biru.
Misalnya, anggaplah Anda dijeda pada titik henti sementara di skrip utama dan skrip pekerja layanan Anda. Anda ingin melihat properti lokal dan global untuk konteks pekerja layanan, tetapi panel Sources menampilkan konteks skrip utama. Dengan mengklik entri pekerja layanan di panel Threads, Anda akan dapat beralih ke konteks tersebut.
Menelusuri ekspresi yang dipisahkan koma
Melewati ekspresi yang dipisahkan koma memungkinkan Anda men-debug kode yang diminifikasi. Misalnya, perhatikan kode berikut:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
Jika diminifikasi, ekspresi ini akan berisi ekspresi foo(),foo(),42
yang dipisahkan koma:
function foo(){}function bar(){return foo(),foo(),42}bar();
Langkah-langkah Debugger dalam ekspresi tersebut sama saja.
Oleh karena itu, perilaku stepping identik:
- Antara kode yang diminifikasi dan ditulis.
- Saat menggunakan peta sumber untuk men-debug kode yang diminifikasi dalam kode asli. Dengan kata lain, saat melihat titik koma, Anda selalu berharap untuk melewatinya meskipun sumber sebenarnya yang Anda debug diperkecil.
Melihat dan mengedit properti lokal, penutupan, dan global
Saat dijeda pada baris kode, gunakan panel Scope untuk melihat dan mengedit nilai properti dan variabel dalam cakupan lokal, penutupan, dan global.
- Klik dua kali nilai properti untuk mengubahnya.
- Properti yang tidak dapat dihitung berwarna abu-abu.
Panel Scope pada screenshot di atas ditandai dengan warna biru.
Melihat stack panggilan saat ini
Saat dijeda pada satu baris kode, gunakan panel Call Stack untuk melihat stack panggilan yang membawa Anda ke titik ini.
Klik entri untuk melompat ke baris kode tempat fungsi tersebut dipanggil. Ikon panah biru menunjukkan fungsi yang saat ini disorot DevTools.
Panel Call Stack pada screenshot di atas ditandai dengan warna biru.
Memulai ulang fungsi (frame) dalam stack panggilan
Untuk mengamati perilaku fungsi dan menjalankannya kembali tanpa harus memulai ulang seluruh alur proses debug, Anda dapat memulai ulang eksekusi fungsi tunggal saat fungsi ini dijeda. Dengan kata lain, Anda dapat memulai ulang frame fungsi dalam stack panggilan.
Untuk memulai ulang frame:
- Menjeda eksekusi fungsi di titik henti sementara. Panel Call Stack mencatat urutan panggilan fungsi.
Di panel Call Stack, klik kanan fungsi dan pilih Restart frame dari menu drop-down.
Untuk memahami cara kerja Restart frame, pertimbangkan kode berikut:
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
Fungsi foo()
menggunakan 0
sebagai argumen, mencatatnya dalam log, dan memanggil fungsi bar()
. Fungsi bar()
kemudian menambah argumen.
Coba mulai ulang frame kedua fungsi dengan cara berikut:
- Salin kode di atas ke cuplikan baru dan jalankan. Eksekusi berhenti di titik henti sementara baris kode
debugger
. - Perhatikan bahwa debugger menampilkan nilai saat ini di samping deklarasi fungsi:
value = 1
. - Mulai ulang frame
bar()
. - Telusuri pernyataan pertambahan nilai dengan menekan
F9
. Perhatikan bahwa nilai saat ini meningkat:value = 2
. - Secara opsional, di panel Scope, klik dua kali nilai untuk mengeditnya dan tetapkan nilai yang diinginkan.
Coba mulai ulang frame
bar()
dan lakukan langkah-langkah dalam pernyataan kenaikan beberapa kali lagi. Nilainya terus meningkat.
Mulai ulang frame tidak mereset argumen. Dengan kata lain, mulai ulang tidak memulihkan status awal saat panggilan fungsi. Sebagai gantinya, tindakan ini hanya memindahkan pointer eksekusi ke awal fungsi.
Oleh karena itu, nilai argumen saat ini tetap ada dalam memori setiap kali memulai ulang fungsi yang sama.
- Sekarang, mulai ulang frame
foo()
di Call Stack. Perhatikan bahwa nilainya adalah0
lagi.
Di JavaScript, perubahan pada argumen tidak terlihat (tercermin) di luar fungsi. Fungsi bertingkat menerima nilai, bukan lokasinya dalam memori.
1. Lanjutkan eksekusi skrip (F8
) untuk menyelesaikan tutorial ini.
Tampilkan frame dalam daftar yang diabaikan
Secara default, panel Call Stack hanya menampilkan frame yang relevan dengan kode Anda dan menghilangkan skrip apa pun yang ditambahkan ke Setelan > Daftar Abaikan.
Untuk melihat stack panggilan lengkap termasuk frame pihak ketiga, aktifkan Tampilkan frame yang tercantum dalam daftar diabaikan di bagian Stack Panggilan.
Cobalah di halaman demo ini:
- Di panel Sources, buka file
src
>app
>app.component.ts
. - Tetapkan titik henti sementara pada fungsi
increment()
. - Di bagian Call Stack, centang atau hapus centang Tampilkan frame yang tercantum dalam daftar yang diabaikan dan amati daftar frame yang relevan atau lengkap dalam stack panggilan.
Lihat frame asinkron
Jika didukung oleh framework yang Anda gunakan, DevTools bisa melacak operasi asinkron dengan menautkan kedua bagian kode asinkron bersama-sama.
Dalam hal ini, Call Stack menampilkan seluruh histori panggilan, termasuk frame panggilan asinkron.
Salin pelacakan tumpukan
Klik kanan di mana saja di panel Call Stack, lalu pilih Copy stack trace untuk menyalin stack panggilan saat ini ke papan klip.
Berikut adalah contoh output-nya:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Menavigasi hierarki file
Gunakan panel Halaman untuk membuka hierarki file.
Mengelompokkan file yang ditulis dan di-deploy dalam hierarki file
Saat mengembangkan aplikasi web menggunakan framework (misalnya, React atau Angular), navigasi sumber bisa jadi sulit dilakukan karena file yang diminifikasi yang dihasilkan oleh alat build (misalnya, webpack atau Vite).
Untuk membantu Anda menjelajahi sumber, panel Sumber > Halaman dapat mengelompokkan file menjadi dua kategori:
- Ditulis. Mirip dengan file sumber yang Anda lihat di IDE. DevTools menghasilkan file-file ini berdasarkan peta sumber yang disediakan oleh alat build Anda.
- Di-deploy. File sebenarnya yang dibaca browser. Biasanya file ini diperkecil.
Untuk mengaktifkan pengelompokan, aktifkan opsi > Group files by Authored/Deployed pada menu tiga titik di bagian atas hierarki file.
Sembunyikan sumber yang tercantum dalam daftar yang diabaikan dari hierarki file
Untuk membantu Anda fokus hanya pada kode yang Anda buat, panel Sumber > Halaman akan mengubah warna semua skrip atau direktori yang ditambahkan ke Setelan > Abaikan Daftar secara default.
Untuk menyembunyikan skrip tersebut sekaligus, pilih Sumber > Halaman > > Sembunyikan sumber yang tercantum dalam daftar yang diabaikan .
Mengabaikan skrip atau pola skrip
Abaikan skrip untuk melewatinya saat proses debug. Jika diabaikan, skrip akan disamarkan di panel Call Stack, dan Anda tidak akan pernah masuk ke fungsi skrip saat menjalankan kode.
Misalnya, Anda sedang menelusuri kode ini:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A
adalah library pihak ketiga yang Anda percayai. Jika Anda yakin bahwa masalah yang di-debug
tidak terkait dengan library pihak ketiga, sebaiknya abaikan skrip tersebut.
Mengabaikan skrip atau direktori dari struktur file
Untuk mengabaikan skrip individual atau seluruh direktori:
- Di Sumber > Halaman, klik kanan direktori atau file skrip.
- Pilih Tambahkan direktori/skrip ke daftar yang diabaikan.
Jika tidak menyembunyikan sumber yang tercantum dalam daftar yang diabaikan, Anda dapat memilih sumber tersebut di hierarki file dan, di banner peringatan , klik Hapus dari daftar yang diabaikan atau Konfigurasi.
Jika tidak, Anda dapat menghapus direktori dan skrip yang disembunyikan dan diabaikan dari daftar di Setelan > Abaikan Daftar.
Mengabaikan skrip dari panel Editor
Untuk mengabaikan skrip dari panel Editor:
- Buka file.
- Klik kanan di mana saja.
- Pilih Tambahkan skrip ke daftar yang diabaikan.
Anda dapat menghapus skrip dari daftar yang diabaikan dari Setelan > Daftar Abaikan.
Mengabaikan skrip dari panel Call Stack
Untuk mengabaikan skrip dari panel Call Stack:
- Klik kanan fungsi dari skrip.
- Pilih Tambahkan skrip ke daftar yang diabaikan.
Anda dapat menghapus skrip dari daftar yang diabaikan dari Setelan > Daftar Abaikan.
Mengabaikan skrip dari Setelan
Lihat Setelan > Daftar Abaikan.
Menjalankan cuplikan kode debug dari halaman mana pun
Jika Anda mendapati diri Anda menjalankan kode debug yang sama berulang kali di Konsol, pertimbangkan Cuplikan. Snippet adalah skrip yang dapat dieksekusi yang Anda tulis, simpan, dan jalankan di dalam DevTools.
Lihat Menjalankan Cuplikan Kode dari Halaman Mana Pun untuk mempelajari lebih lanjut.
Melihat nilai ekspresi JavaScript kustom
Gunakan panel Watch untuk mengamati nilai ekspresi kustom. Anda dapat melihat ekspresi JavaScript yang valid.
- Klik Add Expression untuk membuat ekspresi smartwatch baru.
- Klik Refresh untuk memuat ulang nilai dari semua ekspresi yang ada. Nilai otomatis diperbarui saat menelusuri kode.
- Arahkan kursor ke ekspresi, lalu klik Delete Expression untuk menghapusnya.
Memeriksa dan mengedit skrip
Saat Anda membuka skrip di panel Page, DevTools akan menampilkan kontennya di panel Editor. Di panel Editor, Anda dapat menjelajahi dan mengedit kode.
Selain itu, Anda dapat mengganti konten secara lokal atau membuat ruang kerja dan menyimpan perubahan yang Anda buat di DevTools langsung ke sumber lokal.
Membuat file yang diminifikasi dapat dibaca
Secara default, panel Sources mencetak file yang diminifikasi. Jika sudah selesai dicetak, Editor dapat menampilkan satu baris kode panjang dalam beberapa baris, dengan -
untuk menunjukkan bahwa ini adalah kelanjutan baris.
Untuk melihat file yang diminifikasi saat dimuat, klik { }
di sudut kiri bawah Editor.
Blok kode lipat
Untuk melipat blok kode, arahkan kursor ke nomor baris di kolom sebelah kiri, lalu klik Ciutkan.
Untuk membuka blok kode, klik {...}
di sampingnya.
Untuk mengonfigurasi perilaku ini, lihat Setelan > Preferensi > Sumber.
Mengedit skrip
Saat memperbaiki bug, Anda sering kali ingin menguji beberapa perubahan pada kode JavaScript Anda. Anda tidak perlu melakukan perubahan pada browser eksternal lalu memuat ulang halaman. Anda dapat mengedit skrip di DevTools.
Untuk mengedit skrip:
- Buka file di panel Editor pada panel Sources.
- Buat perubahan di panel Editor.
Tekan Command+S (Mac) atau Ctrl+S (Windows, Linux) untuk menyimpan. DevTools melakukan patch pada seluruh file JS ke dalam mesin JavaScript Chrome.
Panel Editor pada screenshot di atas ditandai dengan warna biru.
Mengedit fungsi yang dijeda secara live
Saat eksekusi dijeda, Anda dapat mengedit fungsi saat ini dan menerapkan perubahan secara langsung dengan batasan berikut:
- Anda hanya dapat mengedit fungsi teratas di Call Stack.
- Tidak boleh ada panggilan rekursif ke fungsi yang sama di bagian bawah stack.
Untuk mengedit fungsi secara langsung:
- Menjeda eksekusi dengan titik henti sementara.
- Edit fungsi yang dijeda.
- Tekan Command / Control + S untuk menerapkan perubahan. Debugger memulai ulang fungsi secara otomatis.
- Lanjutkan eksekusi.
Tonton video di bawah untuk mempelajari alur kerja ini.
Dalam contoh ini, variabel addend1
dan addend2
awalnya memiliki jenis string
yang salah. Jadi, alih-alih menambahkan angka, {i>string<i} digabungkan. Untuk memperbaikinya, fungsi parseInt()
ditambahkan selama pengeditan langsung.
Mencari dan mengganti teks dalam skrip
Untuk menelusuri teks dalam skrip:
- Buka file di panel Editor pada panel Sources.
- Untuk membuka kotak penelusuran bawaan, tekan Command+F (Mac) atau Ctrl+F (Windows, Linux).
- Masukkan kueri Anda di panel tersebut.
Anda juga dapat:
- Klik Match Case untuk membuat kueri peka huruf besar/kecil.
- Klik Gunakan Ekspresi Reguler untuk menelusuri menggunakan ekspresi RegEx.
- Tekan Enter. Untuk melompat ke hasil penelusuran sebelumnya atau berikutnya, tekan tombol atas atau bawah.
Untuk mengganti teks yang Anda temukan:
- Di kotak penelusuran, klik tombol Ganti.
- Ketik teks yang akan diganti, lalu klik Ganti atau Ganti semua.