Trik Pemeriksa Elemen: 8 Cara yang Wajib Diketahui! 🛠️

Inspektur Elemen di peramban Anda mungkin tampak seperti alat yang hanya diperuntukkan bagi pengembang, tetapi Anda sebenarnya dapat melakukan beberapa hal keren dengannya meskipun Anda tidak tahu apa pun tentang pemrograman! 🚀

1 . Unduh Gambar

Anda mungkin perlu mengunduh gambar dari situs web. Anda mencoba mengklik kanan dan menekan "Simpan Gambar", dan Anda menemukan bahwa opsi tersebut dinonaktifkan atau tombol "Simpan Gambar" tidak muncul. Di waktu lain, Anda mungkin hanya dapat mengunduh gambar mini, dan bukan keseluruhan berkas. 🤔 Apa kabar?

Pengembang sering kali sengaja menonaktifkan tombol “Simpan Gambar”, atau menggunakan kerangka kerja web yang tidak mengizinkan pengunduhan gambar dengan cara tersebut. Namun ada solusi praktis di Element Inspector. Anda bisa mendapatkan sumber gambar apa pun dari situs web, berukuran penuh, dalam tiga langkah sederhana. 📸

Langkah 1

Melakukan klik kanan pada di mana saja pada halaman dan pilih “Periksa Elemen” atau “Periksa.” Anda juga dapat menggunakan pintasan papan ketik khusus untuk inspektur dalam peramban Anda. F12 berfungsi di sebagian besar peramban dan sistem operasi. Saya menggunakan Firefox untuk demo ini, tetapi langkah-langkahnya sama. 🖱️

Langkah 2

Di dalam jendela Element Inspector, klik tab “Network”. Tab jaringan harus memiliki “Gambar” sebagai salah satu submenunya. Klik pada “Gambar.” 🖼️

Sekarang muat ulang halaman sehingga semua sumber gambar muncul di tab “Gambar”. Gunakan tombol penyegaran di samping bilah alamat dari peramban Anda atau tekan Ctrl+R. 🔄

Langkah 3

Dan itu dia. Seluruh pustaka gambar akan dimuat ke dalam daftar. Daftar ini diperbarui secara dinamis, jadi saat lebih banyak gambar diunggah ke situs web, gambar tersebut juga akan muncul di sini. 🖼️✨

Anda dapat mengarahkan kursor ke suatu berkas untuk melihat pratinjau dan dimensinya. Klik dua kali untuk membuka berkas di tab baru, tempat Anda dapat menyimpannya menggunakan menu klik kanan. 💾

2 . Unduh Video

Sama seperti aset gambar, terkadang situs web tidak mengizinkan memulangkan video secara langsung. Namun Anda dapat mengunduhnya dengan memuatnya ke dalam inspektur elemen. Setelah dimuat ke inspektur, cukup klik dua kali nama file untuk membukanya di tab baru. Bahasa Indonesia:

Langkah 1

Buka jendela Inspektur Elemen dengan menekan pintasan keyboard F12 (seharusnya berfungsi pada sebagian besar sistem). Alternatifnya, Anda dapat klik kanan di mana saja pada halaman web dan pilih "Periksa". Jendela Pemeriksa Elemen akan muncul. 🖱️

Langkah 2

Klik tab “Jaringan” dan kemudian “Media” untuk memfilter semuanya kecuali file video. Muat ulang halaman. Dengan mengeklik tombol penyegaran browser atau dengan menekan Ctrl+R. 🔄

Langkah 3

Berkas video akan dimuat dalam daftar. Anda tidak dapat langsung melihat pratinjaunya, tetapi Anda dapat mengklik dua kali berkas untuk membukanya di tab baru. Di sana, Anda dapat klik kanan dan mengunduhnya. Bahasa Indonesia:

3 . Ambil Screenshot Halaman Penuh

Jika Anda ingin menyimpan seluruh halaman web, Anda dapat dengan cepat mengunduhnya sebagai berkas PDF atau HTML. Tetapi bagaimana jika Anda ingin mengambil foto biasa seluruh halaman? Di Sini Saya akan menjelaskan cara melakukannya. 📸

Firefox memiliki alat tangkapan layar khusus di menu konteks, jadi saya akan menunjukkan cara melakukannya di Google Chrome dan peramban lainnya. 🌐

Buka alat inspektur dengan mengklik kanan di mana saja pada halaman atau menekan F12.

Tekan Ctrl+Shift+P untuk membuka jendela Run. saya menulis Ambil tangkapan layar ukuran penuh di jendela ini. Klik itu. 📄

Jendela “Simpan Sebagai” akan segera muncul, memungkinkan Anda menyimpan tangkapan layar halaman penuh sebagai JPG. 💾

4 . Berpura-pura Anda sedang menggunakan telepon

Sebagian besar situs web dimuat secara berbeda tergantung pada jenis perangkat dan ukuran layar. Jika Anda ingin mengelabui situs agar mengira Anda menggunakan perangkat lain (apa pun alasannya), Anda dapat melakukannya dengan mudah menggunakan alat inspektur. 📱

Di Chrome, buka jendela Inspektur Elemen dari menu klik kanan atau dengan F12. Lalu klik ikon laptop dan telepon kecil di sudut kiri atas. Firefox memiliki tombol serupa, yang disebut Mode Desain Responsif (Ctrl+Shift+M). 🖥️

Anda akan memiliki daftar perangkat yang dapat Anda tiru, dan Anda juga dapat menyesuaikan ukuran secara manual layar. Setelah Anda memilih perangkat seluler, Anda akan melihat bahwa peramban Anda juga mensimulasikan gerakan sentuh. 📱✨

5 . Identifikasi Sumber

Kiat ini ditujukan bagi mereka yang kreatif, tetapi siapa pun yang penasaran dengan font pada situs web dapat menggunakan trik ini. Anda dapat menggunakan alat inspektur untuk mengidentifikasi dan terkadang bahkan mengunduh font. 🖋️

Pertama, buka alat pemeriksaan elemen. Selanjutnya, klik tab “Jaringan” (mungkin tersembunyi di menu luapan) dan pilih “Sumber.”

Lalu tekan Ctrl+R. Font yang ditampilkan akan dimuat ke dalam daftar, mungkin dalam format WOFF. Anda dapat mengunduhnya langsung dengan mengklik dua kali pada nama font. Misalnya, How-To Geek menggunakan Roboto sebagai font default-nya. 🔤

Jika Anda memerlukan informasi lebih rinci tentang font, buka tab “Elemen” dan pilih “Gaya”. Gulir ke bawah ke properti keluarga font dan klik di atasnya. Teks yang sesuai akan disorot di halaman web. Dengan cara ini Anda dapat mengidentifikasi sumbernya secara akurat. 🎨

6 . Edit Teks di Halaman (Sementara)

Tahukah Anda bahwa Anda dapat mengedit sementara hampir semua hal di halaman web menggunakan inspektur? Alat ini memungkinkan Anda mengedit kode yang menyusun situs web, jadi jika Anda tahu sedikit tentang kode, Anda dapat membuat tampilan halaman sesuai keinginan (hanya di komputer Anda, hingga Anda memuat ulang halaman tersebut). 🛠️

Sekalipun Anda tidak tahu apa pun tentang pengkodean, Anda dapat mengedit teks dasar di halaman web mana pun. Ini bisa menjadi lelucon kecil yang menyenangkan untuk dilakukan pada teman-teman Anda. 😉

Sorot teks pada halaman yang ingin Anda edit, lalu klik kanan teks tersebut. Kemudian pilih “Periksa” atau “Periksa Elemen.”

Potongan teks yang relevan akan muncul di tab Elemen. Cukup klik dua kali dan ganti teks dengan apa pun yang Anda inginkan. ✏️

Tutup Pemeriksa Elemen dan selesai! Ingatlah bahwa jika Anda memuat ulang halaman, perubahan Anda akan dibatalkan. 🔄

7 . Hapus Item

Sama seperti mengedit teks, Anda juga dapat menghapus elemen tertentu dari halaman web. Sekali lagi, perubahan hanya akan bertahan hingga Anda memuat ulang halaman. ❌

Klik kanan pada elemen yang ingin dihapus, lalu pilih “Periksa” atau “Periksa Elemen”.

Arahkan kursor ke label “

” hingga seluruh elemen disorot. Lalu tekan saja tombol Delete. 🔚

Begitu saja, hilang! 🕵️‍♂️

8 . Mengidentifikasi Nilai Warna

Tip lain untuk para kreatif: Anda bisa mendapatkan nilai RGB dan HEX apa pun warna pada halaman web dengan alat pipet yang akan Anda temukan di inspektur elemen. 🎨

Klik kanan di mana saja pada halaman dan buka Inspektur. Secara default, jendela Aturan terbuka dalam tab Inspektur. Gulir ke bawah untuk menemukan properti yang diberi label warna.

Properti warna harus memiliki lingkaran atau persegi berwarna di sebelahnya. Klik di atasnya untuk membuka pemilih warna dan tekan ikon pipet di sebelahnya. 🖌️

Anda dapat mengarahkan pipet ini ke mana saja pada halaman untuk menemukan nilai warna. Mengklik pipet akan secara otomatis mengisi properti dengan nilai warna yang baru saja Anda pilih. Dari sini Anda dapat dengan mudah menyalinnya. 📋

---

Ini tipsnya hanya menggores permukaan tentang apa yang sebenarnya mungkin dilakukan dengan menggunakan Elements Inspector. Jika Anda ingin mendalami pengembangan web lebih lanjut, berikut adalah panduan untuk membantu Anda memulai. 💻