1 / 40
Arrow keys, Space, PageUp/PageDown, scroll, swipe, N for notes
Bab 6

Membaca, Men-debug, dan Mengaudit Kode

Kuliah 120 menit untuk mahasiswa S1 Sistem Informasi

Dosen Pengampu

Tikno, ST., M.Kom., MCE.

Program Studi

Sistem Informasi - UISI

Cover
Bab 6
Code Review
Debugging
Kuliah
Slide 2 - Agenda dan Tujuan

Apa yang Akan Dikuasai Mahasiswa

  • Strategi membaca kode secara sistematis: top-down, bottom-up, dan archaeological.
  • Empat teknik debugging utama: logging, binary search, rubber duck, dan DevTools.
  • Code review dengan Engineering Checkpoint 5 Dimensi dan Checklist 7 Dimensi.
  • Identifikasi code smells dan evaluasi kode AI yang hampir benar.
  • Perancangan proyek mini Debugging Challenge Lab sebagai portofolio praktik.
Agenda
Outcome
120 Min
Target
Sesi
Tujuan Pembelajaran

Lima Hasil Belajar Utama

Membaca Kode

Memahami kode yang tidak ditulis sendiri.

Debug Sistematis

Menerapkan minimal empat teknik debugging.

Code Review

Mengaudit kualitas dengan framework terstruktur.

Code Smells

Mengenali tanda masalah desain lebih dalam.

Audit Kode AI

Memperbaiki output AI yang hampir benar.

LO 1
LO 2
LO 3
LO 4
LO 5
Peta Posisi

Bab 6 Ada di Titik Transisi Penting

  • Bab 5 mengajarkan cara meminta AI menghasilkan kode dengan prompt yang presisi.
  • Bab 6 menggeser fokus ke kemampuan membaca, memeriksa, dan memperbaiki kode.
  • Realitas industri: 70-80% waktu engineer digunakan untuk membaca kode yang sudah ada.
  • Skill ini menjadi fondasi sebelum masuk ke pengembangan full-stack modern di Bab 7.
Peta
Transisi
Industri
Meta Skill
Bab 6
Koneksi

Dari HTML-CSS-JS ke Audit Kode

Bab 1-4

Pengetahuan arsitektur web dan Task Manager menjadi bahan untuk membaca ulang kode dari sudut pandang auditor.

Bab 5

Checklist 7 Dimensi dari evaluasi AI kini dipakai untuk menilai bug halus dan anti-pattern.

Bab 7

Skill debugging ini akan dipakai setiap hari saat men-debug React component, rendering, dan API flow.

Nilai Praktis

Kode sendiri beberapa minggu lalu pun dapat terasa asing; itu simulasi membaca kode orang lain.

HTML
CSS
JS
AI
React
ATWS Level 2

AI Masih Helper, Belum Solver

AI Boleh

Menjelaskan blok kode, memberi pendekatan debugging, membuat test case, dan menjelaskan error message yang cryptic.

AI Dilarang

Men-debug total untuk Anda, menulis ulang seluruh fungsi bermasalah, atau menyelesaikan tantangan manual.

Aturan penting: mahasiswa tetap harus membangun hipotesis, mencoba teknik manual, lalu baru menggunakan AI jika dibutuhkan.

ATWS
Rule
Boleh
Tidak
Level 2
Mekanisme Kontrol

Debugging Log Wajib

  • Gejala: apa yang terjadi vs apa yang diharapkan.
  • Hipotesis awal sebelum AI dan teknik manual yang sudah dicoba.
  • Prompt ke AI dan respons AI jika bantuan dipakai.
  • Root cause, fix yang diterapkan, dan lessons learned.
Log
Trace
Hypothesis
Fix
Learn
The Art of Code Reading

Mengapa Membaca Kode Lebih Sulit daripada Menulis

  • Tidak ada narasi linear; eksekusi kode melompat antarfungsi dan event.
  • Pembaca kehilangan konteks keputusan desain yang diketahui penulis asli.
  • Setiap developer punya gaya berbeda: verbose, terse, imperative, atau functional.
  • Ada banyak implicit assumptions dan konvensi yang tidak selalu tertulis.
Reading
Hard
Style
Context
Skill
Analogi

Codebase Seperti Kota Asing

Top-Down

Naik ke menara tinggi dan lihat struktur besar kota lebih dulu.

Bottom-Up

Jalan kaki per detail dan bangun mental model dari unit kecil.

Archaeological

Ikuti alur aktivitas nyata untuk memahami kota melalui use case.

Tidak ada satu pendekatan terbaik. Engineer profesional berganti strategi sesuai ukuran codebase dan tujuan investigasi.

Kota
Top Down
Bottom Up
Flow
Trace
Mental Model

Empat Lapisan Pemahaman Kode

4Intent

Mengapa kode ini ada? Masalah apa yang diselesaikan?

3Architecture

Komponen utama dan interaksinya.

2Mechanism

Bagaimana algoritma atau fungsi bekerja.

1Syntax

Apa yang tertulis di setiap baris.

Intent
Arch
How
Code
Layer
Vibe Coding Expedition

Tiga Fase Eksplorasi

  • Fase 1: membaca dan memahami tiga versi fungsi validasi yang sama.
  • Fase 2: memodifikasi kode, memprediksi efek, lalu menjalankannya.
  • Fase 3: merefleksikan apa yang membuat kode mudah atau sulit dibaca.
  • Parameter eksperimen: boleh ubah nama, conditional, parameter, dan urutan baris; jangan ubah struktur besar dulu.
Phase 1
Phase 2
Phase 3
Predict
Observe
Fase 1

Versi A: The Mysterious One

function v(d) { const e = d.e, p = d.p, c = d.c; let r = []; if (!e || !e.includes('@')) r.push('e'); if (!p || p.length < 8) r.push('p'); if (p !== c) r.push('c'); return r.length === 0 ? { ok: true } : { ok: false, e: r }; }
  • Apa yang dilakukan fungsi ini?
  • Apa arti d, e, p, c, dan r?
  • Seberapa yakin Anda memahami return value-nya?
Version A
Short Name
Mysterious
Read
Guess
Fase 1

Versi B dan C: Verbose vs Balanced

Versi B

Lebih verbose, eksplisit, dan mudah diikuti oleh pembaca baru.

Kelemahan: beberapa bagian terasa terlalu panjang.

Versi C

Memakai destructuring dan optional chaining agar ringkas tapi tetap jelas.

Kelebihan: informasi utama tetap terbaca cepat.

  • Destructuring membuat ekstraksi properti lebih ringkas.
  • Optional chaining melindungi akses properti saat nilai undefined.
  • Komentar yang baik menjelaskan why, bukan sekadar what.
Version B
Version C
Destructure
Optional
Balance
Fase 2

Memodifikasi dan Mengamati

  • Tambahkan validasi username dan prediksi lebih dulu di mana ia diletakkan.
  • Hapus simbol ? pada optional chaining dan amati konsekuensinya.
  • Bandingkan === dengan == dan !== dengan != pada kondisi berbeda.
  • Tujuan: bandingkan prediksi vs realita untuk menemukan blind spot.
Modify
Predict
Observe
Compare
Blind Spot
Fase 2

Tracing Execution Flow pada Event

let count = 0; function increment() { count++; console.log('Count:', count); } function setupButtons() { const buttons = document.querySelectorAll('.counter-btn'); buttons.forEach(btn => btn.addEventListener('click', increment)); }
  • Apa yang terjadi saat halaman pertama kali di-load?
  • Mengapa klik button pertama log-nya Count: 1?
  • Mengapa klik button kedua log-nya Count: 2, bukan kembali ke 1?
  • Jika count tidak naik, apa tiga kemungkinan penyebab?
Trace
Event
DOM Ready
Counter
Flow
Diskusi Kelas

Apa yang Membuat Kode Mudah Dibaca?

NamingCommentsStructurePredictabilityConsistent Style

Diskusikan contoh nyata dari tugas mahasiswa: bagian kode apa yang paling cepat dipahami, dan bagian mana yang terasa paling misterius?

Discuss
Naming
Style
Reflection
Class
Fase 3

Refleksi Pasca-Eksplorasi

  • Naming matters: nama yang baik menjadikan kode self-documenting.
  • Comments terbaik menjelaskan alasan, bukan sekadar operasi literal.
  • Prediksi sebelum eksekusi membangun intuisi lebih kuat.
  • Membaca kode memang melelahkan dan sering tidak linear; itu normal.
  • Asumsi dapat salah, karena itu debugging harus sistematis.
Reflect
Naming
Predict
Readability
Normal
Deep Understanding Zone

Debugging adalah Investigasi Ilmiah

  • Observe: identifikasi gejala dan gap antara expected vs actual behavior.
  • Hypothesize: bentuk dugaan penyebab berdasarkan bukti yang ada.
  • Test: rancang eksperimen untuk memverifikasi hipotesis.
  • Analyze: lihat apakah hasil sesuai prediksi dan tentukan langkah berikutnya.
Observe
Hypothesis
Test
Analyze
Repeat
Scientific Method of Debugging

Siklus yang Harus Diulang dengan Disiplin

1Observe

Catat gejala secara konkret.

2Hypothesize

Duga akar masalah paling masuk akal.

3Test

Uji dengan log, breakpoint, atau isolasi kode.

4Analyze

Terima atau tolak hipotesis.

Jika hipotesis salah, kembali ke langkah dua. Iterasi adalah bagian normal dari debugging profesional.

Cycle
Method
Repeat
Evidence
Root Cause
Teknik 1

Console Logging Strategis

  • Log pada decision points dan state transitions, bukan di setiap baris.
  • Bedakan input log, conditional log, dan output log.
  • Gunakan prefix context seperti [functionName] untuk filtering cepat.
  • Gunakan struktur object agar log lebih mudah dibaca.
  • Pilih level yang tepat: log, warn, dan error.
Logging
Signal
Noise
Context
State
Teknik 2

Binary Search (Bisecting) pada Codebase Besar

  • Jangan cek blok kode satu per satu jika area bug masih luas.
  • Comment out atau nonaktifkan setengah blok, lalu lihat apakah bug hilang.
  • Jika bug hilang, bug ada di area yang dinonaktifkan; jika tidak, bug ada di area aktif.
  • Ulangi sampai area sempit dan root cause lebih mudah diisolasi.

Linear search di 100 baris bisa sangat lambat; bisecting membuat proses investigasi jauh lebih efisien.

Bisect
Half
Isolate
Fast
Search
Teknik 3

Rubber Duck Debugging

  • Jelaskan kode baris demi baris ke objek atau orang lain tanpa asumsi diam-diam.
  • Verbalizing memaksa otak berhenti men-skip detail yang dianggap pasti benar.
  • Sangat efektif untuk logic error yang tidak menimbulkan crash.
  • Aha moment sering muncul saat menjelaskan precondition atau edge case.
Duck
Explain
Slow Down
Logic
Aha
Teknik 4

Browser DevTools = Mikroskop Profesional

Feature
Kegunaan
Console
Melihat log, mencoba JavaScript live, verifikasi state cepat.
Elements
Inspect HTML, CSS, dan perubahan DOM.
Sources
Breakpoint, step over, step into, dan trace logika.
Application
Lihat localStorage, session, cookies, dan state browser.
DevTools
Console
Elements
Sources
App
DevTools Detail

Console Advanced Techniques

console.table

Menampilkan array of objects secara tabular dan mudah dibaca.

console.group

Mengelompokkan log berdasarkan flow atau use case.

console.time

Mengukur durasi operasi untuk indikasi bottleneck.

console.assert

Hanya menulis pesan saat condition gagal.

Warn/Error

Gunakan level log berbeda untuk sinyal yang lebih jelas.

Table
Group
Time
Assert
Levels
DevTools Detail

Breakpoints, Conditional Breakpoints, dan debugger

  • Breakpoint menghentikan eksekusi tepat di baris tertentu untuk inspeksi state.
  • Conditional breakpoint hanya berhenti ketika kondisi tertentu terpenuhi.
  • debugger; bisa dipasang dari kode saat DevTools terbuka.
  • Hapus debugger statement sebelum production.
Pause
Inspect
Condition
Debugger
Sources
Decision Guide

Teknik Mana Dipakai Kapan?

Tahu Area Bug

Gunakan console logging strategis untuk verifikasi state pada titik sempit.

Tidak Tahu Area Bug

Pakai binary search untuk mempersempit codebase lebih cepat.

Logic Error

Rubber duck efektif untuk kasus kode berjalan tetapi hasilnya salah.

UI, DOM, Network

Gunakan DevTools karena state browser terlihat real-time.

Choose
Context
Bug Type
Best Fit
Guide
No-AI Challenge

Challenge 1: Average Rating yang Salah

function calculateAverageRating(reviews) { let totalRating = 0; let count = 0; for (let review of reviews) { totalRating += review.rating; count++; } return totalRating / count; }
  • Expected: rating 0 sebagai not rated tidak ikut dihitung.
  • Actual: fungsi tetap memasukkan rating 0 ke denominator.
  • Gunakan minimal dua teknik debugging untuk menemukan root cause.
  • Tambahkan test case termasuk edge case ketika semua rating = 0.
Challenge
Logic
Average
Test
Fix
No-AI Challenge

Challenge 2: updateUserData yang Menghapus Properti

if (users[i].id == userId) { users[i] = newData; break; }
  • Root cause: objek lama diganti total, bukan di-merge.
  • Efeknya: id, email, dan role bisa ikut hilang.
  • Fix yang tepat memakai object spread atau Object.assign.
  • Bonus smell: penggunaan == alih-alih ===.
Replace
Merge
Object
Strict Eq
Trace
Insight

Mengenali Code Smells

Smell
Mengapa Bermasalah
Magic Numbers
Angka tanpa konteks membuat intent kabur.
God Function
Sulit dibaca, diuji, dan dimodifikasi.
Duplicated Logic
Perubahan aturan harus disebar ke banyak tempat.
Loose Equality
Type coercion memicu bug halus.
No Error Handling
Input tak terduga bisa membuat sistem rapuh.
Smells
Magic
God Fn
Duplicate
Loose
AI Integration

Cara yang Salah: AI sebagai Magic Bug Fixer

"Ini kode saya, ada bug, tolong fix" [paste 200 baris kode]
  • AI tidak tahu expected vs actual behavior jika konteks minim.
  • Mahasiswa kehilangan proses belajar karena hanya menerima patch.
  • Risiko fix symptom, bukan root cause, sangat tinggi.
  • Tidak ada jejak hipotesis atau eksperimen manual.
Wrong Way
Context Loss
Dependency
Symptom
Risk
AI Integration

Cara yang Tepat: AI sebagai Debugging Partner

  • Sertakan context, expected behavior, actual behavior, dan hal yang sudah dicoba.
  • Ajukan pertanyaan spesifik: mengapa fenomena ini terjadi?
  • Minta analisis, bukan sekadar rewrite total.
  • Verifikasi jawaban AI dengan eksperimen manual sebelum percaya.

Pola ini membuat AI membantu reasoning, bukan menggantikan reasoning.

Right Way
Context
Expected
Actual
Question
Framework

The 5 Whys Method dengan AI

1Gejala

Button tidak merespons click.

2Why?

Event listener tidak terpasang.

3Why?

Script dijalankan sebelum DOM ready.

4Why?

Script di-load di head tanpa defer.

Setelah 5 Whys, mahasiswa tidak hanya tahu fix, tetapi memahami rantai kausalitas di balik bug.

Why
Why
Why
Why
Root
GEEM Reused

Siklus GEEM untuk Debugging

GGenerate

Minta analisis potential issue, bukan solusi final.

EEvaluate

Cross-check dengan dokumentasi, log, dan test.

EExplain

Jelaskan kembali temuan AI dengan kata sendiri.

MModify

Implementasikan fix versi Anda sendiri.

Generate
Evaluate
Explain
Modify
GEEM
Tugas AI Integration

Kasus: searchProducts yang Hampir Benar

function searchProducts(products, keyword) { let results = []; for (let i = 0; i < products.length; i++) { if (products[i].name.includes(keyword)) { results.push(products[i]); } } return results; }
  • Bug utama: pencarian case-sensitive sehingga iphone tidak menemukan iPhone.
  • Masih ada edge case: keyword kosong, products kosong, produk tanpa name.
  • Perlu perluasan pencarian ke name dan category.
  • Evaluasi fungsi ini memakai Checklist 7 Dimensi.
AI Bug
Search
Case
Edge
Review
Engineering Mindset Checkpoint

Five Pillars of Code Review

Security

Input validation, injection, auth, dan exposure data.

Readability

Naming, flow, komentar, dan konsistensi style.

Performance

Bottleneck, struktur data, dan kompleksitas.

Scalability

Bagaimana saat data bertambah 10x atau 100x.

Pemeliharaan / Maintainability adalah dimensi kelima yang memotong semua dimensi lain: seberapa mudah kode ini diubah dengan aman?

Security
Readability
Performance
Scale
Maintain
Contoh Code Review

Apa yang Ditanyakan Reviewer Profesional?

  • Security: apakah input divalidasi dan query aman?
  • Readability: apakah intent fungsi langsung terbaca?
  • Performance: adakah nested loop atau alokasi tidak perlu?
  • Scalability: apa yang terjadi ketika user menjadi jutaan?
  • Maintainability: jika requirement berubah, apa bagian paling berisiko?
Review
Questions
Risk
Team
Quality
Studi Kasus

Review Ulang Task Manager dari Bab 4

  • Apakah user input selalu aman jika ditampilkan kembali ke DOM?
  • Apakah ada duplicated logic pada save, load, dan render?
  • Bagaimana performa render jika task menjadi ratusan atau ribuan?
  • Adakah naming atau komentar yang sekarang terasa kurang jelas?

Gunakan proyek lama Anda sendiri sebagai laboratorium audit. Kode lama adalah bahan belajar yang sangat jujur.

Case
Task App
Audit
Own Code
Reflect
Proyek Mini

Debugging Challenge Lab

  • Bangun minimal 6 challenge: logic, async, security, performance, code smell, dan AI-generated bug.
  • Setiap challenge punya buggy code, fixed code, debug log, dan test cases.
  • Minimal dua challenge boleh memanfaatkan AI sebagai assistant, bukan solver.
  • Minimal satu challenge berasal dari proyek Anda sendiri.
  • README menjadi index portofolio dan reference pribadi.
Project
Lab
6 Cases
Logs
Tests
Refleksi

Empat Pertanyaan Journal

  • Konsep apa yang kini dapat Anda jelaskan ke orang lain?
  • Bagian mana yang masih terasa black box, misalnya async debugging?
  • Apa yang tetap bisa Anda kerjakan sendiri tanpa AI?
  • Keputusan desain terpenting apa yang Anda buat pada proyek bab ini?
Journal
Deep
Black Box
Without AI
Decision
Penutup

Kesimpulan dan Q&A

  • Membaca, men-debug, dan mengaudit kode adalah fondasi profesional yang sama pentingnya dengan menulis kode.
  • Empat teknik debugging memberi toolkit praktis untuk investigasi yang terstruktur.
  • Five Pillars dan Checklist 7 Dimensi membantu menjaga kualitas kode manusia maupun AI.
  • Bab 7 akan menaikkan kompleksitas ke React, Next.js, dan Supabase.
  • Sesi tanya jawab: bug apa yang paling ingin Anda pelajari lebih dalam?
Summary
Toolkit
Review
Bab 7
QnA