Hentikan Kode dengan Titik Putus

Gunakan titik putus untuk menghentikan kode JavaScript. Panduan ini menjelaskan setiap jenis titik putus yang tersedia di DevTools, juga kapan menggunakan dan cara mengatur setiap jenis. Untuk tutorial praktik langsung tentang proses debug, baca Memulai dengan Proses Debug JavaScript di Chrome DevTools.

Ringkasan tentang kapan menggunakan setiap tipe titik putus

Tipe titik putus paling terkenal adalah baris kode. Tetapi titik putus baris kode tidak efisien diatur, terutama jika Anda tidak tahu persis di mana mencari, atau jika Anda mengerjakan codebase besar. Anda bisa menghemat waktu saat proses debug dengan mengetahui cara dan kapan menggunakan tipe lain titik putus.

Tipe Titik PutusGunakan Tipe Ini Saat Anda Ingin Berhenti...
Baris kode Di region kode yang tepat.
Baris kode bersyarat Di region kode yang tepat, tetapi hanya beberapa kondisi lain yang benar.
DOM Pada kode yang mengubah atau menghapus node DOM tertentu, atau turunannya.
XHR Bila URL XHR berisi pola string.
Pemerhati kejadian Di kode yang berjalan setelah kejadian, seperti click, diinisiasi.
Pengecualian Di kode baris yang mengembalikan pengecualian yang tertangkap atau tidak tertangkap.
Fungsi Kapan pun fungsi tertentu dipanggil.

Titik putus baris kode

Gunakan titik putus baris kode bila Anda tahu wilayah region tepat yang perlu Anda selidiki. DevTools selalu berhenti sebelum baris kode ini dijalankan.

Untuk mengatur titik putus baris kode di DevTools:

  1. Klik tab Sources.
  2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
  3. Ke baris kode.
  4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik kolom itu. Ikon biru muncul di bagian atas kolom nomor baris.
Titik putus baris kode. Gambar 1: Titik putus baris kode diatur di baris 29

Titik putus baris kode dalam kode Anda

Panggil debugger dari kode Anda untuk berhenti di baris itu. Ini setara dengan a titik putus baris kode, kecuali titik putus itu diatur dalam kode Anda, bukan di UI DevTools.

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

Titik putus baris kode bersyarat

Gunakan titik putus baris kode bersyarat bila Anda tahu region kode yang tepat yang perlu Anda selidiki, tetapi Anda ingin berhenti hanya bila beberapa kondisi lain benar.

Untuk mengatur titik putus baris kode bersyarat:

  1. Klik tab Sources.
  2. Buka file yang berisi baris kode yang ingin Anda pecahkan.
  3. Ke baris kode.
  4. Di sebelah kiri baris kode adalah kolom nomor baris. Klik kanan kolom itu.
  5. Pilih Add conditional breakpoint. Dialog muncul di bawah baris kode.
  6. Masukkan kondisi dalam dialog.
  7. Tekan Enter untuk mengaktifkan titik putus. Ikon oranye muncul di bagian atas kolom nomor baris.
Titik putus baris kode bersyarat. Gambar 2: Titik putus baris kode bersyarat diatur di baris 32

Kelola titik putus baris kode

Gunakan panel Breakpoints untuk menonaktifkan atau menghapus titik putus baris kode dari satu lokasi.

Panel Breakpoints. Gambar 3: Panel Breakpoints menampilkan dua titik putus baris kode: satu di baris 15 dari get-started.js, yang lain di baris 32
  • Centang kotak centang di samping entri untuk menonaktifkan titik putus itu.
  • Klik kanan untuk menghapus titik putus itu.
  • Klik kanan di mana pun di panel Breakpoints untuk menonaktifkan semua titik putus, menonaktifkan semua titik henti, atau menghapus semua titik putus. Dengan menonaktifkan semua titik putus setara dengan menghapus centang kotak masing-masing. Dengan menonaktifkan semua titik henti memerintahkan DevTools untuk mengabaikan semua titik putus baris kode, tetapi juga mempertahankan kondisi aktif semua titik ini, sehingga ada dalam kondisi sama seperti sebelum Anda mengaktifkan ulang titik ini.
Titik putus nonaktif di panel Breakpoints. Gambar 4: Titik putus nonaktif di panel Breakpoints tidak aktif dan transparan

Titik putus perubahan DOM

Gunakan titik putus perubahan DOM bila Anda ingin berhenti di kode yang mengubah node DOM atau turunannya.

Untuk mengatur titik putus perubahan DOM:

  1. Klik tab Elements.
  2. Ke elemen tempat Anda ingin mengatur titik putus.
  3. Klik kanan elemen.
  4. Arahkan kursor ke atas Break on lalu pilih Subtree modifications, Attribute modifications, atau Node removal.
Menu konteks untuk membuat titik putus perubahan DOM. Gambar 5: Menu konteks untuk membuat titik putus perubahan DOM.

Titik putus perubahan DOM

  • Subtree modifications. Dipicu bila turunan dari node yang saat ini dipilih telah dihapus, ditambah, atau konten turunan telah berubah. Tidak dipicu bila ada perubahan atribut node turunan, atau ada perubahan pada node yang saat ini dipilih.

  • Attributes modifications: Dipicu bila ada atribut yang ditambah atau dihapus pada node yang saat ini dipilih, atau bila ada nilai atribut yang berubah.

  • Node Removal: Dipicu bila node yang saat ini dipilih dihapus.

Titik putus XHR/Fetch

Gunakan titik putus XHR bila Anda ingin memutus URL permintaan dari XHR berisi string tertentu. DevTools berhenti di baris kode tempat XHR memanggil send().

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

Untuk mengatur titik putus XHR:

  1. Klik tab Sources.
  2. Luaskan panel XHR Breakpoints.
  3. Klik Add breakpoint.
  4. Masukkan string tempat Anda ingin memutus. DevTools berhenti saat string ini ada di mana pun di URL permintaan XHR.
  5. Tekan Enter untuk mengonfirmasi.
Membuat titik putus XHR. Gambar 6: Membuat titik putus XHR di XHR Breakpoints untuk permintaan apa pun yang berisi org di URL

Titik putus pemerhati kejadian

Gunakan titik putus pemerhati kejadian saat Anda berhenti di kode pemerhati kejadian yang berjalan setelah kejadian diinisiasi. Anda bisa memilih kejadian tertentu, seperti click, atau kategori acara, seperti semua kejadian mouse.

  1. Klik tab Sources.
  2. Luaskan panel Event Listener Breakpoints. DevTools menampilkan daftar kategori acara, seperti Animation.
  3. Centang salah satu kategori untuk berhenti setiap kali kejadian apa pun dari kategori itu diinisiasi, atau luaskan kategori dan centang kejadian tertentu.
Membuat titik putus pemerhati kejadian. Gambar 7: Membuat titik putus pemerhati kejadian untuk deviceorientation

Titik putus pengecualian

Gunakan titik putus pengecualian bila kamu ingin berhenti di baris kode yang mengembalikan pengecualian yang tertangkap atau tidak tertangkap.

  1. Klik tab Sources.
  2. Klik Pause on exceptions Berhenti di
pengecualian. Panel jaringan berubah menjadi biru ketika diaktifkan.
  3. (Opsional) Centang kotak Pause On Caught Exceptions jika Anda juga ingin berhenti di pengecualian tertangkap, selain yang tidak tertangkap.
Berhenti di pengecualian tidak tertangkap. Gambar 7: Berhenti di pengecualian tidak tertangkap

Fungsi titik putus

Panggil debug(functionName), tempat functionName adalah fungsi Anda ingin men-debug, saat Anda ingin menjeda setiap kali fungsi tertentu dipanggil. Anda bisa memasukkan debug() ke kode (seperti console.log() pernyataan) atau panggil dari DevTools Console. debug() setara dengan mengatur titik putus 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 mengembalikan ReferenceError jika fungsi yang ingin Anda debug 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.

Dengan nemastikan fungsi target dalam cakupan bisa sulit jika Anda memanggil debug() dari DevTools Console. Inilah salah satu strategi:

  1. Atur titik putus baris kode suatu tempat di mana fungsi dalam cakupan.
  2. Picu titik putus.
  3. Panggil debug() di DevTools Console saat kode masih dijeda di titik putus baris kode.

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.