#Debugging & Developer Tools

Debugging adalah skill yang sangat penting — bahkan programmer senior pun menghabiskan banyak waktu untuk mencari dan memperbaiki bug. Di halaman ini, kamu akan belajar tools dan teknik untuk debugging yang efektif.

#Chrome Developer Tools

Developer Tools (DevTools) adalah senjata utama web developer. Tekan F12 atau klik kanan → Inspect untuk membukanya.

#Tab Elements — Inspeksi HTML & CSS

Tab ini menampilkan struktur HTML dan CSS dari halaman yang sedang dibuka.

Cara menggunakan:

1. Klik icon 🔍 (Select element) di pojok kiri DevTools
2. Arahkan mouse ke elemen di halaman
3. Klik untuk memilih elemen tersebut
4. Lihat HTML di panel kiri, CSS di panel kanan

Yang bisa kamu lakukan:

• ✏️ Edit HTML langsung (double-click)
• ✏️ Edit CSS langsung (klik value)
• 👁️ Lihat computed styles
• 📐 Lihat box model (margin, padding, border)

#Tab Console — Debug JavaScript

Console menampilkan pesan error dan output dari console.log().

Error JavaScript:

// Kode dengan error
let nama = "Budi"
console.log(namaa)  // typo!

Di Console akan muncul:

❌ Uncaught ReferenceError: namaa is not defined
    at script.js:2:13

Artinya:

• namaa tidak ditemukan (typo, seharusnya nama)
• Error di file script.js, baris 2, karakter 13

Console untuk debugging:

// Cara 1: Cek nilai variabel
console.log("Nama:", nama);
console.log("Umur:", umur);

// Cara 2: Cek apakah kode dijalankan
console.log("Fungsi dipanggil!");

// Cara 3: Cek objek/array dengan format bagus
console.table(arrayProduk);

// Cara 4: Grouping untuk kode kompleks
console.group("Proses Login");
console.log("Username:", username);
console.log("Valid:", isValid);
console.groupEnd();

#Tab Network — Lihat Request/Response

Tab ini menampilkan semua HTTP request yang dikirim browser.

Kapan digunakan:

• Form tidak submit? Cek apakah request terkirim
• Data tidak muncul? Cek response dari server
• Halaman lambat? Cek file mana yang lama di-load

Cara membaca:

Contoh debugging form:

1. Buka tab Network
2. Centang "Preserve log"
3. Submit form
4. Klik request yang muncul
5. Lihat tab Payload (data yang dikirim)
6. Lihat tab Response (jawaban server)

#Tab Application — Lihat Storage

Tab ini untuk melihat data yang disimpan browser:

• Cookies — Data kecil dari server (session, preferences)
• Local Storage — Data yang disimpan JavaScript
• Session Storage — Seperti Local Storage, tapi hilang saat tab ditutup

#Debugging PHP

PHP dijalankan di server, jadi tidak bisa di-debug di browser. Tapi ada beberapa teknik:

#var_dump() — Cek Nilai Variabel

<?php
$nama = "Budi";
$umur = 25;
$hobi = ["Coding", "Gaming", "Membaca"];

// Tampilkan isi variabel
var_dump($nama);
var_dump($umur);
var_dump($hobi);

Output:

string(4) "Budi"
int(25)
array(3) {
  [0]=> string(6) "Coding"
  [1]=> string(6) "Gaming"
  [2]=> string(8) "Membaca"
}

#print_r() — Untuk Array/Object

<?php
$user = [
    "nama" => "Budi",
    "email" => "budi@email.com",
    "role" => "admin"
];

echo "<pre>";
print_r($user);
echo "</pre>";

Output lebih mudah dibaca:

Array
(
    [nama] => Budi
    [email] => budi@email.com
    [role] => admin
)

#die() / exit() — Stop Eksekusi

Gunakan untuk menghentikan eksekusi dan cek nilai di titik tertentu:

<?php
$data = ambilDariDatabase();

// Stop di sini dan lihat isinya
var_dump($data);
die("STOP DI SINI");

// Kode di bawah tidak akan dijalankan
prosesData($data);

#Error Reporting

Pastikan error ditampilkan saat development:

<?php
// Taruh di awal file atau di config
error_reporting(E_ALL);
ini_set('display_errors', 1);

#Membaca Error Message

Error message adalah petunjuk, bukan musuh. Pelajari cara membacanya:

#PHP Error

Fatal error: Uncaught Error: Call to undefined function hitungTotal() 
in /var/www/html/index.php on line 15

Artinya:

• Fatal error — Error serius, kode berhenti
• Call to undefined function — Fungsi hitungTotal() tidak ada
• in .../index.php on line 15 — Lokasi error

Solusi: Cek apakah fungsi sudah didefinisikan, atau ada typo di nama fungsi.

#MySQL Error

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'toko.produks' doesn't exist

Artinya:

• Tabel produks tidak ada di database toko
• Mungkin typo (seharusnya produk?) atau belum create table

#JavaScript Error

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:5:10

Artinya:

• Mencoba akses .addEventListener dari null
• Elemen yang dicari tidak ditemukan
• Di file script.js baris 5

Solusi: Cek selector, pastikan elemen ada di HTML, atau pastikan script diload setelah DOM ready.

#Checklist Debugging

Ketika menemui error, ikuti langkah ini:

#1. Baca Error Message

• Baca seluruh pesan error
• Identifikasi jenis error
• Catat lokasi (file dan baris)

#2. Reproduce Error

• Pastikan bisa mengulang error
• Catat langkah-langkah yang menyebabkan error

#3. Isolasi Masalah

• Gunakan var_dump() / console.log() untuk cek nilai
• Comment kode yang mencurigakan
• Persempit area masalah

#4. Cari Solusi

• Google error message
• Cek dokumentasi
• Tanya di forum/komunitas (sertakan kode & error)

#5. Test & Verify

• Implementasi solusi
• Test apakah error hilang
• Test apakah tidak ada error baru

#Error Umum Pemula

#"Undefined variable"

echo $nama;  // Error: $nama belum didefinisikan

Solusi: Definisikan variabel dulu: $nama = "Budi";

#"Cannot redeclare function"

function hitung() { }
function hitung() { }  // Error: sudah ada!

Solusi: Hapus duplikat, atau gunakan nama berbeda.

#"Headers already sent"

echo "Hello";
header("Location: /home.php");  // Error!

Solusi: header() harus dipanggil sebelum ada output apapun.

#"Access denied for user"

SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost'

Solusi: Cek username/password database di konfigurasi.

#Selanjutnya

Sekarang kamu punya bekal untuk debugging! Mari lanjut ke Dasar HTML → dan mulai coding.