Referensi proses debug JavaScript

Kayce Basques

Sofia Emelianova

Temukan alur kerja proses debug baru dengan referensi komprehensif fitur proses debug Chrome DevTools.

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.

Poin penting: Saat eksekusi dijeda, Anda juga dapat memulai ulang fungsi saat ini dan bahkan mengeditnya secara langsung.

Melihat pratinjau properti class/fungsi saat mengarahkan kursor

Saat eksekusi dijeda, arahkan kursor ke nama class atau fungsi untuk melihat pratinjau propertinya.

Menyusuri kode

Setelah kode dijeda, jalankan kode tersebut, satu ekspresi pada satu waktu, dengan menyelidiki alur kontrol dan nilai properti di sepanjang proses.

Melewati baris kode

Saat dijeda pada baris kode yang berisi fungsi yang tidak relevan dengan masalah yang sedang Anda debug, klik Step over untuk mengeksekusi fungsi tersebut tanpa masuk ke dalamnya.

Misalnya, 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
}

Anda dijeda pada A. Dengan menekan Step over, DevTools akan mengeksekusi semua kode dalam fungsi yang Anda lewati, yaitu B dan C. Kemudian, DevTools dijeda di 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, 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;
}

Anda dijeda pada A. Dengan menekan Step into, DevTools akan mengeksekusi baris kode ini, lalu dijeda pada B.

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, 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 yang panjang, mungkin ada banyak kode yang tidak terkait dengan masalah yang sedang Anda proses debug.

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

Melanjutkan eksekusi skrip

Untuk melanjutkan eksekusi skrip setelah jeda, 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 melanjutkan eksekusi, klik lama Resume Script Execution , lalu pilih Force script execution .

Ubah konteks rangkaian pesan

Saat menggunakan pekerja web 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 Thread, Anda dapat beralih ke konteks tersebut.

Menyusuri ekspresi yang dipisahkan koma

Poin penting: Mulai dari Chrome versi 108, Debugger dapat menelusuri ekspresi yang dipisahkan titik koma (;) dan yang dipisahkan koma (,).

Melewati ekspresi yang dipisahkan koma memungkinkan Anda men-debug kode yang diminifikasi. Misalnya, pertimbangkan 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 juga akan melakukan langkah-langkah yang sama untuk ekspresi tersebut.

Oleh karena itu, perilaku langkahnya sama:

• 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 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 akan berwarna abu-abu.

Panel Cakupan pada screenshot di atas diuraikan dengan warna biru.

Melihat stack panggilan saat ini

Saat dijeda di baris kode, gunakan panel Call Stack untuk melihat stack panggilan yang membawa Anda ke titik ini.

Klik entri untuk beralih ke baris kode tempat fungsi tersebut dipanggil. Ikon panah biru mewakili fungsi yang saat ini ditandai oleh DevTools.

Panel Call Stack pada screenshot di atas digarisbawahi dengan warna biru.

Catatan: Saat tidak dijeda pada baris kode, panel Call Stack akan kosong.

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

   

   Catatan: Anda dapat memulai ulang frame fungsi apa pun di Call Stack, kecuali fungsi WebAssembly, asinkron, dan generator.

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 ke dalam log, dan memanggil fungsi bar(). Fungsi bar(), pada gilirannya, akan menambahkan 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.
   Perhatian: Saat eksekusi dijeda, jangan ubah urutan frame stack panggilan secara terprogram. Hal ini dapat menyebabkan error yang tidak terduga.
2. Perhatikan bahwa debugger menampilkan nilai saat ini di samping deklarasi fungsi: value = 1.
3. Mulai ulang frame bar().
4. Lanjutkan pernyataan penambahan nilai dengan menekan F9. Perhatikan bahwa nilai saat ini meningkat: 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 lanjutkan pernyataan penambahan beberapa kali lagi. Nilainya terus meningkat.

   Poin penting: Mengapa nilai tidak direset ke 0?

Memulai ulang frame tidak mereset argumen. Dengan kata lain, mulai ulang tidak memulihkan status awal saat panggilan fungsi. Sebagai gantinya, fungsi ini hanya memindahkan pointer eksekusi ke awal fungsi.

Oleh karena itu, nilai argumen saat ini tetap ada dalam memori di seluruh mulai ulang fungsi yang sama.

1. Sekarang, mulai ulang frame foo() di Call Stack. Perhatikan bahwa nilainya kembali menjadi 0.
   Poin penting: Mengapa nilai direset ke 0?

Di JavaScript, perubahan pada argumen tidak terlihat (direfleksikan) 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 menghapus skrip apa pun yang ditambahkan ke Setelan > Daftar Abaikan.

Untuk melihat stack panggilan lengkap termasuk frame pihak ketiga, aktifkan Tampilkan frame dalam daftar yang diabaikan di bagian Stack Panggilan.

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-listed frames dan amati daftar frame yang relevan atau lengkap dalam stack panggilan.

Melihat frame asinkron

Jika didukung oleh framework yang Anda gunakan, DevTools dapat melacak operasi asinkron dengan menautkan kedua bagian kode asinkron.

Dalam hal ini, Call Stack menampilkan seluruh histori panggilan termasuk frame panggilan asinkron.

Poin penting: DevTools menerapkan fitur "Pemberian Tag Stack Asinkron" ini berdasarkan metode API console.createTask(). Framework dapat menerapkan API. Misalnya, Angular mendukung fitur ini.

Menyalin 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 menavigasi hierarki file.

Mengelompokkan file yang ditulis dan di-deploy di hierarki file

Catatan: Ini adalah fitur pratinjau yang tersedia mulai Chrome versi 104.

Saat mengembangkan aplikasi web menggunakan framework (misalnya, React atau Angular), Anda mungkin kesulitan menavigasi sumber karena file yang diminifikasi yang dihasilkan oleh alat build (misalnya, webpack atau Vite).

Untuk membantu Anda menavigasi sumber, panel Sources > Page dapat mengelompokkan file ke dalam dua kategori:

• Ditulis. Mirip dengan file sumber yang Anda lihat di IDE. DevTools membuat 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

Catatan: Ini adalah fitur pratinjau yang tersedia mulai Chrome versi 106.

Untuk membantu Anda berfokus hanya pada kode yang Anda buat, panel Sumber > Halaman akan membuat semua skrip atau direktori yang ditambahkan ke Setelan > Daftar Abaikan berwarna abu-abu secara default.

Untuk menyembunyikan skrip tersebut sekaligus, pilih Sumber > Halaman > > Sembunyikan sumber yang dikecualikan .

Mengabaikan 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 menelusuri kode.

Misalnya, Anda sedang mempelajari kode ini:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A adalah library pihak ketiga yang Anda percayai. Jika Anda yakin bahwa masalah yang Anda debug tidak terkait dengan library pihak ketiga, sebaiknya 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 abaikan, Anda dapat memilih sumber tersebut dalam hierarki file dan, di banner peringatan , klik Hapus dari daftar yang diabaikan atau Konfigurasi.

Jika tidak, Anda dapat menghapus direktori dan skrip yang tersembunyi 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 pada 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.

Menjalankan 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 dalam DevTools.

Lihat Menjalankan Cuplikan Kode dari Halaman Mana Pun untuk mempelajari lebih lanjut.

Melihat nilai ekspresi JavaScript kustom

Gunakan panel Pantau untuk memantau nilai ekspresi kustom. Anda dapat memantau 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 Halaman, 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 akan menampilkan file yang diminifikasi dengan format yang lebih rapi. Saat dicetak dengan baik, Editor dapat menampilkan satu baris kode panjang dalam beberapa baris, dengan - untuk menunjukkan bahwa baris tersebut adalah kelanjutan baris.

Untuk melihat file yang diminifikasi saat dimuat, klik { } di pojok kiri bawah Editor.

Menciutkan blok kode

Untuk melipat blok kode, arahkan kursor ke nomor baris di kolom sebelah kiri, lalu klik Ciutkan.

Untuk membentangkan 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 tidak perlu membuat 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 menerapkan patch ke seluruh file JS ke dalam mesin JavaScript Chrome.

   

   Panel Editor pada screenshot di atas digarisbawahi dengan warna biru.

Mengedit fungsi yang dijeda secara langsung

Catatan: Fitur ini tersedia mulai Chrome versi 105.

Saat 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 stack yang lebih jauh.

Poin penting: Saat Anda menerapkan perubahan, debugger akan memulai ulang fungsi secara otomatis. Jadi, batasan mulai ulang fungsi juga berlaku. Anda tidak dapat memulai ulang fungsi WebAssembly, asinkron, dan generator.

Untuk mengedit fungsi secara langsung:

1. Jeda 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 langsung.

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 kotak, masukkan kueri Anda. Secara opsional, Anda dapat:
   • Klik Cocokkan Huruf untuk membuat kueri Anda peka huruf besar/kecil.
   • Klik Gunakan Ekspresi Reguler 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 Ganti atau Ganti semua.

Menonaktifkan JavaScript

Lihat Menonaktifkan JavaScript dengan Chrome DevTools.