Pernah nggak sih kamu lagi buka sebuah website, terus kepikiran, “Gimana yaa caranya ngintip atau ubah-ubah tampilannya?” Nah, di Google Chrome ada fitur yang namanya Inspect Element yang bisa bikin kamu ngerasa kayak hacker padahal cuma mainin tampilan aja.

Dan tenang, ini nggak bakal bikin webnya rusak beneran, karena perubahan yang kamu lakuin cuma muncul di browser kamu aja. Kalo kamu pengen belajar cara pakainya, pas banget, karena di sini kita bakal bahas Cara Inspect Element Situs Web di Google Chrome Laptop.

Apa Itu Inspect Element?

Sebelum lanjut bahas Cara Inspect Element Situs Web di Google Chrome Laptop, kamu harus tau Inspect Element itu sebenernya apa. Jadi, Inspect Element itu semacam alat pembongkar isi halaman web. Di sini kamu bisa liat kode HTML, CSS, bahkan JavaScript yang bikin web itu hidup. Bayangin aja kayak buka dapur restoran, kamu bisa liat semua resep dan cara masaknya.

Kerennya lagi, kamu bisa utak-atik warnanya, teksnya, ukuran font, atau bahkan sembunyiin elemen tertentu dari halaman itu. Misalnya, kamu lagi males liat iklan yang gede banget, yaudah, tinggal hapus aja dari kodenya di situ. Tapi inget, semua yang kamu ubah nggak permanen, begitu kamu refresh halaman, ya balik lagi seperti semula.

Cara Buka Inspect Element di Laptop (Windows & Mac)

Buat kamu yang pakai laptop, ada dua cara gampang buat buka Inspect Element di Chrome.

• Pertama, buka dulu Google Chrome di laptop kamu.
• Terus masuk ke website yang mau kamu bedah.
• Abis itu klik kanan di bagian kosong halaman (jangan di gambar atau link).
• Pilih “Inspect” atau “Inspect Element” di bagian bawah menu yang muncul.
• Nah, jendela Inspect Element bakal kebuka di bawah atau di sisi kanan browser, nunjukin kode HTML dan CSS-nya.

Kalo mau nyari elemen tertentu, arahkan kursor ke bagian kode di panel itu. Klik, dan bagian yang sama di website bakal tersorot. Dari situ kamu bisa langsung ubah teks, warna, ukuran, dan lain-lain.

Cara Cepet Pakai Keyboard Shortcut

Biar nggak ribet klik-klik, kamu juga bisa buka Inspect Element cuma pakai keyboard.

• Di Windows: tekan Ctrl + Shift + I
• Di Mac: tekan Cmd + Option + I

Trik ini lumayan ngebantu kalo kamu mau sering buka-tutup panel ini pas lagi eksperimen. Oh ya, shortcut ini juga berlaku di hampir semua browser berbasis Chrome, termasuk Microsoft Edge.

Fitur-Fitur Penting di Inspect Element

Begitu panel Inspect Element kebuka, kamu bakal nemu beberapa tab yang punya fungsi beda-beda:

• Elements – Ini tempat kamu ngulik struktur HTML dari web. Kamu bisa liat elemen, ID, dan class yang dipakai di setiap bagian.
• Styles – Semua gaya CSS buat elemen yang kamu pilih ada di sini. Dari ukuran font, warna, sampai jarak antar elemen bisa kamu ubah langsung.
• Console – Nah, kalo webnya punya error JavaScript, semua pesannya nongol di sini. Cocok buat developer atau kamu yang mau belajar debug.
• Sources – Ini buat ngintip file JavaScript, gambar, atau file pendukung lain yang dipakai web itu.

Buat pemula, biasanya yang paling sering dipakai itu Elements sama Styles, karena dua itu udah cukup buat main-main sama tampilan web.

Penutup

Nah, itu dia Cara Inspect Element Situs Web di Google Chrome Laptop. Inspect Element itu kayak pintu belakang yang bisa kasih kamu akses liat rahasia dapur sebuah website tanpa bener-bener ngubah data aslinya.

Asal jangan disalahgunain aja, karena tujuan utamanya buat belajar dan eksperimen. Sekarang tinggal kamu coba sendiri di laptop, biar makin jago ngoprek web kayak pro. Selamat mencoba yaa guys!