Menjeda kode dengan titik henti sementara

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Gunakan titik henti sementara untuk menjeda kode JavaScript. Panduan ini menjelaskan setiap jenis titik henti sementara yang tersedia di DevTools, serta kapan harus menggunakan dan cara menetapkan setiap jenisnya. Untuk tutorial interaktif proses debug, lihat Memulai Proses Debug JavaScript di Chrome DevTools.

Ringkasan tentang kapan harus menggunakan setiap jenis titik henti sementara

Jenis titik henti sementara yang paling terkenal adalah baris kode. Namun, titik henti sementara baris kode mungkin tidak efisien untuk disetel, terutama jika Anda tidak tahu persis ke mana harus mencarinya, atau jika Anda menggunakan codebase besar. Anda dapat menghemat waktu saat melakukan proses debug dengan mengetahui cara dan waktu untuk menggunakan jenis titik henti sementara lainnya.

Jenis Titik Henti SementaraGunakan ini jika Anda ingin ...
Baris kodeJeda di region kode yang tepat.
Baris kode kondisionalJeda di region kode yang tepat, tetapi hanya ketika beberapa kondisi lainnya benar.
LogpointCatat pesan ke Konsol tanpa menjeda eksekusi.
DOMHentikan sementara pada kode yang mengubah atau menghapus node DOM tertentu, atau turunannya.
XHRJeda ketika URL XHR berisi pola string.
Pemroses peristiwaJeda di kode yang berjalan setelah peristiwa, seperti click, diaktifkan.
PengecualianJeda di baris kode yang menampilkan pengecualian yang tertangkap atau tidak tertangkap.
FungsiJeda setiap kali fungsi tertentu dipanggil.
Jenis TepercayaJeda pada pelanggaran Jenis Tepercaya.

Titik henti sementara baris kode

Gunakan titik henti sementara baris kode jika Anda mengetahui wilayah kode yang tepat yang perlu diselidiki. DevTools selalu dijeda sebelum baris kode ini dieksekusi.

Untuk mengatur titik henti sementara baris kode di DevTools:

  1. Klik tab Sources.
  2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
  3. Buka baris kode.
  4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik tombol tersebut. Ikon biru muncul di bagian atas kolom nomor baris.

Titik henti sementara baris kode.

Contoh ini menampilkan titik henti sementara baris kode yang ditetapkan pada baris 29.

Titik henti sementara baris kode dalam kode Anda

Panggil debugger dari kode Anda untuk menjeda di baris tersebut. Ini setara dengan titik henti sementara baris kode, kecuali bahwa titik henti sementara ditetapkan dalam kode Anda, bukan di UI DevTools.

console.log('a');
console.log('b');
debugger;
console.log('c');

Titik henti sementara baris kode bersyarat

Gunakan titik henti sementara baris kode bersyarat saat Anda ingin menghentikan eksekusi, tetapi hanya saat beberapa kondisi terpenuhi.

Titik henti sementara tersebut berguna saat Anda ingin melewati jeda yang tidak relevan dengan kasus Anda, terutama dalam loop.

Untuk menetapkan titik henti sementara baris kode bersyarat:

  1. Buka tab Sources.
  2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
  3. Buka baris kode.
  4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik kanan kotak tersebut.
  5. Pilih Tambahkan titik henti sementara bersyarat. Dialog akan ditampilkan di bawah garis kode.
  6. Masukkan kondisi Anda dalam dialog.
  7. Tekan Enter untuk mengaktifkan titik henti sementara. Ikon oranye dengan tanda tanya muncul di bagian atas kolom nomor baris.

Titik henti sementara baris kode bersyarat.

Contoh ini menunjukkan titik henti sementara baris kode bersyarat yang diaktifkan hanya saat x melebihi 10 dalam sebuah loop pada iterasi i=6.

Membuat log titik henti sementara baris kode

Gunakan titik henti sementara baris kode (logpoint) untuk mencatat pesan ke Konsol tanpa menjeda eksekusi dan tanpa mengacaukan kode Anda dengan panggilan console.log().

Untuk menetapkan logpoint:

  1. Buka tab Sources.
  2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
  3. Buka baris kode.
  4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik kanan kotak tersebut.
  5. Pilih Add logpoint. Dialog akan ditampilkan di bawah garis kode.

  6. Masukkan pesan log Anda dalam dialog. Anda dapat menggunakan sintaksis yang sama seperti yang digunakan untuk panggilan console.log(message).

    Misalnya, Anda dapat mencatat:

    "A string " + num, str.length > 1, str.toUpperCase(), obj

    Dalam hal ini, pesan yang dicatat adalah:

    // str = "test"
// num = 3
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}

  7. Tekan Enter untuk mengaktifkan titik henti sementara. Ikon merah muda dengan dua titik akan muncul di bagian atas kolom nomor baris.

Logpoint yang mencatat string dan nilai variabel ke Konsol.

Contoh ini menunjukkan logpoint di baris 30 yang mencatat string dan nilai variabel ke Konsol.

Edit titik henti sementara baris kode

Gunakan panel Breakpoints untuk menonaktifkan, mengedit, atau menghapus titik henti sementara baris kode.

Mengedit grup titik henti sementara

Panel Breakpoints mengelompokkan titik henti sementara menurut file dan mengurutkannya menurut nomor baris dan kolom. Anda dapat melakukan hal berikut dengan grup:

  • Untuk menciutkan atau meluaskan grup, klik namanya.
  • Untuk mengaktifkan atau menonaktifkan grup atau titik henti sementara satu per satu, klik Kotak centang. di samping grup atau titik henti sementara.
  • Untuk menghapus grup, arahkan kursor ke grup tersebut dan klik Tutup..

Video ini menunjukkan cara menciutkan grup dan menonaktifkan atau mengaktifkan titik henti sementara satu per satu atau menurut grup. Saat Anda menonaktifkan titik henti sementara, panel Sumber membuat penandanya di samping nomor baris menjadi transparan.

Grup memiliki menu konteks. Di panel Breakpoints, klik kanan grup, lalu pilih:

Menu konteks grup.

  • Hapus semua titik henti sementara dalam file (grup).
  • Nonaktifkan semua titik henti sementara dalam file.
  • Aktifkan semua titik henti sementara dalam file.
  • Hapus semua titik henti sementara (di semua file).
  • Hapus titik henti sementara lainnya (di grup lain).

Edit titik henti sementara

Untuk mengedit titik henti sementara:

  • Klik Kotak centang. di samping titik henti sementara untuk mengaktifkan atau menonaktifkannya. Saat Anda menonaktifkan titik henti sementara, panel Sumber membuat penandanya di samping nomor baris menjadi transparan.
  • Arahkan kursor ke titik henti sementara dan klik Edit. untuk mengedit dan Tutup. untuk menghapusnya.

  • Saat mengedit titik henti sementara, ubah jenisnya dari menu drop-down di editor langsung.

    Mengubah jenis titik henti sementara.

  • Klik kanan titik henti sementara untuk melihat menu konteksnya dan pilih salah satu opsi:

    Menu konteks titik henti sementara.

    • Mengungkap lokasi.
    • Edit kondisi atau logpoint.
    • Aktifkan semua titik henti sementara.
    • Nonaktifkan semua titik henti sementara.
    • Hapus titik henti sementara.
    • Hapus titik henti sementara lainnya (di semua file).
    • Hapus semua titik henti sementara (di semua file).

Tonton video untuk melihat cara kerja berbagai pengeditan titik henti sementara: menonaktifkan, menghapus, mengedit kondisi, menampilkan lokasi dari menu, dan mengubah jenis.

Titik henti sementara perubahan DOM

Gunakan titik henti sementara perubahan DOM saat Anda ingin menjeda kode yang mengubah node DOM atau turunannya.

Untuk menetapkan titik henti sementara perubahan DOM:

  1. Klik tab Elemen.
  2. Buka elemen tempat Anda ingin menetapkan titik henti sementara.
  3. Klik kanan elemen.
  4. Arahkan kursor ke Jeda aktif, lalu pilih Subtree Modified, Attribute spesifik, atau Node remove.

Menu konteks untuk membuat titik henti sementara perubahan DOM.

Contoh ini menampilkan menu konteks untuk membuat titik henti sementara perubahan DOM.

Anda dapat menemukan daftar titik henti sementara perubahan DOM di:

  • Elements > Panel DOM Breakpoints.
  • Sources > Panel samping DOM Breakpoints.

Daftar Titik Henti Sementara DOM di panel Elements dan Sources.

Di sana, Anda dapat:

  • Aktifkan atau nonaktifkan dengan Kotak centang..
  • Klik kanan > Hapus atau Buka item tersebut di DOM.

Titik henti sementara perubahan DOM

  • Modifikasi sub-hierarki. Dipicu jika turunan dari node yang saat ini dipilih dihapus atau ditambahkan, atau konten turunan berubah. Tidak dipicu saat ada perubahan atribut node turunan, atau perubahan apa pun pada node yang saat ini dipilih.
  • Perubahan atribut: Dipicu saat atribut ditambahkan atau dihapus pada node yang saat ini dipilih, atau ketika nilai atribut berubah.
  • Penghapusan Node: Dipicu jika node yang saat ini dipilih dihapus.

XHR/ambil titik henti sementara

Gunakan titik henti sementara XHR/fetch saat Anda ingin berhenti berfungsi ketika URL permintaan XHR berisi string tertentu. DevTools dijeda di baris kode tempat XHR memanggil send().

Salah satu contoh ketika hal ini berguna adalah ketika Anda melihat bahwa laman meminta URL yang salah, dan Anda ingin menemukan kode sumber AJAX atau Ambil dengan cepat yang menyebabkan permintaan salah.

Untuk menetapkan titik henti sementara XHR/pengambilan:

  1. Klik tab Sources.
  2. Luaskan panel XHR Breakpoints.
  3. Klik Tambahkan. Add titik henti sementara.
  4. Masukkan string yang ingin Anda putus. DevTools dijeda saat string ini ada di mana pun di URL permintaan XHR.
  5. Tekan Enter untuk mengonfirmasi.

Membuat titik henti sementara XHR/pengambilan.

Contoh ini menunjukkan cara membuat titik henti sementara XHR/pengambilan di Titik Henti Sementara XHR/fetch untuk setiap permintaan yang berisi org di URL.

Titik henti sementara pemroses peristiwa

Gunakan titik henti sementara pemroses peristiwa jika Anda ingin menjeda kode pemroses peristiwa yang berjalan setelah peristiwa diaktifkan. Anda dapat memilih peristiwa tertentu, seperti click, atau kategori peristiwa, seperti semua peristiwa mouse.

  1. Klik tab Sources.
  2. Luaskan panel Event Listener Breakpoints. DevTools menampilkan daftar kategori peristiwa, seperti Animasi.
  3. Centang salah satu kategori ini untuk menjeda setiap kali peristiwa dari kategori tersebut diaktifkan, atau luaskan kategori dan periksa peristiwa tertentu.

Membuat titik henti sementara pemroses peristiwa.

Contoh ini menunjukkan cara membuat titik henti sementara pemroses peristiwa untuk deviceorientation.

Selain itu, Debugger akan dijeda pada peristiwa yang terjadi di pekerja web atau worklet dari jenis apa pun, termasuk Shared Storage Worklet.

Debugger dijeda pada peristiwa pekerja layanan.

Contoh ini menampilkan Debugger yang dijeda pada peristiwa setTimer yang terjadi di pekerja layanan.

Anda juga dapat menemukan daftar pemroses peristiwa di panel Elements > Event Listeners.

Titik henti sementara pengecualian

Gunakan titik henti sementara pengecualian saat Anda ingin menjeda baris kode yang menampilkan pengecualian yang tertangkap atau tidak tertangkap. Anda dapat menjeda kedua pengecualian tersebut secara terpisah di sesi debug mana pun selain Node.js.

Di panel Breakpoints pada tab Sources, aktifkan salah satu opsi berikut atau keduanya, lalu jalankan kode:

  • Centang Kotak centang. Menjeda pada pengecualian yang tidak tertangkap.

    Dijeda pada pengecualian yang tidak tertangkap saat kotak centang yang sesuai diaktifkan.

    Dalam contoh ini, eksekusi dijeda pada pengecualian yang tidak tertangkap.

  • Centang Kotak centang. Menjeda pada pengecualian yang tertangkap.

    Dijeda pada pengecualian yang tertangkap saat kotak centang yang sesuai diaktifkan.

    Dalam contoh ini, eksekusi dijeda pada pengecualian yang tertangkap.

Pengecualian dalam panggilan asinkron

Dengan mengaktifkan salah satu atau kedua kotak centang yang tertangkap dan tidak tertangkap, Debugger akan mencoba menjeda pengecualian yang sesuai dalam panggilan sinkron dan asinkron. Dalam kasus asinkron, Debugger mencari pengendali penolakan di seluruh promise untuk menentukan kapan harus berhenti.

Pengecualian yang tertangkap dan kode yang diabaikan

Dengan mengaktifkan Ignore List, Debugger akan dijeda pada pengecualian yang tertangkap dalam frame yang tidak diabaikan atau melewati frame tersebut dalam stack panggilan.

Contoh berikutnya menunjukkan Debugger yang dijeda pada pengecualian yang tertangkap dan ditampilkan oleh library.js yang diabaikan dan melewati mycode.js yang tidak diabaikan.

Dijeda pada pengecualian tertangkap yang melewati frame yang tidak diabaikan dalam stack panggilan.

Untuk mempelajari lebih lanjut perilaku Debugger dalam kasus ekstrem, uji kumpulan skenario di halaman demo ini.

Titik henti sementara fungsi

Panggil debug(functionName), dengan functionName sebagai fungsi yang ingin Anda debug, saat Anda ingin menjeda setiap kali fungsi tertentu dipanggil. Anda dapat menyisipkan debug() ke dalam kode (seperti pernyataan console.log()) atau memanggilnya dari DevTools Console. debug() setara dengan menetapkan titik henti sementara baris kode di baris pertama fungsi.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Pastikan fungsi target dalam cakupan

DevTools menampilkan ReferenceError jika fungsi yang ingin Anda debug tidak termasuk dalam cakupan.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

Sangat sulit untuk memastikan fungsi target berada dalam cakupan jika Anda memanggil debug() dari Konsol DevTools. Berikut ini salah satu strategi:

  1. Tetapkan titik henti sementara baris kode di suatu tempat tempat fungsi berada dalam cakupan.
  2. Picu titik henti sementara.
  3. Panggil debug() di DevTools Console saat kode masih dijeda pada titik henti sementara baris kode.

Titik henti sementara Jenis Tepercaya

Trusted Type API memberikan perlindungan terhadap eksploitasi keamanan yang dikenal sebagai serangan pembuatan skrip lintas situs (XSS).

Di panel Breakpoints pada tab Sources, buka bagian CSP Melanggar Breakpoints dan aktifkan salah satu opsi berikut atau keduanya, lalu jalankan kode:

  • Periksa Kotak centang. Pelanggaran Wastafel.

    Dijeda pada pelanggaran sink saat kotak centang yang sesuai diaktifkan.

    Dalam contoh ini, eksekusi dijeda pada pelanggaran sink.

  • Periksa Kotak centang. Pelanggaran Kebijakan.

    Dijeda pada pelanggaran kebijakan saat kotak centang yang sesuai diaktifkan.

    Dalam contoh ini, eksekusi dijeda karena terdapat pelanggaran kebijakan. Kebijakan Jenis Tepercaya disiapkan menggunakan trustedTypes.createPolicy.

Anda dapat menemukan informasi selengkapnya tentang penggunaan API ini: