Menjeda kode dengan titik henti sementara

Kayce Basques

Sofia Emelianova

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

Ringkasan kapan harus menggunakan setiap jenis titik henti sementara

Jenis titik henti sementara yang paling terkenal adalah baris kode. Tapi titik henti sementara baris kode bisa berupa tidak efisien, terutama jika Anda tidak tahu persis di mana harus mencari, atau jika Anda bekerja dengan dengan codebase berukuran besar. Anda dapat menghemat waktu saat {i>debugging<i} dengan mengetahui bagaimana dan kapan menggunakan jenis-jenis titik henti sementara.

Titik henti sementara baris kode

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

Untuk menyetel titik henti sementara baris kode di DevTools:

1. Klik panel Sources.
2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
3. Menuju ke baris kode.
4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik lab-report-service tersebut. Ikon biru muncul di di bagian atas kolom nomor baris.

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 menjeda di baris tersebut. Ini setara dengan baris kode titik henti sementara, 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 jika Anda ingin menghentikan eksekusi, tetapi hanya jika beberapa kondisi benar.

Titik henti sementara tersebut berguna jika Anda ingin melewatkan jeda yang tidak relevan dengan kasus Anda, terutama di sebuah 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. Menuju ke baris kode.
4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik kanan.
5. Pilih Tambahkan titik henti sementara bersyarat. Dialog ditampilkan 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.

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

Membuat log titik henti sementara baris kode

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

Untuk menetapkan logpoint:

1. Buka panel Sources.
2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
3. Menuju ke baris kode.
4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik kanan.
5. Pilih Add logpoint. Dialog ditampilkan di bawah baris kode.

6. Masukkan pesan log Anda dalam dialog. Anda dapat menggunakan sintaksis yang sama seperti yang biasa 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 akan muncul di bagian atas kolom nomor baris.

Contoh ini menunjukkan logpoint 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 menurut file dan mengurutkannya menurut nomor baris dan kolom. Anda dapat melakukan tindakan berikut dengan grup:

• Untuk menciutkan atau meluaskan grup, klik namanya.
• Untuk mengaktifkan atau menonaktifkan grup atau titik henti sementara secara terpisah, klik di samping grup atau titik henti sementara.
• Untuk menghapus grup, arahkan kursor ke grup tersebut dan klik .

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

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

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

Mengedit titik henti sementara

Untuk mengedit titik henti sementara:

• Klik di samping titik henti sementara untuk mengaktifkan atau menonaktifkannya. Saat Anda menonaktifkan titik henti sementara, panel Sources akan membuat penandanya di samping nomor baris menjadi transparan.
• Arahkan kursor ke titik henti sementara, lalu klik untuk mengedit dan untuk menghapusnya.

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

  

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

  

  • Tampilkan 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 ini untuk melihat cara kerja berbagai pengeditan titik henti sementara: menonaktifkan, menghapus, mengedit kondisi, menampilkan lokasi dari menu, dan mengubah jenis.

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

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

Untuk membisukan lokasi istirahat:

1. Di panel Sources, buka file sumber dan cari baris yang tidak ingin Anda hentikan.
2. Klik kanan nomor baris di kolom nomor baris di sebelah kiri, di sebelah pernyataan yang menyebabkan jeda.
3. Dari menu drop-down, pilih Jangan pernah jeda di sini. Titik henti sementara (kondisional) oranye akan muncul di samping baris.

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

Dengan opsi Never Pause here, 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 jeda di sini dapat gagal pada baris dengan beberapa pernyataan jika pernyataan yang tidak boleh dijeda berbeda dengan pernyataan yang menyebabkan jeda. Dalam kode sumber yang dipetakan, tidak setiap lokasi titik henti sementara sesuai dengan pernyataan asli yang menyebabkan jeda.

Titik henti sementara perubahan DOM

Gunakan titik henti sementara perubahan DOM saat Anda ingin menjeda kode yang mengubah simpul DOM atau anak-anak.

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 modification, Attribute Tempat, atau Penghapusan node.

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.
• Sumber > Panel samping DOM Breakpoints.

Di sana, Anda dapat:

• Aktifkan atau nonaktifkan dengan .
• Klik kanan > Hapus atau Tampilkan elemen tersebut di DOM.

Jenis titik henti sementara perubahan DOM

• Modifikasi subtree. Dipicu saat turunan dari node yang saat ini dipilih telah dihapus atau ditambahkan, atau konten turunan diubah. Tidak dipicu saat ada perubahan atribut node turunan, atau untuk setiap perubahan pada node yang saat ini dipilih.
• Modifikasi 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 ketika Anda ingin jeda ketika URL permintaan dari XHR berisi {i>string<i}. DevTools dijeda pada baris kode tempat XHR memanggil send().

Salah satu contohnya adalah saat halaman Anda meminta URL yang salah, dan Anda ingin menemukan kode sumber AJAX atau Fetch yang menyebabkan permintaan salah.

Untuk menetapkan titik henti sementara XHR/pengambilan:

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

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 berhenti menggunakan 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 Sources.
2. Luaskan panel Titik henti sementara Pemroses Peristiwa. DevTools menampilkan daftar kategori peristiwa, seperti sebagai Animation.
3. Centang salah satu kategori ini untuk menjeda setiap kali peristiwa dari kategori tersebut diaktifkan, atau perluas kategori dan mencentang peristiwa tertentu.

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

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

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

Anda juga dapat menemukan daftar pemroses peristiwa di Elements > Panel Pemroses Peristiwa.

Titik henti sementara pengecualian

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

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

• Periksa Menjeda pengecualian yang tidak tertangkap.

  

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

• Periksa Menjeda pengecualian yang tertangkap.

  

  Dalam contoh ini, eksekusi dijeda pada pengecualian yang tertangkap.

Pengecualian dalam panggilan asinkron

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

Pengecualian yang tertangkap dan kode yang diabaikan

Dengan mengaktifkan Ignore List, Debugger akan menjeda pengecualian yang diambil dalam frame yang tidak diabaikan atau melewati frame tersebut dalam stack panggilan.

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

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

Titik henti sementara fungsi

Panggil debug(functionName), dengan functionName adalah fungsi yang ingin Anda debug, jika Anda ingin berhenti sejenak setiap kali fungsi tertentu dipanggil. Anda dapat memasukkan debug() ke dalam kode (seperti console.log()) atau panggil dari DevTools Console. debug() setara dengan setelan 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();

Memastikan fungsi target berada dalam cakupan

DevTools menampilkan ReferenceError jika fungsi yang ingin Anda debug tidak ada 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 berada dalam cakupan dapat menjadi sulit jika Anda memanggil debug() dari DevTools Konsol Play. Berikut salah satu strateginya:

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

Titik henti sementara Jenis Tepercaya

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

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

• Periksa Pelanggaran Sink.

  

  Dalam contoh ini, eksekusi dijeda jika terjadi pelanggaran sink.

• Periksa Pelanggaran Kebijakan.

  

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

Anda dapat menemukan informasi selengkapnya tentang penggunaan API:

• Untuk meningkatkan upaya keamanan Anda, kunjungi Mencegah kerentanan pembuatan skrip lintas situs berbasis DOM dengan Jenis Tepercaya.
• Untuk proses debug, buka Menerapkan proses debug CSP dan Jenis Tepercaya di Chrome DevTools.