Rahasia Alat Pengembang Browser
(christianheilmann.com)<p>1. Console punya jauh lebih banyak fungsi daripada sekadar `log()`<br />
- opsi pemfilteran<br />
- {} : menampilkan nilai/nama variabel bersama-sama<br />
- warn/info/error() : level log<br />
- assert(): hanya ditampilkan saat kondisi tertentu terpenuhi<br />
- trace(): siapa yang memanggilnya <br />
- group(): mengelompokkan pesan sehingga bisa dibuka/ditutup <br />
- table(): menampilkan informasi dalam bentuk tabel <br />
- $() = document.querySelector(), $$() = document.querySelectorAll()<br />
$$('a').map(a => {<br />
return {url: a.href, text: a.innerText}<br />
})<br />
<br />
2. Meninggalkan log tanpa akses ke source code<br />
- Live Expressions : memeriksa nilai variabel yang berubah secara real-time<br />
- 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<br />
<br />
3. Meninggalkan log di luar browser <br />
- VS Code Debugger<br />
<br />
4. Menyuntikkan kode ke situs mana pun (browser berbasis Chromium: Edge, Chrome, Brave..)<br />
- Snippets : menjalankan skrip untuk situs web saat ini <br />
- Overrides : menyimpan salinan skrip remote, memodifikasinya, lalu melakukan override saat halaman dimuat <br />
<br />
5. Inspect & Debug di lebih banyak tempat lagi (browser berbasis Chromium)<br />
- Semua turunan Electron didukung: GitHub Desktop, VS Code, bahkan Developer Tools milik browser itu sendiri juga bisa di-debug dengan Developer Tools<br />
- MS Edge Tools for VS Code <br />
<br />
6. Rahasia-rahasia yang berantakan<br />
- 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 <br />
- Alat pengembang makin kompleks dan membuat orang kewalahan dengan begitu banyak fitur. Adakah cara untuk memperbaikinya?<br />
→ Edge berencana memperkenalkan Focus Mode. Alih-alih menampilkan semua fitur, hanya alat yang diperlukan per use case yang ditampilkan <br />
→ Informational Overlays juga sedang dikerjakan. Ini menyediakan bantuan yang bisa langsung dilihat di alat pengembang <br />
- Masih ada keterputusan antara menulis kode dan men-debug hasil akhirnya <br />
→ Bagaimana agar perubahan yang dibuat di alat pengembang browser bisa tercermin ke kode?<br />
→ Salah satunya adalah mengganti alat pengembang dengan VSCode, lalu saat alat digunakan, file di hard drive diubah langsung<br />
→ Yang lain adalah sebagai bagian dari ekstensi VSCode, memungkinkan untuk memilih agar perubahan lewat alat pengembang juga bisa mengubah file di disk<br />
<br />
7. Anda adalah Audience sekaligus Client dari alat pengembang <br />
→ Beri masukan melalui Report a Bug / Request a Feature dan sebagainya </p>
3 komentar