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 jenis. Untuk tutorial interaktif tentang proses debug, lihat Memulai Proses Debug JavaScript di Chrome DevTools.

Ringkasan tentang kapan menggunakan setiap jenis titik henti sementara

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

Jenis Titik Henti SementaraGunakan ini jika Anda ingin ...
Baris kodeJeda di region kode yang tepat.
Baris kode bersyaratJeda di region kode yang tepat, tetapi hanya beberapa kondisi lain yang benar.
Titik logCatat pesan ke Konsol tanpa menjeda eksekusi.
DOMJeda pada kode yang mengubah atau menghapus node DOM tertentu, atau turunannya.
XHRJeda saat URL XHR berisi pola string.
Pemroses peristiwaJeda kode yang berjalan setelah peristiwa, seperti click, diaktifkan.
PengecualianJeda pada 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 Anda selidiki. DevTools selalu berhenti sementara sebelum baris kode ini dieksekusi.

Untuk menetapkan titik henti sementara baris kode di DevTools:

  1. Klik panel Sumber.
  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 lab-report-service tersebut. Ikon biru muncul di bagian atas kolom nomor baris.

Titik henti sementara baris kode.

Contoh ini menunjukkan titik henti sementara baris kode yang ditetapkan di baris 29.

Titik henti sementara baris kode dalam kode Anda

Panggil debugger dari kode Anda untuk berhenti di baris tersebut. Ini setara dengan titik henti sementara baris kode, kecuali 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 jika beberapa kondisi benar.

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 panel 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 kolom tersebut.
  5. Pilih Tambahkan titik henti sementara bersyarat. Dialog muncul di bawah baris kode.
  6. Masukkan kondisi 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 hanya diaktifkan saat x melebihi 10 dalam loop pada iterasi i=6.

Mencatat titik henti sementara baris kode ke dalam log

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

Untuk menetapkan logpoint:

  1. Buka panel 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 kolom tersebut.
  5. Pilih Tambahkan logpoint. Dialog muncul di bawah baris kode.

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

    Misalnya, Anda dapat mencatat:

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

    Dalam hal ini, pesan yang dicatat dalam log adalah:

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

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

Titik log yang mencatat string dan nilai variabel ke Konsol.

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

Mengedit titik henti sementara baris kode

Gunakan bagian Titik henti sementara untuk menonaktifkan, mengedit, atau menghapus titik henti sementara baris kode.

Mengedit grup titik henti sementara

Bagian Titik henti sementara mengelompokkan titik henti sementara berdasarkan file dan mengurutkannya berdasarkan 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, lalu klik Hampir..

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

Grup memiliki menu konteks. Di bagian Titik henti sementara, klik kanan grup, lalu pilih:

Menu konteks grup.

  • Menghapus semua titik henti sementara dalam file (grup).
  • Menonaktifkan semua titik henti sementara dalam file.
  • Aktifkan semua titik henti sementara dalam file.
  • Menghapus semua titik henti sementara (di semua file).
  • Menghapus titik henti sementara lainnya (di grup lain).

Mengedit 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 akan membuat penandanya di samping nomor baris menjadi transparan.
  • Arahkan kursor ke titik henti sementara, lalu klik Edit. untuk mengedit dan Hampir. untuk menghapusnya.

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

    Mengubah jenis titik henti sementara.

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

    Menu konteks titik henti sementara.

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

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

Melewati titik henti sementara dengan 'Jangan pernah menjeda di sini'

Gunakan titik henti sementara baris kode Jangan pernah jeda di sini untuk melewati jeda yang akan terjadi karena alasan lain. Hal ini dapat berguna saat Anda telah mengaktifkan titik henti sementara pengecualian, tetapi debugger terus berhenti pada pengecualian yang sangat berisik dan tidak ingin Anda debug.

Untuk membisukan lokasi istirahat:

  1. Di panel Sumber, buka file sumber dan temukan baris yang tidak ingin Anda pecahkan.
  2. Klik kanan nomor baris di kolom nomor baris di sebelah kiri, di samping pernyataan yang menyebabkan jeda.
  3. Dari menu drop-down, pilih Never pause here. Titik henti sementara (bersyarat) oranye akan muncul di samping baris.

Anda juga dapat membisukan titik henti sementara saat eksekusi dijeda. Tonton video berikutnya untuk mempelajari alur kerjanya.

Dengan Jangan pernah jeda di sini, Anda dapat membisukan pernyataan debugger dan setiap jenis titik henti sementara lainnya kecuali titik henti sementara baris kode dan Titik henti sementara pemroses peristiwa.

Jangan pernah menjeda di sini dapat gagal pada baris dengan beberapa pernyataan jika pernyataan yang tidak boleh dijeda berbeda dengan pernyataan yang menyebabkan jeda. Dalam kode yang dipetakan sumber, tidak setiap lokasi titik henti sementara sesuai dengan pernyataan asli yang menyebabkan jeda.

Titik henti sementara perubahan DOM

Gunakan titik henti sementara perubahan DOM jika Anda ingin berhenti di kode yang mengubah node DOM atau turunannya.

Untuk menetapkan titik henti sementara perubahan DOM:

  1. Klik tab Elements.
  2. Buka elemen tempat Anda ingin menetapkan titik henti sementara.
  3. Klik kanan elemen.
  4. Arahkan kursor ke Break on, lalu pilih Subtree modifications, Attribute modifications, atau Node removal.

Menu konteks untuk membuat titik henti sementara perubahan DOM.

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

Anda dapat menemukan daftar titik henti sementara perubahan DOM di:

  • Panel Elemen > Titik Henti Sementara DOM.
  • Panel samping Sumber > Titik Henti Sementara DOM.

Daftar Titik Henti Sementara DOM di panel Elemen dan Sumber.

Di sana, Anda dapat:

  • Aktifkan atau nonaktifkannya dengan Kotak centang..
  • Klik kanan > Hapus atau Tampilkan di DOM.

Jenis titik henti sementara perubahan DOM

  • Modifikasi subpohon. Dipicu saat turunan dari node yang saat ini dipilih dihapus atau ditambahkan, atau konten turunan diubah. Tidak dipicu pada perubahan atribut node turunan, atau pada perubahan apa pun pada node yang saat ini dipilih.
  • Perubahan atribut: Dipicu saat atribut ditambahkan atau dihapus pada node yang saat ini dipilih, atau saat nilai atribut berubah.
  • Penghapusan Node: Dipicu saat node yang saat ini dipilih dihapus.

Titik henti sementara XHR/pengambilan

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

Salah satu contoh kapan fungsi ini bermanfaat adalah saat Anda melihat bahwa halaman Anda meminta URL yang salah, dan Anda ingin cepat menemukan kode sumber AJAX atau Fetch yang menyebabkan permintaan salah.

Untuk menetapkan titik henti sementara XHR/pengambilan:

  1. Klik panel Sumber.
  2. Luaskan panel XHR Breakpoints.
  3. Klik Tambahkan. Add breakpoint.
  4. Masukkan string tempat Anda ingin memutus. DevTools berhenti saat string ini ada di mana saja 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/pengambilan untuk permintaan apa pun yang berisi org di URL.

Titik henti sementara pemroses peristiwa

Gunakan titik henti sementara pemroses peristiwa saat 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 panel Sumber.
  2. Luaskan panel Titik Henti Sementara Pemroses Peristiwa. DevTools menampilkan daftar kategori peristiwa, seperti Animasi.
  3. Centang salah satu kategori ini untuk berhenti setiap kali peristiwa apa pun dari kategori tersebut diaktifkan, atau luaskan kategori dan centang peristiwa tertentu.

Membuat titik henti sementara pemroses peristiwa.

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

Selain itu, Debugger menjeda peristiwa yang terjadi di web worker atau worklet dari jenis apa pun, termasuk Worklet Penyimpanan Bersama.

Debugger dijeda pada peristiwa pekerja layanan.

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

Anda juga dapat menemukan daftar pemroses peristiwa di panel Elemen > Pemroses Peristiwa.

Titik henti sementara pengecualian

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

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

  • Centang Kotak centang. Jeda 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. Jeda 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.

Menangkap pengecualian dan mengabaikan kode

Jika Daftar Abaikan diaktifkan, Debugger akan menjeda pengecualian yang tertangkap dalam frame yang tidak diabaikan atau melewati frame tersebut dalam stack panggilan.

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

Dijeda pada pengecualian yang 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 adalah fungsi yang ingin Anda debug, saat Anda ingin jeda setiap kali fungsi tertentu dipanggil. Anda dapat menyisipkan debug() ke dalam kode (seperti pernyataan console.log()) atau memanggilnya dari Konsol DevTools. 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 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.

Memastikan fungsi target dalam cakupan bisa sulit jika Anda memanggil debug() dari Console DevTools. Berikut adalah salah satu strateginya:

  1. Tetapkan titik henti sementara baris kode di suatu tempat tempat fungsi berada dalam cakupan.
  2. Picu titik henti sementara.
  3. Panggil debug() di Konsol DevTools 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 cross-site scripting (XSS).

Di bagian Titik henti sementara pada panel Sumber, buka bagian Titik Henti Sementara Pelanggaran CSP dan aktifkan salah satu opsi berikut atau keduanya, lalu jalankan kode:

  • Periksa Kotak centang. Pelanggaran Sink.

    Dijeda pada pelanggaran sink saat kotak centang yang sesuai diaktifkan.

    Dalam contoh ini, eksekusi dijeda pada pelanggaran sink.

  • Periksa Kotak centang. Pelanggaran Kebijakan.

    Dijeda saat terjadi pelanggaran kebijakan jika kotak centang yang sesuai diaktifkan.

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

Anda dapat menemukan informasi selengkapnya tentang penggunaan API: