Lecture ini membahas Browser Developer Tools, terutama JavaScript Console. Ini sangat penting karena mulai sekarang kamu akan sering menulis kode JavaScript, melihat hasilnya, dan mencari error.

Saya akan menjelaskannya dari dasar, termasuk apa itu Developer Tools, Console, error, console.log(), urutan eksekusi kode, dan bagaimana cara membaca error.

1. Gambaran besar lecture

Pada lecture sebelumnya kita sudah belajar membuat:

index.html
script.js

dan menghubungkan JavaScript:

<script src="script.js"></script>

Sekarang muncul pertanyaan:

Kalau JavaScript kita error, bagaimana kita tahu error-nya di mana?

Jawabannya:

Gunakan Browser Developer Tools.

Dan bagian yang paling sering kita gunakan untuk saat ini adalah:

Developer Console

2. Apa itu Browser Developer Tools?

Developer Tools adalah sekumpulan alat yang sudah disediakan oleh browser untuk membantu developer membuat, menguji, dan memperbaiki website.

Browser modern seperti Chrome, Edge, Firefox, dan browser lainnya memiliki Developer Tools.

Developer Tools dapat digunakan untuk:

• melihat HTML
• melihat CSS
• menjalankan JavaScript
• melihat error
• debugging
• melihat request jaringan
• memeriksa DOM
• melihat source code
• memeriksa performa
• dan masih banyak lagi.

Kalau diibaratkan:

Developer Tools adalah kotak peralatan seorang web developer.

Kalau montir memiliki:

obeng
kunci
dongkrak
scanner

Web developer memiliki:

Elements
Console
Sources
Network
Performance
Application
dan lain-lain

3. Cara membuka Developer Tools

Ada beberapa cara.

Cara 1 — Klik kanan → Inspect

Pada halaman web:

Klik kanan
   ↓
Inspect

Developer Tools akan terbuka.

Cara 2 — Shortcut

Pada Chrome/Edge di Windows:

Ctrl + Shift + J

Shortcut tersebut langsung membuka bagian Console.

Ada juga shortcut umum:

F12

atau:

Ctrl + Shift + I

untuk membuka Developer Tools secara umum.

4. Mengenal tab-tab Developer Tools

Ketika Developer Tools dibuka, kamu akan melihat beberapa tab.

Contohnya:

Elements
Console
Sources
Network
...

Masing-masing memiliki fungsi berbeda.

Kita bahas satu per satu secara sederhana.

5. Elements

Tab:

Elements

digunakan untuk melihat struktur HTML/DOM halaman.

Misalnya HTML kita:

<h2>Fundamentals of JavaScript</h2>

<input id="name" value="JavaScript">

Di Elements kita dapat melihat struktur tersebut.

Secara sederhana:

HTML
│
├── h2
│
└── input
    └── id="name"

Elements sangat berguna ketika kita ingin mengetahui:

• HTML yang sedang digunakan
• class
• id
• atribut
• struktur DOM
• CSS yang diterapkan pada elemen.

6. Console

Nah, ini yang paling penting untuk sekarang.

Tab:

Console

digunakan untuk berbagai hal seperti:

• melihat error JavaScript
• menampilkan hasil program
• mencetak informasi
• menjalankan JavaScript secara langsung
• mencoba expression JavaScript.

Kita akan sangat sering menggunakan Console selama belajar JavaScript.

7. Sources

Tab:

Sources

digunakan untuk melihat source file yang digunakan oleh halaman.

Misalnya project kita:

JavaScript Basics
├── index.html
├── style.css
└── script.js

Di Sources kita bisa menemukan file seperti:

index.html
style.css
script.js

Sources juga sangat penting untuk debugging, terutama ketika nanti kita belajar:

• breakpoint
• step over
• step into
• variable inspection
• debugging JavaScript.

Untuk sekarang belum perlu menguasai semuanya.

8. Network

Tab:

Network

digunakan untuk melihat komunikasi/request yang dilakukan halaman web.

Misalnya browser meminta:

index.html
style.css
script.js
image.jpg
API data

Network bisa menunjukkan request tersebut.

Misalnya:

Browser
   │
   ├── GET index.html
   ├── GET style.css
   ├── GET script.js
   └── GET data dari API

Nanti ketika belajar API, AJAX, fetch(), dan komunikasi dengan server, tab Network akan menjadi sangat penting.

9. Tab lainnya

Developer Tools juga memiliki berbagai tab lainnya, misalnya:

• Security
• Memory
• Application
• Performance
• Storage
• dan sebagainya.

Tidak perlu menghafalkan semuanya sekarang.

Instruktur sengaja hanya memberikan gambaran umum.

Untuk tahap awal JavaScript:

Fokus utama kita adalah Console.

10. Kenapa Console sangat penting?

Bayangkan kita membuat kode:

alert("Hello World");

Kode tersebut berhasil.

Tetapi kemudian kita membuat kesalahan:

alert("Hello World"

Ada tanda ) yang hilang.

Apa yang terjadi?

Program tidak berjalan dengan benar.

Masalahnya:

Browser tidak selalu menampilkan error langsung pada halaman web.

Jadi kita perlu membuka:

Developer Tools
      ↓
Console

Di sana kita dapat melihat error.

11. Contoh Syntax Error

Misalnya kita menulis:

alert("Hello World"

Seharusnya:

alert("Hello World");

Kita lupa:

)

Browser akan memberikan error di Console.

Kurang lebih informasinya akan menunjukkan bahwa terdapat SyntaxError dan lokasi kesalahannya.

Misalnya konsepnya:

SyntaxError
Missing ) after argument list
script.js:1

Ini sangat membantu karena kita mendapatkan:

Jenis error

SyntaxError

Penjelasan

Missing ) after argument list

Lokasi

script.js:1

Artinya error terdapat di file script.js, baris 1.

12. Apa itu Syntax Error?

Syntax adalah aturan penulisan kode.

Sama seperti bahasa manusia memiliki aturan grammar, bahasa pemrograman juga memiliki aturan penulisan.

Misalnya:

alert("Hello World");

Benar.

Tetapi:

alert("Hello World"

kurang ).

Jadi browser tidak dapat memahami kode tersebut dengan benar.

Itulah Syntax Error.

Contoh lain:

let x = ;

Ini juga syntax yang tidak valid.

13. Developer Console membantu menemukan error

Misalnya kita punya:

alert("Hello World"

Console memberitahu:

SyntaxError

dan lokasi error.

Jadi alurnya:

Tulis kode
   ↓
Jalankan
   ↓
Error
   ↓
Buka Console
   ↓
Baca pesan error
   ↓
Cari lokasi
   ↓
Perbaiki
   ↓
Jalankan lagi

Inilah salah satu workflow utama programmer.

14. Satu hal penting: Error tidak selalu muncul sekaligus

Ini bagian yang sangat penting.

Misalnya kode kita memiliki dua error:

alert("Hello World"

let x = ;

Ada error di baris pertama.

Ada error di baris kedua.

Tetapi jangan berharap browser langsung menunjukkan semua error satu per satu secara sederhana.

Dalam contoh yang dijelaskan instruktur, eksekusi berhenti ketika menemukan error tersebut, sehingga error berikutnya baru bisa terlihat setelah masalah sebelumnya diperbaiki.

Konsep sederhananya:

Kode
 ↓
Baris 1
 ↓
Baris 2
 ↓
ERROR!
 ↓
Eksekusi berhenti

Setelah kita memperbaiki error:

Baris 1
 ↓
Baris 2
 ↓
Baris 3
 ↓
ERROR!
 ↓
Eksekusi berhenti

Jadi:

Perbaiki error yang muncul terlebih dahulu, kemudian jalankan lagi untuk menemukan masalah berikutnya.

15. Contoh dengan X, Y, dan Z

Dalam materi digunakan contoh:

let x = 20;
let y = 30;

alert(x + y + z);

Perhatikan:

x

sudah dibuat.

y

sudah dibuat.

Tetapi:

z

belum pernah dibuat.

Kemudian kita mencoba:

alert(x + y + z);

JavaScript tidak tahu apa itu z.

Akibatnya muncul error seperti:

ReferenceError: z is not defined

16. Apa arti “z is not defined”?

Ini sangat mudah dipahami.

Kita mengatakan kepada JavaScript:

“Tolong gunakan z.”

JavaScript bertanya:

“Apa itu z?”

JavaScript mencari deklarasi z.

Tetapi tidak ada.

Maka:

z
↓
tidak ditemukan
↓
ReferenceError

Jadi:

z is not defined

berarti:

Kita mencoba menggunakan sesuatu bernama z, tetapi JavaScript tidak menemukan deklarasinya.

17. Urutan eksekusi kode

Ini juga merupakan konsep fundamental.

Misalnya:

alert("Hello World");

let x = 20;
let y = 30;

alert(x + y + z);

Secara sederhana JavaScript menjalankan instruksi sesuai alurnya.

1. alert("Hello World")
          ↓
2. let x = 20
          ↓
3. let y = 30
          ↓
4. alert(x + y + z)
          ↓
       ERROR

Ketika sampai pada error, eksekusi tidak dapat melanjutkan sebagaimana mestinya.

18. Setelah error diperbaiki

Kita ubah:

alert(x + y + z);

menjadi:

alert(x + y);

Sekarang:

x = 20
y = 30

Maka:

20 + 30
= 50

Sehingga alert menampilkan:

50

19. Jangan takut dengan error

Ini sangat penting untuk pemula.

Saat belajar programming, kamu akan sering melihat:

SyntaxError
ReferenceError
TypeError
...

Jangan menganggap:

“Saya gagal programming.”

Justru:

Error adalah bagian normal dari proses programming.

Programmer profesional pun setiap hari berhadapan dengan error.

Yang membedakan programmer berpengalaman adalah mereka tahu bagaimana:

membaca error
       ↓
memahami error
       ↓
mencari penyebab
       ↓
memperbaikinya

20. console.log()

Selain melihat error, Console juga dapat digunakan untuk menampilkan informasi.

Kita menggunakan:

console.log("Hello World");

console.log() berarti:

Tampilkan/log sesuatu ke Developer Console.

Misalnya:

console.log("Hello World");

Hasilnya di Console:

Hello World

Tidak muncul alert.

21. Perbedaan alert() dan console.log()

Ini harus kamu pahami.

alert()

alert("Hello World");

Menampilkan popup kepada pengguna.

┌───────────────────┐
│   Hello World     │
│                   │
│       OK          │
└───────────────────┘

console.log()

console.log("Hello World");

Menampilkan informasi di Developer Console.

Hello World

Jadi:

alert()
↓
Pengguna melihat popup

console.log()
↓
Developer melihat Console

22. console.log() sangat penting untuk belajar

Misalnya kita memiliki:

let x = 20;
let y = 30;

Kita ingin mengetahui nilai x.

Kita bisa:

console.log(x);

Hasil:

20

Untuk y:

console.log(y);

Hasil:

30

Kita juga bisa:

console.log(x + y);

Hasil:

50

23. console.log() bisa menerima expression

Misalnya:

console.log(30 + 40);

JavaScript menghitung:

30 + 40
= 70

kemudian Console menampilkan:

70

Jadi console.log() tidak hanya digunakan untuk string.

Bisa juga:

console.log(10);
console.log(10 + 20);
console.log("Hello");
console.log(true);

Nanti kita akan mempelajari tipe-tipe data tersebut.

24. console.error()

Ada juga:

console.error("This is an error");

Fungsinya untuk mencatat pesan sebagai error di Console.

Contohnya:

console.error("Something went wrong");

Console akan menandai pesan tersebut sebagai error.

Ini berbeda dengan error JavaScript yang otomatis dilempar browser.

Kita sendiri yang meminta Console mencatat pesan tersebut sebagai error.

25. Bedakan error asli dan console.error()

Misalnya:

console.error("Something went wrong");

Ini adalah kita secara sengaja menulis pesan error ke Console.

Sedangkan:

alert(x + z);

kalau z tidak didefinisikan, browser benar-benar menemukan kesalahan ketika menjalankan program.

Jadi:

console.error()
↓
Developer sengaja mencatat pesan sebagai error

ReferenceError / TypeError / SyntaxError
↓
JavaScript benar-benar mengalami error

26. Membersihkan Console

Kalau Console sudah penuh dengan pesan, kita dapat membersihkannya menggunakan tombol Clear Console.

Tujuannya supaya kita bisa melihat output terbaru dengan lebih mudah.

Ini sangat berguna ketika kita sedang melakukan debugging.

Misalnya Console sudah penuh:

Hello
20
30
50
Hello
20
30
50
...

Kita clear.

Kemudian jalankan program lagi.

Sekarang kita bisa melihat output terbaru saja.

27. Console juga bisa digunakan untuk menjalankan JavaScript

Ini fitur yang sangat menarik.

Kita tidak harus selalu menulis JavaScript di script.js.

Kita bisa langsung mengetik di Console.

Misalnya:

30 + 40

Tekan Enter.

Hasilnya:

70

Kenapa?

Karena Console bisa bertindak seperti tempat kita mencoba JavaScript secara langsung.

28. Console seperti kalkulator JavaScript

Misalnya:

10 + 20

hasil:

30

Kita bisa mencoba:

100 - 40

hasil:

60

Atau:

10 * 5

hasil:

50

Jadi Console bisa digunakan sebagai semacam lingkungan eksperimen JavaScript.

29. Kita juga bisa menggunakan function

Misalnya di Console:

alert("Welcome to console");

Browser akan menampilkan alert:

Welcome to console

Artinya Console bukan sekadar tempat melihat output.

Console juga dapat digunakan untuk mencoba kode JavaScript secara langsung.

30. Kita bisa membuat variable di Console

Misalnya:

let z = 100;

Kemudian:

console.log(z);

hasil:

100

Kita bahkan dapat langsung mengetik:

z

dan Console akan menampilkan:

100

Ini sangat berguna untuk eksperimen.

31. Kenapa Console sangat berguna untuk belajar?

Misalnya kamu sedang belajar operator.

Daripada menebak hasil:

20 + 30

langsung coba di Console.

Atau:

20 * 30

atau:

100 / 5

Kamu bisa langsung melihat hasilnya.

Nanti ketika belajar:

• string
• array
• object
• function
• conditional
• loop

kamu juga dapat mencoba semuanya langsung di Console.

32. Developer Tools bukan hanya untuk JavaScript

Ini juga penting.

Developer Tools dapat digunakan untuk banyak aspek web development.

Misalnya:

HTML

Kita bisa memeriksa:

<div>
    <h1>Hello</h1>
</div>

melalui Elements.

CSS

Kita dapat melihat style:

h1 {
    color: red;
}

dan bahkan mencoba mengubahnya secara langsung.

JavaScript

Kita menggunakan:

Console
Sources

Network

Kita bisa melihat request:

GET /index.html
GET /style.css
GET /script.js
GET /api/users

Jadi Developer Tools adalah alat yang sangat penting untuk frontend developer.

33. Gambaran fungsi setiap tab

Supaya mudah diingat:

Untuk tahap sekarang:

⭐ Console adalah yang paling penting.

34. Cara membaca error

Mulai sekarang, jangan hanya melihat:

ERROR

Kemudian panik. 😄

Biasakan membaca tiga hal:

1. Jenis error

Misalnya:

SyntaxError

atau:

ReferenceError

atau:

TypeError

2. Pesan error

Misalnya:

z is not defined

3. Lokasi

Misalnya:

script.js:5

Artinya kemungkinan besar masalah berada di script.js, baris 5.

35. Contoh cara berpikir saat menemukan error

Misalnya Console mengatakan:

ReferenceError: z is not defined

Jangan langsung mencari solusi di internet.

Pertama tanyakan:

“Saya menggunakan z di mana?”

Misalnya:

alert(x + y + z);

Kemudian:

“Apakah z pernah dibuat?”

Ternyata tidak.

Maka masalahnya jelas:

z digunakan
↓
z belum dideklarasikan
↓
ReferenceError

Kemudian kita bisa memperbaikinya.

36. Workflow debugging sederhana

Mulai biasakan workflow berikut:

1. Tulis kode
       ↓
2. Jalankan
       ↓
3. Ada error?
       ↓
      Ya
       ↓
4. Buka Console
       ↓
5. Baca error
       ↓
6. Cari file + baris
       ↓
7. Pahami penyebab
       ↓
8. Perbaiki
       ↓
9. Jalankan lagi

Jangan hanya:

Error
↓
Copy error ke Google
↓
Copy kode orang lain

Lebih baik pahami dulu kenapa error tersebut terjadi.

37. Hubungan lecture sebelumnya dengan lecture ini

Sekarang coba kita hubungkan semuanya.

Pada lecture sebelumnya kita belajar:

HTML
 ↓
<script>
 ↓
script.js

Sekarang kita belajar:

script.js
 ↓
Browser
 ↓
Developer Tools
 ↓
Console

Misalnya:

script.js

let x = 20;
let y = 30;

console.log(x + y);

Browser menjalankannya.

Console menampilkan:

50

38. Gambaran keseluruhan

Sekarang workflow kita sudah semakin lengkap:

              VS Code
                 │
       ┌─────────┼─────────┐
       ↓         ↓         ↓
    HTML       CSS       JavaScript
       │                   │
       └─────────┬─────────┘
                 ↓
              Browser
                 │
                 ↓
        Developer Tools
                 │
       ┌─────────┼──────────┐
       ↓         ↓          ↓
   Elements   Console    Network
                 │
                 ↓
        Output / Error

Ini adalah lingkungan dasar seorang frontend developer.

39. Hal yang harus kamu pahami sebelum lanjut

Menurut saya, ada 6 konsep utama dari lecture ini.

1. Developer Tools

Alat bawaan browser untuk membantu developer.

2. Console

Tempat untuk:

• melihat error
• melihat output
• menjalankan JavaScript
• debugging sederhana.

3. console.log()

Digunakan untuk menampilkan informasi:

console.log("Hello World");

4. console.error()

Digunakan untuk mencatat pesan sebagai error:

console.error("Something went wrong");

5. Error harus dibaca, bukan ditakuti

Misalnya:

ReferenceError: z is not defined

Artinya z belum didefinisikan.

6. JavaScript berhenti ketika menemukan error

Secara sederhana:

Kode 1 ✓
   ↓
Kode 2 ✓
   ↓
Kode 3 ✗ ERROR
   ↓
Eksekusi berhenti

Jadi perbaiki error yang pertama, kemudian jalankan lagi.

40. Cheat sheet sederhana

Simpan bagian ini karena akan sering digunakan.

Menampilkan popup

alert("Hello World");

Menampilkan output di Console

console.log("Hello World");

Menampilkan nilai variable

let x = 20;

console.log(x);

Menghitung expression

console.log(30 + 40);

Output:

70

Menampilkan error secara manual

console.error("Something went wrong");

Membuka Developer Tools

Klik kanan → Inspect

atau:

Ctrl + Shift + J

41. Analogi paling mudah

Bayangkan kamu sedang memasak.

VS Code adalah dapur tempat kamu menyiapkan makanan.

JavaScript adalah resep dan proses memasaknya.

Browser adalah tempat makanan akhirnya disajikan.

Sedangkan:

Developer Tools adalah alat inspeksi/kontrol dapur.

Kalau ada masalah:

"Makanannya gagal."

Kamu tidak hanya menebak.

Kamu memeriksa:

Apa yang salah?
Bahan mana yang salah?
Langkah mana yang salah?

Dalam JavaScript, Console membantu melakukan hal yang sama:

Apa error-nya?
Di file mana?
Di baris berapa?
Apa pesan error-nya?

🎯 Kesimpulan

Lecture ini sebenarnya sedang mengajarkan satu kebiasaan yang sangat penting bagi programmer:

Jangan hanya menulis kode dan berharap kode bekerja. Belajarlah membaca apa yang browser katakan ketika kode kita bermasalah.

Mulai sekarang, ketika JavaScript kamu menghasilkan error:

❌ Jangan langsung panik
        ↓
🔍 Buka Developer Tools
        ↓
🖥️ Buka Console
        ↓
📖 Baca pesan error
        ↓
📍 Lihat file & baris
        ↓
🛠️ Perbaiki
        ↓
▶️ Jalankan kembali

Dan untuk pembelajaran JavaScript berikutnya, console.log() akan menjadi teman yang sangat sering kamu gunakan. Misalnya ketika nanti belajar variable, data type, operator, function, array, object, dan lain-lain, kita bisa menggunakan:

console.log(...)

untuk melihat apa yang sebenarnya terjadi di dalam program.