Rahasia Alat Pengembang Browser

1. Console punya jauh lebih banyak fungsi daripada sekadar log()

• opsi pemfilteran

• {} : menampilkan nilai/nama variabel bersama-sama

• warn/info/error() : level log

• assert(): hanya ditampilkan saat kondisi tertentu terpenuhi

• trace(): siapa yang memanggilnya

• group(): mengelompokkan pesan sehingga bisa dibuka/ditutup

• table(): menampilkan informasi dalam bentuk tabel

• $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

  return {url: a.href, text: a.innerText}

  })

2. Meninggalkan log tanpa akses ke source code

• Live Expressions : memeriksa nilai variabel yang berubah secara real-time

• logpoints : bentuk khusus breakpoint yang menampilkan log saat baris tersebut dijalankan. Secara teknis, ini seperti bisa menambahkan console.log di mana saja pada halaman web

3. Meninggalkan log di luar browser

• VS Code Debugger

4. Menyuntikkan kode ke situs mana pun (browser berbasis Chromium: Edge, Chrome, Brave..)

• Snippets : menjalankan skrip untuk situs web saat ini

• Overrides : menyimpan salinan skrip remote, memodifikasinya, lalu melakukan override saat halaman dimuat

5. Inspect & Debug di lebih banyak tempat lagi (browser berbasis Chromium)

• Semua turunan Electron didukung: GitHub Desktop, VS Code, bahkan Developer Tools milik browser itu sendiri juga bisa di-debug dengan Developer Tools

• MS Edge Tools for VS Code

6. Rahasia-rahasia yang berantakan

• Orang-orang hanya memakai sebagian kecil dari alat pengembang. Mungkin karena dokumentasinya kurang, jadi banyak waktu dihabiskan untuk membuat dokumentasi, tetapi tampaknya itu bukan solusinya

• Alat pengembang makin kompleks dan membuat orang kewalahan dengan begitu banyak fitur. Adakah cara untuk memperbaikinya?

→ Edge berencana memperkenalkan Focus Mode. Alih-alih menampilkan semua fitur, hanya alat yang diperlukan per use case yang ditampilkan

→ Informational Overlays juga sedang dikerjakan. Ini menyediakan bantuan yang bisa langsung dilihat di alat pengembang

• Masih ada keterputusan antara menulis kode dan men-debug hasil akhirnya

→ Bagaimana agar perubahan yang dibuat di alat pengembang browser bisa tercermin ke kode?

→ Salah satunya adalah mengganti alat pengembang dengan VSCode, lalu saat alat digunakan, file di hard drive diubah langsung

→ Yang lain adalah sebagai bagian dari ekstensi VSCode, memungkinkan untuk memilih agar perubahan lewat alat pengembang juga bisa mengubah file di disk

7. Anda adalah Audience sekaligus Client dari alat pengembang

→ Beri masukan melalui Report a Bug / Request a Feature dan sebagainya

[galadbran]

Dari sudut pandang yang agak berbeda, pengguna dan pengembang memiliki alat yang sama. Karena itu, aplikasi web tampaknya perlu sangat memperhatikan penanganan pengguna jahat yang mengeksploitasi celah dengan cara-cara tidak resmi.

[laeyoung]

Tulisan terkait console.log()

• https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…

[kleinstein]

Meskipun ada fitur yang bagus, tampaknya ada atau tidaknya contoh yang baik dalam dokumentasi sering menjadi faktor penentu besar.