Teknik debugging yang digunakan di browser

 (alan.norbauer.com)
5 poin oleh GN⁺ 2023-11-12 | 1 komentar | Bagikan ke WhatsApp

Tips memanfaatkan debugger browser

  • Breakpoint kondisional tingkat lanjut

    • Memperluas fungsi breakpoint kondisional dengan menggunakan ekspresi yang memiliki efek samping
    • Melalui logpoint/tracepoint, log dapat dicatat ke konsol tanpa menghentikan eksekusi
    • Menggunakan console.count untuk menghitung jumlah eksekusi
    • Browser-browser utama mendukung logpoint/tracepoint (per Mei 2020)

  • Memanfaatkan panel Watch

    • Dapat menggunakan console.log di panel Watch
    • Untuk menjalankan ekspresi saat DOM berubah, atur breakpoint perubahan DOM lalu tambahkan ekspresi watch

  • Melacak call stack

    • Melacak stack pemanggilan fungsi untuk menemukan pemanggilan yang tidak cocok
    • Menggunakan console.trace pada breakpoint kondisional untuk memeriksa call stack

  • Mengubah perilaku program

    • Dapat mengubah perilaku program secara langsung di dalam browser
    • Menyesuaikan perilaku dengan meng-override parameter fungsi

  • Profiling performa sederhana

    • Mengukur waktu eksekusi kode dengan Console Timing API
    • Menggunakan console.time('label') dan console.timeEnd('label') untuk mengukur waktu

  • Memanfaatkan aritas fungsi

    • Mengaktifkan breakpoint hanya saat dipanggil dengan jumlah argumen tertentu
    • Digunakan untuk menemukan ketidaksesuaian jumlah argumen saat pemanggilan fungsi

  • Memanfaatkan waktu

    • Mengaktifkan breakpoint hanya setelah waktu tertentu berlalu sejak halaman dimuat
    • Melewati breakpoint selama periode tertentu lalu mengaktifkannya hanya setelah itu

  • Memanfaatkan CSS

    • Mengaktifkan breakpoint berdasarkan nilai CSS yang dihitung

  • Berhenti hanya pada pemanggilan genap

    • Mengaktifkan breakpoint hanya pada eksekusi bernomor genap

  • Breakpoint melalui sampling

    • Mengaktifkan breakpoint hanya untuk sampel eksekusi acak

  • Jangan berhenti di baris tertentu

    • Menggunakan opsi "Never Pause Here" agar tidak berhenti di baris tertentu

  • Pemberian ID instance otomatis

    • Secara otomatis memberikan ID unik pada setiap instance kelas

  • Toggle secara terprogram

    • Menggunakan boolean global untuk men-toggle breakpoint kondisional secara terprogram

  • Pemanggilan kelas monitor()

    • Menggunakan perintah monitor milik Chrome untuk melacak pemanggilan metode kelas

  • Pemanggilan fungsi dan debugging

    • Memanggil fungsi setelah memanggil debugger di konsol untuk melakukan debugging

  • Menghentikan eksekusi saat URL berubah

    • Menghentikan eksekusi sebelum URL berubah pada aplikasi single-page

  • Debugging pembacaan properti

    • Mengaktifkan breakpoint setiap kali properti objek dibaca

  • Menggunakan copy()

    • Menggunakan Console API copy() untuk menyalin informasi langsung ke clipboard dari browser

  • Debugging HTML/CSS

    • Menggunakan konsol JS untuk mendiagnosis masalah HTML/CSS
    • Memeriksa DOM saat JS dinonaktifkan
    • Memeriksa elemen DOM yang muncul secara kondisional
    • Merekam snapshot DOM
    • Memantau elemen yang sedang fokus
    • Menemukan elemen dengan font tebal
    • Mereferensikan elemen yang sedang dipilih
    • Memantau event

Opini GN⁺

Hal terpenting dari tulisan ini adalah bahwa artikel ini memberikan berbagai teknik dan tips agar developer dapat melakukan debugging kode dan menyelesaikan masalah dengan lebih efisien menggunakan debugger browser. Informasi seperti ini sangat berguna bagi software developer, dan menarik karena dapat menghemat waktu terutama saat melacak bug yang kompleks atau menyelesaikan masalah performa.

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-12
Komentar Hacker News

  • Perkembangan alat debugging bawaan browser

    • Alat debugging bawaan browser telah berkembang pesat selama beberapa dekade terakhir.
    • Sebagai pengembang JavaScript berpengalaman, berterima kasih kepada semua pihak yang telah memungkinkan debugging kode browser yang intuitif.
    • Saat mengerjakan backend atau bahasa lain, ekosistem alat debugging browser modern terasa dirindukan.

  • Pemanfaatan pernyataan debugger

    • Menggunakan pernyataan debugger (debugger;) adalah satu-satunya cara untuk mengalahkan stack rekursif di debugger Chrome.
    • Disebutkan contoh penggunaan jebakan debugging untuk mencegah pengunjung situs menafsirkan homepage yang telah diobfuscate.

  • Sulitnya debugging backend NodeJS

    • Sebagai programmer Python/Elixir, sering menggunakan pdb.set_trace()/IEx.pry().
    • Mengambil alih backend NodeJS yang kompleks dan mengalami kesulitan karena harus bekerja tanpa alat debugging yang memadai.
    • Akhirnya harus kembali ke debugging dengan console.log, yang terasa primitif.
    • Mengungkapkan keheranan bahwa tidak ada REPL debugging yang layak dan meminta bantuan.

  • Rekomendasi Werkzeug

    • Merekomendasikan penggunaan Werkzeug untuk pengembangan backend Django.
    • Memungkinkan penggunaan shell "PDB" di browser setiap kali exception terjadi.

  • Cara mengakses variabel lokal dalam IIFE

    • Pertanyaan tentang cara mengakses variabel lokal dari Immediately Invoked Function Expression (IIFE).
    • Mencari cara agar debugger dapat melakukan ini tanpa menghentikan kode di dalam scope IIFE.

  • Metode debugging melalui string UI

    • Memulai perekaman permintaan jaringan di panel Network.
    • Menggunakan pencarian di sidebar kiri untuk memasukkan kode/string UI yang ingin dicari.
    • Menemukan hasil di file chunk js yang sudah dibundel, lalu membukanya di "Sources" dan menempatkan pernyataan debugger.

  • Debugging dengan breakpoint kondisional

    • Pertanyaan tentang cara mengubah {configOption: true} menjadi {get configOption() { debugger; return true; }}.

  • Fitur khusus Chrome 'Monitor Events for Element'

    • Menyebut fitur 'Monitor Events for Element' dan bahwa itu khusus Chrome.
    • Bertanya-tanya apakah ada alternatif untuk Firefox.

  • Ketiadaan API queryObjects

    • Menyebut API queryObjects yang mengembalikan daftar semua objek yang dibuat dengan konstruktor tertentu.
    • Misalnya, queryObjects(Function) dapat digunakan untuk mendapatkan daftar semua fungsi yang ada di heap.

  • Sulitnya menggunakan watch variable

    • Mengalami kesulitan untuk membuat watch variable berfungsi.
    • Mengira hanya variabel global yang bisa dipantau, tetapi karena tidak bekerja sesuai harapan, akhirnya memenuhi log dengan nilai.
    • Berpendapat bahwa console seharusnya menambahkan UI bergaya Data.gui agar variabel dan nilai pengaturan bisa dilihat serta diuji, dan menyertakan tautan CodePen terkait.