Temukan alur kerja proses debug baru dengan referensi komprehensif tentang proses debug Chrome DevTools ini baru.
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 menyetel titik henti sementara, lihat Menjeda Kode Dengan Titik henti sementara.
Periksa nilai saat dijeda
Selagi 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 Konsol untuk membuat kueri variabel, konstanta, dan objek yang dievaluasi.
Pratinjau properti class/fungsi saat kursor diarahkan
Saat eksekusi dijeda, arahkan kursor ke nama class atau fungsi untuk melihat pratinjau propertinya.
Meliputi kode
Setelah kode Anda dijeda, jalankan ekspresi satu per satu, lakukan investigasi terhadap alur kontrol dan nilai properti selama prosesnya.
Melangkahi baris kode
Saat dijeda pada baris kode yang berisi fungsi yang tidak relevan dengan masalah yang
proses debug, klik Step over
untuk menjalankan fungsi
tanpa melangkah ke dalamnya.
Misalnya, anggaplah Anda 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
}
Video Anda dijeda pada A
. Dengan menekan Step over, DevTools mengeksekusi semua kode dalam fungsi yang
Anda melangkah ke atas, yaitu B
dan C
. DevTools kemudian dijeda pada D
.
Masukkan baris kode
Saat dijeda pada baris kode yang berisi panggilan fungsi yang terkait dengan masalah yang
proses debug, klik Step into
untuk menyelidiki fungsi tersebut
lebih lanjut.
Misalnya, anggaplah Anda 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;
}
Video Anda dijeda pada A
. Dengan menekan Step into, DevTools mengeksekusi baris kode ini, lalu berhenti sementara
B
.
Melangkah keluar dari baris kode
Saat dijeda di dalam fungsi yang tidak terkait dengan masalah yang Anda debug, klik Step
keluar untuk menjalankan sisa
kode fungsi.
Misalnya, anggaplah Anda 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
}
Video Anda dijeda pada A
. Dengan menekan Step out, DevTools mengeksekusi sisa kode dalam
getName()
, yang hanya B
dalam contoh ini, lalu dijeda pada C
.
Menjalankan semua kode hingga baris tertentu
Saat men-debug fungsi yang panjang, mungkin ada banyak kode yang tidak terkait dengan masalah yang sedang Anda proses debug.
Anda bisa melewati semua baris, tetapi hal ini bisa membosankan. Anda dapat menetapkan baris kode
titik henti sementara pada baris yang Anda minati, lalu tekan Lanjutkan Eksekusi Skrip
, tetapi ada cara yang lebih cepat.
Klik kanan baris kode yang diminati, lalu pilih Lanjutkan ke sini. DevTools menjalankan semua kode hingga saat itu, dan kemudian berhenti pada baris tersebut.
Lanjutkan eksekusi skrip
Untuk melanjutkan eksekusi skrip setelah dijeda, klik Lanjutkan Eksekusi Skrip
. DevTools
mengeksekusi skrip itu hingga titik henti sementara berikutnya, jika ada.
Memaksa eksekusi skrip
Untuk mengabaikan semua titik henti sementara dan memaksa skrip melanjutkan eksekusi, klik lama Lanjutkan Skrip
Eksekusi
lalu pilih Paksa eksekusi skrip
.
Ubah konteks rangkaian pesan
Saat menggunakan web worker atau pekerja layanan, klik konteks yang tercantum di panel Threads untuk beralih ke konteks tersebut. Ikon panah biru mewakili konteks yang saat ini dipilih.
Panel Threads pada screenshot di atas ditandai dengan warna biru.
Misalnya, anggaplah Anda dijeda pada titik henti sementara dalam skrip utama dan layanan Anda skrip pekerja. Anda ingin melihat properti lokal dan global untuk konteks pekerja layanan, tetapi panel Sumber menampilkan konteks skrip utama. Dengan mengklik entri pekerja layanan ke dalam Panel Threads, Anda dapat beralih ke konteks tersebut.
Melewati 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, file tersebut berisi ekspresi foo(),foo(),42
yang dipisahkan koma:
function foo(){}function bar(){return foo(),foo(),42}bar();
Debugger menjalankan langkah melalui ekspresi tersebut dengan cara yang sama.
Oleh karena itu, perilaku tahapnya identik:
- Antara kode yang diminifikasi dan ditulis.
- Saat menggunakan peta sumber untuk men-debug kode yang diminifikasi dalam hal kode asli. Dengan kata lain, saat melihat titik koma, Anda selalu dapat mengharapkan untuk melewatinya bahkan jika sumber sebenarnya yang Anda debug dikecilkan.
Melihat dan mengedit properti lokal, penutupan, dan global
Saat dijeda pada baris kode, gunakan panel Cakupan untuk melihat dan mengedit nilai properti dan variabel dalam {i>local<i}, {i>closure<i}, dan {i>global scope<i}.
- Klik dua kali nilai properti untuk mengubahnya.
- Properti yang tidak dapat dihitung akan berwarna abu-abu.
Panel Cakupan pada screenshot di atas diuraikan dengan warna biru.
Melihat stack panggilan saat ini
Saat dijeda pada baris kode, gunakan panel Call Stack untuk melihat stack panggilan yang mengarahkan Anda ke poin.
Klik entri untuk menuju ke baris kode tempat fungsi tersebut dipanggil. Ikon panah biru mewakili fungsi mana yang saat ini disorot oleh 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 satu fungsi saat fungsi ini dijeda. Dengan kata lain, Anda dapat memulai ulang frame fungsi di stack panggilan.
Untuk memulai ulang frame:
- Menjeda eksekusi fungsi pada titik henti sementara. Panel Call Stack mencatat urutan panggilan fungsi.
Di panel Call Stack, klik kanan fungsi, lalu pilih Restart frame dari menu drop-down.
Untuk memahami cara kerja Mulai ulang 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, dan memanggil fungsi bar()
. Selanjutnya, fungsi bar()
menambah argumen.
Coba mulai ulang frame kedua fungsi dengan cara berikut:
- Salin kode di atas ke cuplikan baru dan jalankan. Eksekusi berhenti pada 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
. - Atau, di panel Cakupan, klik dua kali nilai untuk mengeditnya dan menetapkan nilai yang diinginkan.
Coba mulai ulang frame
bar()
dan baca pernyataan penambahan 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, ini hanya memindahkan pointer eksekusi ke awal fungsi.
Oleh karena itu, nilai argumen saat ini tetap ada dalam memori setiap kali fungsi yang sama dimulai ulang.
- Sekarang, mulai ulang frame
foo()
di Call Stack.Perhatikan bahwa nilainya adalah
0
lagi.
Pada JavaScript, perubahan pada argumen tidak terlihat (ditampilkan) di luar fungsi. Fungsi tersarang 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 Settings > Daftar Abaikan.
Untuk melihat stack panggilan lengkap termasuk frame pihak ketiga, aktifkan Tampilkan frame yang tercantum dalam daftar yang diabaikan di bagian Call Stack.
Coba di halaman demo ini:
- Di panel Sources, buka
src
>app
app.component.ts
. - Tetapkan titik henti sementara pada fungsi
increment()
. - Di bagian Call Stack, centang atau hapus centang pada kotak Show ignore- lists frames dan amati daftar lengkap frame yang relevan atau lengkap dalam stack panggilan.
Lihat frame asinkron
Jika didukung oleh framework yang Anda gunakan, DevTools dapat melacak operasi asinkron dengan menautkan kedua bagian kode asinkron secara bersamaan.
Dalam hal ini, Call Stack menampilkan seluruh histori panggilan termasuk frame panggilan asinkron.
Salin stack trace
Klik kanan di mana saja di panel Call Stack lalu pilih Copy stack trace untuk menyalin panggilan saat ini ditumpuk ke {i>clipboard<i}.
Berikut adalah contoh outputnya:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Menjelajahi hierarki file
Gunakan panel Halaman untuk membuka hierarki file.
Mengelompokkan file yang ditulis dan di-deploy di hierarki file
Saat mengembangkan aplikasi web menggunakan framework (misalnya, React atau Angular), mungkin akan sulit untuk membuka sumber karena file yang diminifikasi yang dihasilkan oleh alat build (misalnya, webpack atau Vite).
Untuk membantu Anda melihat sumber, klik Sumber > Panel 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 diminifikasi.
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 berfokus hanya pada kode yang Anda buat, kolom Sumber > Panel Halaman membuat semua skrip atau direktori ditambahkan ke Setelan > menjadi abu-abu Daftar Abaikan secara default.
Untuk menyembunyikan skrip tersebut sepenuhnya, pilih Sumber > Halaman > > Sembunyikan sumber dalam daftar yang diabaikan
.
Abaikan skrip atau pola skrip
Mengabaikan skrip untuk melewatinya saat proses debug. Jika diabaikan, skrip dikaburkan di panel Call Stack, dan Anda tidak akan pernah masuk ke fungsi skrip saat melangkah melalui kode Anda.
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 sedang Anda debug
tidak terkait dengan library pihak ketiga, maka abaikan skrip tersebut.
Mengabaikan skrip atau direktori dari hierarki file
Untuk mengabaikan skrip individual atau seluruh direktori:
- Di Sources > 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, pada banner peringatan , klik Hapus dari daftar yang diabaikan atau Konfigurasi.
Jika tidak, Anda dapat menghapus direktori serta skrip yang disembunyikan dan diabaikan dari daftar di Setelan > Daftar Abaikan.
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.
Jalankan cuplikan kode debug dari halaman mana pun
Jika Anda menjalankan kode debug yang sama di Konsol berulang kali, pertimbangkan Cuplikan. Cuplikan 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 melihat nilai ekspresi kustom. Anda dapat menonton semua JavaScript yang valid ekspresi.
- Klik Tambahkan Ekspresi
untuk membuat ekspresi watch baru.
- Klik Muat ulang
untuk memuat ulang nilai dari semua ekspresi yang ada. Nilai-nilai diperbarui secara otomatis saat menelusuri kode.
- Arahkan kursor ke ekspresi, lalu klik Hapus Ekspresi
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 Anda.
Membuat file yang diminifikasi dapat dibaca
Secara default, panel Sources mencetak cantik file yang diminifikasi. Jika sudah dicetak dengan baik, 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 pojok kiri bawah Editor.
Melipat blok kode
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 {i>bug<i}, Anda sering kali ingin menguji beberapa perubahan pada kode JavaScript Anda. Anda tidak perlu untuk melakukan perubahan di browser eksternal, lalu muat 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 simpan. DevTools mem-patch seluruh file JS ke mesin JavaScript Chrome.
Panel Editor pada screenshot di atas ditandai dengan warna biru.
Mengedit fungsi yang dijeda secara langsung
Selama eksekusi dijeda, Anda dapat mengedit fungsi saat ini dan menerapkan perubahan secara langsung dengan batasan berikut:
- Anda hanya dapat mengedit fungsi teratas di Stack Panggilan.
- 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, string digabungkan. Untuk memperbaikinya, fungsi parseInt()
ditambahkan selama pengeditan live.
Menelusuri 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).
- Di kolom, masukkan kueri Anda.
Secara opsional, Anda dapat:
- Klik
Cocokkan Huruf Besar/Kecil agar kueri Anda peka huruf besar/kecil.
- Klik
Use Regular Expression untuk menelusuri menggunakan ekspresi RegEx.
- Klik
- 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 Replace atau Replace all.