Referensi proses debug JavaScript

Kayce Basques

Sofia Emelianova

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

Saat eksekusi dijeda, debugger 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, menyelidiki 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
}

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.

Melangkah ke 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, 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 akan mengeksekusi baris kode ini, lalu dijeda pada B.

Melangkah keluar dari baris kode

Saat dijeda di dalam fungsi yang tidak terkait dengan masalah yang Anda 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
}

Anda dijeda pada A. Dengan menekan Step out, DevTools akan mengeksekusi kode lainnya di getName(), yang hanya B dalam contoh ini, lalu menjeda di 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 ini bisa merepotkan. 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 Anda minati, 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 akan mengeksekusi skrip hingga titik henti sementara berikutnya, jika ada.

Memaksa eksekusi skrip

Untuk mengabaikan semua titik henti sementara dan memaksa skrip Anda melanjutkan eksekusi, klik lama Resume Script Execution , lalu pilih Force script execution .

Mengubah konteks rangkaian pesan

Saat menggunakan web worker atau service worker, klik konteks yang tercantum di panel Threads untuk beralih ke konteks tersebut. Ikon panah biru mewakili konteks yang saat ini dipilih.

Panel Thread pada screenshot di atas digarisbawahi dengan warna biru.

Misalnya, 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 ke dalam Panel Threads, Anda dapat beralih ke konteks tersebut.

Menyusuri ekspresi 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 ini 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 kode yang 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 dienumerasi 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 langsung menuju 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 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 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.
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 Cakupan, 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.

Memulai 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 kembali menjadi 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 diabaikan di bagian Stack Panggilan.

Coba di halaman demo ini:

1. Di panel Sources, buka 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.

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)

Menavigasi hierarki file

Gunakan panel Halaman untuk menavigasi hierarki file.

File yang ditulis dan di-deploy grup dalam hierarki file

Saat mengembangkan aplikasi web menggunakan framework (misalnya, React atau Angular), Anda mungkin kesulitan untuk 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 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 > Kelompokkan file menurut Dibuat/Di-deploy di 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, 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 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 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 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 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.

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 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 memantau ekspresi JavaScript yang valid.

• Klik Tambahkan Ekspresi untuk membuat ekspresi smartwatch 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 akan menampilkan file yang diminifikasi dengan format yang lebih rapi. 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 membentangkan 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 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 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 Call Stack.
• Tidak boleh ada panggilan rekursif ke fungsi yang sama di stack yang lebih jauh.

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 akan 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 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 Replace atau Replace all.

Nonaktifkan JavaScript

Lihat Menonaktifkan JavaScript dengan Chrome DevTools.