Mengintip Developer Tools di Browser Anda

Pernahkah Anda yang pertama kali mempelajari Javascript tapi belum tahu harus melakukan debugging menggunakan tools apa? Atau pernahkah Anda ketika ingin melihat sebuah komposisi elemen HTML tertentu di sebuah halaman web tapi harus membuka semua isi file HTML dan mencarinya baris per baris?. Jangan khawatir, kini di setiap browser sudah tertanam sebuah tools yang dinamakan dengan developer tools.

Developer tools ini hadir untuk membantu web developer menyelesaikan permasalahan yang terjadi pada aplikasi web dan melakukan debugging. Misal permasalahan yang terjadi adalah adanya halaman yang gagal dimuat ketika melakukan request tertentu, ingin melihat header yang dikirim dari client kepada server, atau ingin melihat apakah AJAX yang ditulis berjalan sesuai dengan spesifikasi atau tidak.

Untuk debugging biasanya kita ingin melakukannya terhadap kode Javascript atau CSS yang kita tulis. Dengan adanya developer tools ini Anda tidak perlu menggunakan alert() untuk melihat proses yang terjadi di dalam Javascript yang Anda tulis. Anda cukup menggunakan console.log() kemudian lihat proses yang terjadi di developer tools.

Umumnya sebuah developer tools yang terdapat di browser memiliki menu inspect element, style editor, javascript profiler, console, network monitor, dan resource monitor. Umumnya developer tools memiliki fungsional untuk:

• editing CSS secara langsung ketika halaman web sedang dibuka
• memiliki fitur untuk melakukan pemeriksaan elemen HTML
• memantau network yang terjadi ketika user melakukan request dan server memberikan response
• profiling untuk melihat performa Javascript terhadap CPU
• konsol untuk melihat proses yang terjadi dengan kode Javascript
• melakukan debugging terhadap kode Javascript

  Untuk fitur tambahan lainnya, tergantung browser apa yang Anda gunakan karena fungsional tambahannya akan berbeda antara satu browser dengan browser yang lainnya.

Ingin melihat developer tools di beberapa browser, Anda dapat mengikuti langkah - langkah berikut:

• Di Opera, Anda dapat mengaktifkan developer tools dengan menekan kombinasi tombol Ctrl + Shift + i
• Di Safari, Anda juga dapat mengaktifkan developer tools dengan cara yang sama seperti di Opera yaitu dengan menekan kombinasi tombol Ctrl + Shift + i
• Dengan menekan kombinasi tombol Ctrl + Shift + J, Anda dapat melihat developer tools di Google Chrome
• Developer tools di Firefox dapat Anda aktifkan dengan menekan kombinasi tombol Ctrl + Shift + k
• Berbeda dengan browser yang lain, Anda dapat melihat developer tools di Internet Explorer 9 cukup dengan menekan tombol F12

Dengan menggunakan developer tools pengembang aplikasi web akan lebih mudah.

Sumber Cover Image: Freepik

(rfs)