Pengertian Browser Developer Tools
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 dibukamemiliki fitur untuk melakukan pemeriksaan elemen HTML memantau network yang terjadi.
ketika user melakukan request dan server memberikan responseprofiling untuk melihat performa Javascript terhadap CPUkonsol untuk melihat proses yang terjadi dengan kode Javascriptmelakukan debugging terhadap kode Javascript.
Developer Tools di Microsoft Internet ExplorerUntuk fitur tambahan lainnya, tergantung browser apa yang Anda gunakan karena fungsional tambahannya akan berbeda antara satu browser dengan browser yang lainnya.
Teknik Melihat Developer Tools
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 + iDi Safari, Anda juga dapat mengaktifkan developer tools dengan cara yang sama seperti di Opera yaitu dengan menekan kombinasi tombol Ctrl + Shift + iDengan menekan kombinasi tombol Ctrl + Shift + J, Anda dapat melihat developer tools di Google ChromeDeveloper tools di Firefox dapat Anda aktifkan dengan menekan kombinasi tombol Ctrl + Shift + kBerbeda dengan browser yang lain, Anda dapat melihat developer tools di Internet Explorer 9 cukup dengan menekan tombol F12
Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com