Didalam sebuah web browser terdapat sebuah fitur yang dinamakan Inspect Element. Fitur Inspect Element ini dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Pada saat kita membuka Inspect Element tersebut kita akan ditampilkan sebuah layar dengan tulisan kode-kode HTML dan CSS. Tetapi kebanyakan orang tidak mengetahui Apa Itu Inspect Element? dan untuk apa fungsinya. Berikut penjelasan mengenai Inspect Element.
Baca Juga: Cara Menggunakan Background Di CSS
DAFTAR ISI
Apa Itu Inspect Element?
Inspect Element adalah alat peramban yang memungkinkan kalian melihat dan mengedit HTML & CSS konten web. Namun, setiap pengeditan yang kalian lakukan hanya akan muncul di layar pribadi kalian, dan bertahan hingga kalian keluar. Artinya, kalian tidak membuat perubahan permanen ke situs web, kalian hanya dapat menyesuaikannya untuk saat ini saja.
Fungsi Inspect Element
Katakanlah kalian baru memulai dengan coding. Kalian mengunjungi halaman web, dan kalian melihat bahwa ada elemen di situs yang benar-benar menarik perhatian kalian. Mungkin itu adalah sesuatu yang kalian menarik untuk dimasukkan ke dalam halaman yang telah kalian kerjakan, mungkin itu sesuatu yang canggih yang belum pernah kalian pertimbangkan sebelumnya. Bagaimanapun, kalian ingin tahu tentang kode tersebut. Jadi, kalian menggunakan Inspect Element untuk melihat apa yang sebenarnya terjadi.
Atau, katakanlah kalian sedang dalam proses coding halaman kalian sendiri. Inspect Element memungkinkan kalian melihat pratinjau perubahan tanpa benar-benar menerapkannya. Memungkinkan untuk dengan mudah mengidentifikasi dan memperbaiki kode yang rusak. Karena inspect element memberi kalian kekuatan untuk mengubah teks apa pun pada halaman.
Dan, jika kalian tertarik untuk mengoptimalkan halaman kalian untuk peringkat mesin pencari yang lebih baik (faktor kunci dalam pemasaran digital), menggunakan Inspect Element pada halaman pesaing dapat memberi kalian gambaran tentang kata kunci apa yang mereka fokuskan. Kalian juga dapat menggunakan alat ini untuk menguji kecepatan memuat situs kalian.
Ini hanya beberapa contoh untuk apa kalian dapat menggunakan Inspect Element. Sederhananya fungsi inspect element lainnya seperti:
- Tempat eksperimen CSS.
- Pengujian web responsif.
- Mengukur kecepatan web.
- Mempelajari apa yang membuat website berjalan.
- Mencari kode yang rusak.
- Meniru seperti apa perubahan warna dan font.
Kenapa Saya Harus Menggunakan Inspect Element?
Jika kalian tidak pernah mengintip kode situs web karena penasaran, kalian mungkin bertanya-tanya mengapa kalian harus belajar cara menggunakan Inspect Element.
- Desainer: Ingin melihat dulu bagaimana desain situs akan terlihat di seluler? Atau ingin melihat bagaimana warna hijau yang berbeda akan terlihat pada tombol pendaftaran? kalian dapat melakukan keduanya dalam detik dengan Inspect Element.
- Pemasar: Ingin tahu kata kunci apa yang digunakan pesaing dalam tajuk situs mereka, atau ingin melihat apakah pemuatan situs kalian terlalu lambat untuk uji PageSpeed Google ? Inspect Element dapat menunjukkan keduanya.
- Penulis: Lelah mengaburkan nama dan email kalian di tangkapan layar?Dengan Inspect Element, kalian dapat mengubah teks apa pun di laman web dalam sedetik.
- Agen Pendukung: Perlu cara yang lebih baik untuk memberi tahu pengembang apa yang perlu diperbaiki di situs? Inspect Element memungkinkan kalian membuat contoh perubahan cepat untuk menunjukkan apa yang kalian bicarakan.
Cara Penggunaan Inspect Element
Langkah 1: Tangkapan Layar Apa Yang Kalian Inginkan
Katakanlah kalian sedang menulis posting blog dan ingin menunjukkan contoh bagaimana tata letak Facebook baru terlihat di profil kalian. Kalian dapat menggunakan Inspect Element untuk mengubah nama kalian di Facebook, dan tangkapan layar itu, sehingga kalian tidak mengungkapkan informasi pribadi kalian.
Langkah 2: Sorot Area Yang Ingin Kalian Edit
Sorot salinan yang ingin kalian ubah, klik kanan, dan pilih “Periksa Elemen” dari opsi. Dengan mengarahkan kursor ke komponen aktual halaman yang ingin kalian ubah, kalian dapat memastikan Elemen Inspect membuka tempat kode yang tepat yang ingin kalian ubah. Kalian sekarang akan melihat serangkaian tag <div> dan <a>. Pindai baris kode untuk melihat teks halaman yang ingin kalian edit.
Langkah 3: Kustomisasi Salinannya
Klik dua kali pada baris kode, edit salinan untuk dibaca sesuai keinginan, dan tekan enter. Lalu layar kalian sekarang diperbarui dengan salinan yang ingin kalian tampilkan. Ini akan berlangsung sampai kalian menekan refresh atau keluar dari browser, karena kalian hanya mengedit elemen pada halaman kalian, bukan situs atau produk yang sebenarnya. Pengguna Mac dapat menggunakan Command + 3 untuk mengambil tangkapan layar. Sebagian besar PC harus memiliki alat “Clipper” untuk melakukan ini, jika tidak Evernote juga menyediakan fungsionalitas tangkapan layar.
Kesimpulan
Jadi apa itu Inspect Element? Inspect Element adalah sebuah fitur dari web browser untuk melihat kode HTML dan CSS yang berada pada halaman website tersebut. Dan biasanya digunakan untuk mencari kode yang rusak atau untuk meniru tampilan halaman website tersebut.
Sekian artikel Apa Itu Inspect Element? Berikut Penjelasannya. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih…