BONUS Kalender 2020 Unyu! Setiap Transaksi di CODEPOLITAN Klaim Promo
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Mengintip Developer Tools di Browser Anda

Ditulis oleh Ridwan Fajar, dipublikasi pada 02 Aug 2014 dalam kategori Tools
Mengintip Developer Tools di Browser Anda - CodePolitan.com

[caption id="attachment_1447" align="alignleft" width="350"]Developer Tools di Mozilla Firefox Developer Tools di Mozilla Firefox[/caption]

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.

[caption id="attachment_1446" align="aligncenter" width="350"]Developer Tools di Opera Developer Tools di Opera[/caption]

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.

[caption id="attachment_1448" align="aligncenter" width="350"]Developer Tools di Google Chrome Developer Tools di Google Chrome[/caption]

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 [caption id="attachment_1444" align="aligncenter" width="350"]Developer Tools di Microsoft Internet Explorer Developer Tools di Microsoft Internet Explorer[/caption]

 

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

[caption id="attachment_1445" align="aligncenter" width="350"]Developer Tools di Apple Safari Developer Tools di Apple Safari[/caption]

Dengan menggunakan developer tools pengembang aplikasi web akan lebih mudah.

(rfs)


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP