Referensi proses debug JavaScript

Temukan alur kerja proses debug baru dengan referensi komprehensif 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 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 sedang di-debug, klik Step over untuk menjalankan fungsi tersebut tanpa memasukinya.

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 sedang Anda injak, 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 sedang di-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 pada B.

Melangkah keluar dari baris kode

Saat dijeda di dalam fungsi yang tidak terkait dengan masalah yang sedang di-debug, klik Step out untuk mengeksekusi kode fungsi lainnya.

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 di getName(), yang merupakan B dalam contoh ini, lalu dijeda pada C.

Menjalankan semua kode hingga baris tertentu

Saat men-debug fungsi panjang, mungkin ada banyak kode yang tidak terkait dengan masalah yang sedang Anda debug.

Anda bisa melewati semua baris, tetapi hal ini bisa membosankan. 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 diminati, lalu pilih Lanjutkan ke sini. DevTools akan menjalankan semua kode hingga tahap tersebut, lalu berhenti sementara pada 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.

Memaksa eksekusi skrip

Untuk mengabaikan semua titik henti sementara dan memaksa skrip untuk melanjutkan eksekusi, klik lama Lanjutkan Eksekusi Skrip , 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 di skrip utama dan skrip pekerja layanan. Anda ingin melihat properti lokal dan global untuk konteks pekerja layanan, tetapi panel Sumber menampilkan konteks skrip utama. Dengan mengklik entri pekerja layanan di 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 cakupan lokal, penutupan, dan global.

• Klik dua kali nilai properti untuk mengubahnya.
• Properti yang tidak dapat dihitung akan berwarna abu-abu.

Panel Cakupan pada screenshot di atas ditandai 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 titik ini.

Klik entri untuk menuju ke baris kode tempat fungsi tersebut dipanggil. Ikon panah biru mewakili fungsi yang saat ini ditandai 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:

1. Menjeda eksekusi fungsi pada titik henti sementara. Panel Call Stack mencatat urutan panggilan fungsi.

2. 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:

1. Salin kode di atas ke cuplikan baru dan jalankan. Eksekusi berhenti pada titik henti sementara baris kode debugger.
2. Perhatikan bahwa debugger menampilkan nilai saat ini di samping deklarasi fungsi: value = 1.
3. Mulai ulang frame bar().
4. Telusuri pernyataan pertambahan nilai dengan menekan F9. Perhatikan bahwa nilai saat ini bertambah: value = 2.
5. Atau, di panel Scope, klik dua kali nilai untuk mengeditnya dan menetapkan nilai yang diinginkan.

6. 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.

1. 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 > Ignore List.

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:

1. Di panel Sources, buka file src > app > app.component.ts.
2. Tetapkan titik henti sementara pada fungsi increment().
3. 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 stack panggilan saat ini ke papan klip.

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 membuka 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 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 fokus hanya pada kode yang Anda buat, panel Sumber > Halaman akan membuat semua skrip atau direktori yang ditambahkan ke Setelan > Daftar Abaikan secara default menjadi abu-abu.

Untuk menyembunyikan skrip tersebut sepenuhnya, pilih Sumber > Halaman > > Sembunyikan sumber yang tercantum dalam daftar yang diabaikan .

Abaikan skrip atau pola skrip

Mengabaikan 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 Anda proses debug tidak terkait dengan library pihak ketiga, abaikan skrip tersebut.

Mengabaikan skrip atau direktori dari hierarki file

Untuk mengabaikan skrip individual atau seluruh direktori:

1. Di Sources > Page, klik kanan direktori atau file skrip.
2. 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:

1. Buka file.
2. Klik kanan di mana saja.
3. 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:

1. Klik kanan fungsi dari skrip.
2. 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 ekspresi JavaScript yang valid.

• Klik Tambahkan Ekspresi untuk membuat ekspresi smartwatch baru.
• Klik Refresh untuk memuat ulang nilai semua ekspresi yang ada. Nilai-nilai diperbarui secara otomatis 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 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 melakukan perubahan di browser eksternal lalu memuat ulang halaman. Anda dapat mengedit skrip di DevTools.

Untuk mengedit skrip:

1. Buka file di panel Editor pada panel Sources.
2. Buat perubahan di panel Editor.

3. Tekan Command+S (Mac) atau Ctrl+S (Windows, Linux) untuk menyimpan. 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:

1. Menjeda eksekusi dengan titik henti sementara.
2. Edit fungsi yang dijeda.
3. Tekan Command / Control + S untuk menerapkan perubahan. Debugger memulai ulang fungsi secara otomatis.
4. 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:

1. Buka file di panel Editor pada panel Sources.
2. Untuk membuka kotak penelusuran bawaan, tekan Command+F (Mac) atau Ctrl+F (Windows, Linux).
3. 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.
4. Tekan Enter. Untuk melompat ke hasil penelusuran sebelumnya atau berikutnya, tekan tombol atas atau bawah.

Untuk mengganti teks yang Anda temukan:

1. Di kotak penelusuran, klik tombol Ganti.
2. Ketik teks yang akan diganti, lalu klik Replace atau Replace all.

Nonaktifkan JavaScript

Lihat Menonaktifkan JavaScript dengan Chrome DevTools.