Modul FrontEnd Web Dasar
  • Pengenalan Penulis
  • Muqadimah
  • Tujuan Pembelajaran
  • Prasyarat Pembelajaran
  • Persiapan & Pendahuluan
    • Tools Yang Dibutuhkan
    • Cara Kerja Internet: Bagaimana Website Sampai ke Pengguna
    • Web Statis & Dinamis
    • Peranan Web Server & Web Browser
    • Anatomi Website (HTML, CSS, JavaScript)
    • Referensi Tambahan
  • Belajar HTML
    • Pengenalan HTML
    • Elemen, Tag, dan Atribut
    • Strukur Dasar HTML
    • Menjalankan File HTML di Browser
    • Semantic HTML
    • Tag Dasar HTML
      • Tag Heading (h1-h6)
      • Tag Paragraf (p)
      • Tag Untuk Pemformatan Teks Dasar
      • Tag Anchor/Link (a)
      • Tag Image (img)
      • Tag List (ul, ol, li)
      • Tag Table (table)
      • Tag Form (form, input, select, textarea)
      • Tag Div
      • Tag Audio & Video
      • iframe
      • Tag Untuk Citation, Quotation dan Definisi
      • Tag Untuk Hasil Kode Komputer
    • Simbol/Karakter Khusus
  • Belajar CSS
    • Pengenalan CSS
    • Menambahkan CSS ke HTML
    • Selektor CSS
    • Properti CSS
      • Teks Formatting
      • Warna dan Background
      • Pengenalan Box Model
      • Box Model: Konten
      • Box Model: Padding dan Margin
      • Box Model: Border
      • Box Shadow
      • Box Sizing
      • Positioning
      • Display
      • Pengenalan Flexbox
      • Flexbox: Properti Pada Container
      • Flexbox: Properti Item
      • Flexbox: Gap
      • Pengenalan Grid
      • Grid: Grid Struktur
      • Grid: Gap
      • Grid: Alignment
      • Grid: Grid Auto Flow
      • Grid: Item Placment
      • Grid: Functions in Grid Layout
    • Media Queries Untuk Responsifitas Pada Website
    • Media Queries: Media Types
    • Media Queries: Media Features
  • Belajar JavaScript
    • Pengenalan JavaScript
    • Menghubungkan JavaScript ke HTML
    • Variable
    • Tipe Data
    • Operator & Ekspresi
    • Perkondisian
    • Perulangan
    • Fungsi
    • Debugging
    • JavaScript BOM (browser Object Model)
      • Pengenalan JavaScript BOM
      • Akses ke Objek Window
      • Akses ke Objek Document
      • Akses Ke Navigator Object
      • Akses ke Screen Object
      • Akses ke Histori Object
    • JavaScript DOM (Document Object Model)
      • Pengenalan JavaScript DOM
      • Menarget Element HTML
      • Menambah, Menghapus, dan Mengedit Element
    • Events Handler
      • Pengenalan Event Handler Untuk Interaktifitas
      • Windows Events
      • Form Events
      • Keyboard Events
      • Clipboard Events
      • Mouse Events
    • Web Storage
      • Pengenalan Web Storage
      • Local Storage
      • Session Storage
  • Framework CSS
    • Pengenalan Framework CSS (Bootstrap)
    • Menambahkan Bootstrap ke Project
    • Penggunaan Utility Classes
    • Penggunaan Komponen Bootstrap
    • Customizing Bootstrap
    • Responsive dengan Bootstrap
  • Belajar Figma Untuk Slicing
    • Pengenalan dan Peran Figma
    • Membuat Desain Website
    • Melakukan Slicing
  • Pengenalan Framework FrontEnd
  • Hosting (Web Statis)
Powered by GitBook
On this page
  1. Belajar JavaScript

Debugging

Debugging adalah proses mengidentifikasi, memahami, dan memperbaiki kesalahan atau bug dalam kode. Berikut adalah beberapa teknik debugging yang umum digunakan dalam JavaScript:

  1. Console.log(): Salah satu teknik debugging paling sederhana adalah dengan menggunakan console.log() untuk mencetak nilai variabel atau pesan ke konsol browser. Ini membantu Anda melacak nilai variabel atau aliran program pada titik tertentu dalam kode.

let x = 5;
console.log(x); // Cetak nilai variabel x ke konsol

  1. Debugger Statement: Anda dapat menempatkan pernyataan debugger di kode JavaScript Anda. Ini akan memberi tahu debugger browser untuk menghentikan eksekusi kode di titik tersebut, memungkinkan Anda untuk memeriksa nilai variabel dan status program.

let x = 5;
debugger; // Program akan berhenti di sini
console.log(x);

  1. DevTools: Browser modern seperti Chrome, Firefox, dan Edge menyediakan alat pengembangan (DevTools) yang kuat. Anda dapat membuka DevTools dengan menekan F12 atau klik kanan di halaman web dan pilih "Inspect". Di bagian DevTools, Anda akan menemukan tab "Console" untuk mencetak pesan atau debug, tab "Sources" untuk melihat kode Anda, serta banyak alat lainnya untuk memeriksa jaringan, kinerja, dan elemen DOM.

  2. Breakpoints: Anda dapat menetapkan breakpoint di baris kode tertentu di DevTools. Saat program mencapai breakpoint, eksekusi akan dihentikan dan Anda dapat memeriksa nilai variabel, ekspresi, dan status program.

  3. Step Through Code: Di DevTools, Anda dapat menggunakan fungsi step through code seperti "step into", "step over", dan "step out" untuk melihat bagaimana program berperilaku baris per baris.

  4. Error Messages: Jika terjadi kesalahan dalam kode, browser akan menampilkan pesan kesalahan di konsol DevTools. Pesan kesalahan ini dapat memberi petunjuk tentang di mana kesalahan terjadi dan apa yang perlu diperbaiki.

Dengan kombinasi teknik-teknik ini, Anda dapat mengidentifikasi dan memperbaiki bug dalam kode JavaScript Anda dengan lebih efisien.

PreviousFungsiNextJavaScript BOM (browser Object Model)

Last updated 1 year ago