Dasar Webdev | Inspect Element dan HTTP Get

Hai gais, sebelum kita mulai petualangannya ada baiknya kita kenalan dulu. Perkenalkan nama saya Ubaidillah Hakim Fadly biasa dipanggil Ubed, Saya adalah seorang Software Engineer yang sampai saat ini saya masih belajar. Tulisan ini saya dedikasikan kepada temen-temen yang baru belajar pemrograman website dan sebagai catatan saya pribadi biar kalau saya lupa bisa melihatnya kembali hehe.

HTTP Get - Inspect Element

Oke, pada tulisan yang pertama saya akan membahas tentang http get. Ketika kalian membuka suatu website untuk pertama kali dengan menggunakan web browser seperti Mozilla, Chrome, Edge, maupun Safari maka yang dilakukan pertama kali adalah melakukan http get atau istilah gampangnya kita memanggil sebuah data dari server untuk ditampilkan di browser kita. Nah, taukah kalian bagaimana untuk mengetahui proses tersebut? atau istilahnya dimana catatan/logging ketika melakukan permintaan pengambilan resource/data? Yup, caranya adalah dengan membuka Developer Console atau inspect element pada browser kita. Caranya bagaimana? bisa menggunakan klik kanan terus kemudian pilih inspect element atau dengan tekan tombol F12 pada keyboard.

Nah, inspect element adalah hal pertama yang wajib kalian ketahui dan kuasai ketika ingin menjadi seorang web developer. Kurang lebih tampilannya seperti dibawah ini.

inspect1

Proses Render

Nah, untuk mengetahui apa saja dibalik proses render ke browser kalian bisa melihat dibagian network disitu akan ada list yang sudah dilakukan oleh si browser.

inspect2

Untuk melihat lebih detail dari tiap nama proses kalian bisa klik sekali nanti akan muncul informasi dari proses yang tadi di klik. Contohnya seperti ini.

inspect3

Disana terdapat banyak sekali informasi yang berkaitan dengan proses tersebut, mulai dari headers, Preview, Response, Initiator dan Timing yang nanti akan saya coba jelaskan lebih detail yaa di artikel selanjutnya yaa 😊. Intinya sekarang coba kalian explore dulu dengan ganti tulisan random dibagian elements nah boom kalian udah bisa ganti secara langsung kan tulisannya, udah kaya hacker belom hehe. Tapi kalo kalian ganti secara langsung disitu ketika browser di refresh maka tulisannya akan kembali seperti semula, kenapa? karena browser ketika refresh akan kembali memanggil ulang data yang berada di server dan kemudian melakukan perenderan ulang pada browser kalian. Terimakasih dan semoga bermanfaat yaaa..

Terkait

About the author

Hey, I'm Ubaidillah Hakim Fadly, a software engineer, stock investor, and entrepreneur. I publish articles and tutorials about programming and devOps from my own research.

Get the newsletterBuy me a coffee

Ubaidillah