Proses Melakukan Debugging Pada Frontend

Front-End adalah representasi dari sebuah produk perangkat lunak, berupa tampilan (user interface) yang dapat diakses langsung oleh pengguna. Proses debugging di sisi ini adalah memastikan kinerja sebuah produk perangkat lunak berjalan dengan baik saat diproses oleh pengguna.

Studi Kasus 1: Debugging di Laman Web

1. Laman web adalah salah satu jenis representasi front-end dari sebuah produk perangkat lunak.
2. Sebuah laman web ditampilkan melalui web browser. Rata-rata web browser masa kini seperti Edge, Firefox, Chrome, Opera dll telah dilengkapi developer tools.
3. Developer tools berisi serangkaian alat untuk membantu pengembang melakukan berbagai aktivitas, termasuk debugging.
4. Biasanya untuk mengakses developer tools dengan menekan tombol F12 di keyboard.

Contoh Tampilan Developer Tools

Alat-alat di Developer Tools

Contoh: Menguji Penggunaan Font

1. Menggunakan Firefox, di bagian Element/Inspector pilih opsi "Font" di bagian kanan atas.
2. Kemudian pengembang dapat memanipulasi ukuran font, weight, style dan menemukan kombinasi yang paling cantik; bahkan dapat mengubah jenis font dengan mengubah HTML style attribute secara langsung di editor HTML.

Studi Kasus 2: Debugging di VS Code

1. Visual Studio Code memiliki ekstensi Developer Tools berbasis browser yang dapat ditambahkan di aplikasi.
2. Keuntungannya, pengembang bisa melihat dan memanipulasi kode secara lebih nyaman.

Tampilan Debugger di VS Code

Kesimpulan

Debugging di frontend mempunyai peran penting untuk memastikan kenyamanan pengguna akhir dalam menggunakan program aplikasi yang dikembangkan. Visual Studio Code memiliki ekstensi Developer Tools yang dapat memudahkan pengembang dalam melakukan proses debugging.

Sumber Referensi :

Buku : Adragna, P. (t.thn.). Software debugging techniques. Queen Mary: University of London.

Website : sudonull | techopedia