Referensi proses debug JavaScript

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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.

Evaluasi inline ditampilkan di samping deklarasi.

Anda dapat menggunakan Console untuk membuat kueri variabel, konstanta, dan objek yang dievaluasi.

Menggunakan Console untuk melakukan kueri terhadap variabel, konstanta, dan objek yang telah dievaluasi.

Melihat pratinjau properti class/fungsi saat kursor diarahkan

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

Melihat pratinjau properti class/fungsi saat kursor diarahkan

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 Melangkahi untuk menjalankan fungsi tanpa melangkah ke fungsi tersebut.

Memilih 'Step over'.

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 Melangkah masuk untuk menyelidiki fungsi tersebut lebih lanjut.

Memilih 'Step into'.

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 Melangkah keluar untuk menjalankan kode fungsi lainnya.

Memilih 'Step out'.

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

Memilih 'Lanjutkan ke sini'.

Lanjutkan eksekusi skrip

Untuk melanjutkan eksekusi skrip setelah dijeda, klik Lanjutkan Eksekusi Skrip Melanjutkan Eksekusi Skrip. DevTools akan mengeksekusi skrip hingga titik henti sementara berikutnya, jika ada.

Memilih 'Lanjutkan eksekusi skrip'.

Paksa eksekusi skrip

Untuk mengabaikan semua titik henti sementara dan memaksa skrip untuk melanjutkan eksekusi, klik lama Lanjutkan Eksekusi Skrip Lanjutkan eksekusi skrip lalu pilih Paksa eksekusi skrip Paksa eksekusi skrip.

Memilih '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.

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.

Melewati ekspresi yang dipisahkan koma.

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.

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.

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:

  1. Menjeda eksekusi fungsi di titik henti sementara. Panel Call Stack mencatat urutan panggilan fungsi.
  2. Di panel Call Stack, klik kanan fungsi dan pilih Restart frame dari menu drop-down.

    Memilih 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:

  1. Salin kode di atas ke cuplikan baru dan jalankan. Eksekusi berhenti di titik henti sementara baris kode debugger.
  2. Perhatikan bahwa debugger menampilkan nilai saat ini di samping deklarasi fungsi: value = 1. Nilai saat ini di samping deklarasi fungsi.
  3. Mulai ulang frame bar(). Memulai ulang bingkai bar().
  4. Telusuri pernyataan pertambahan nilai dengan menekan F9. Menambahkan nilai saat ini. Perhatikan bahwa nilai saat ini meningkat: value = 2.
  5. Secara opsional, di panel Scope, klik dua kali nilai untuk mengeditnya dan tetapkan nilai yang diinginkan. Mengedit nilai di panel Scopes.
  6. Coba mulai ulang frame bar() dan lakukan langkah-langkah dalam pernyataan kenaikan beberapa kali lagi. Nilainya terus meningkat. Memulai ulang bingkai bar() lagi.

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.

  1. Sekarang, mulai ulang frame foo() di Call Stack. Memulai ulang frame foo(). Perhatikan bahwa nilainya adalah 0 lagi. ALT_TEXT_HERE

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. Setelan > Daftar Abaikan.

Stack panggilan.

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

Tampilkan frame dalam daftar yang diabaikan.

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

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.

Memilih 'Salin Pelacakan Tumpukan'.

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:

  • Ikon kode. Ditulis. Mirip dengan file sumber yang Anda lihat di IDE. DevTools menghasilkan file-file ini berdasarkan peta sumber yang disediakan oleh alat build Anda.
  • Ikon di-deploy. Di-deploy. File sebenarnya yang dibaca browser. Biasanya file ini diperkecil.

Untuk mengaktifkan pengelompokan, aktifkan opsi Menu tiga titik. > Group files by Authored/Deployed Eksperimental. pada menu tiga titik di bagian atas hierarki file.

Mengelompokkan file menurut Ditulis / Di-deploy.

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. Setelan > Abaikan Daftar secara default.

Untuk menyembunyikan skrip tersebut sekaligus, pilih Sumber > Halaman > Menu tiga titik. > Sembunyikan sumber yang tercantum dalam daftar yang diabaikan Eksperimental..

Sebelum dan sesudah menyembunyikan 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:

  1. Di Sumber > Halaman, klik kanan direktori atau file skrip.
  2. Pilih Tambahkan direktori/skrip ke daftar yang diabaikan.

Mengabaikan opsi untuk file skrip atau direktori.

Jika tidak menyembunyikan sumber yang tercantum dalam daftar yang diabaikan, Anda dapat memilih sumber tersebut di hierarki file dan, di banner peringatan Peringatan., klik Hapus dari daftar yang diabaikan atau Konfigurasi.

File yang diabaikan yang dipilih akan menampilkan tombol Hapus dan Konfigurasi.

Jika tidak, Anda dapat menghapus direktori dan skrip yang disembunyikan dan diabaikan dari daftar di Setelan. Setelan > Abaikan Daftar.

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.

Mengabaikan skrip dari panel Editor.

Anda dapat menghapus skrip dari daftar yang diabaikan dari Setelan. 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.

Mengabaikan skrip dari panel Call Stack.

Anda dapat menghapus skrip dari daftar yang diabaikan dari Setelan. Setelan > Daftar Abaikan.

Mengabaikan skrip dari Setelan

Lihat Setelan. 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.

Panel Watch.

  • Klik Add Expression Tambahkan ekspresi untuk membuat ekspresi smartwatch baru.
  • Klik Refresh Muat ulang untuk memuat ulang nilai dari semua ekspresi yang ada. Nilai otomatis diperbarui saat menelusuri kode.
  • Arahkan kursor ke ekspresi, lalu klik Delete Expression 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.

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.

Baris kode panjang yang dicetak indah ditampilkan dalam beberapa baris, dengan '-' untuk menunjukkan 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. Ciutkan.

Untuk membuka blok kode, klik {...} di sampingnya.

Untuk mengonfigurasi perilaku ini, lihat Setelan. 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:

  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 melakukan patch pada seluruh file JS ke dalam mesin JavaScript Chrome.

    Panel Editor.

    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:

  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, {i>string<i} digabungkan. Untuk memperbaikinya, fungsi parseInt() ditambahkan selama pengeditan langsung.

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. Masukkan kueri Anda di panel tersebut. Telusuri. Anda juga dapat:
    • Klik Cocokkan huruf besar/kecil. Match Case untuk membuat kueri peka huruf besar/kecil.
    • Klik Tombol RegEx. 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 Mengganti. Ganti. Mengganti.
  2. Ketik teks yang akan diganti, lalu klik Ganti atau Ganti semua.

Nonaktifkan JavaScript

Lihat Menonaktifkan JavaScript dengan Chrome DevTools.