Element Inspector di browser Anda tampak seperti alat yang hanya ditujukan untuk pengembang, tetapi Anda dapat melakukan beberapa hal keren dengannya meskipun Anda tidak tahu pemrograman apa pun.
1
Unduh Gambar
Anda mungkin perlu mengambil gambar dari situs web. Anda mencoba mengklik kanan padanya dan menekan “Simpan Gambar,” hanya untuk menemukan bahwa klik kanan dinonaktifkan atau tombol “Simpan Gambar” tidak tersedia. Di lain waktu, Anda mungkin menemukan bahwa Anda hanya dapat mengunduh pratinjau thumbnail kecil dari gambar tersebut, dan bukan file berukuran penuh. Apa yang menyebabkannya?
Pengembang sengaja menonaktifkan tombol “Simpan Gambar” atau menggunakan kerangka web yang tidak mendukung gambar seperti itu. Ada solusi yang bagus untuk itu di inspektur elemen. Anda sebenarnya dapat mengambil aset gambar apa pun dari situs web, dalam ukuran penuh, dalam tiga langkah mudah.
Terkadang gambar-gambar ini dikunci karena alasan lisensi dan hak cipta, jadi berhati-hatilah dan tetap gunakan penggunaan wajar untuk menghindari masalah hukum.
Langkah 1
Klik kanan di mana saja pada halaman dan klik “Periksa Elemen” atau “Periksa.” Anda juga dapat menemukan dan menggunakan pintasan keyboard khusus untuk inspektur di browser Anda. F12 berfungsi untuk sebagian besar browser dan sistem operasi. Saya menggunakan Firefox untuk demonstrasi ini, tetapi langkah-langkahnya sama.
Langkah 2
Di dalam jendela inspeksi elemen, klik tab “Jaringan”. Tab jaringan harus memiliki “Gambar” sebagai salah satu submenunya. Klik “Gambar.”
Sekarang muat ulang halaman, sehingga semua aset gambar muncul di tab “Gambar”. Gunakan tombol segarkan di sebelah bilah alamat browser Anda atau tekan Ctrl+R.
Langkah 3
Dan itu dia. Seluruh perpustakaan gambar harus dimuat ke dalam daftar. Daftar diperbarui secara dinamis, sehingga semakin banyak gambar yang dimuat di halaman web, gambar tersebut juga akan muncul di sini.
Anda dapat mengarahkan kursor ke file untuk melihat pratinjau dan dimensinya. Klik dua kali untuk membuka file di tab baru, tempat Anda dapat menyimpannya dengan menu klik kanan.
2
Unduh Video
Sama seperti aset gambar, terkadang situs web tidak mengizinkan Anda mendownload video secara langsung. Namun Anda dapat mengunduhnya dengan memuatnya ke dalam pemeriksa elemen. Setelah dimuat ke dalam inspektur, Anda cukup mengeklik dua kali nama berkas untuk membukanya di tab baru.
Langkah 1
Buka jendela inspeksi elemen dengan menekan pintasan keyboard F12 (ini dapat digunakan pada sebagian besar sistem). Alternatifnya, Anda dapat mengeklik kanan di mana saja pada halaman web dan memilih “Periksa”. Jendela pemeriksa elemen akan muncul.
Langkah 2
Klik tab “Jaringan”, lalu klik “Media” untuk memfilter semuanya kecuali file video. Muat ulang halaman. Klik tombol segarkan browser atau tekan Ctrl+R.
Langkah 3
File video harus dimuat ke dalam daftar. Anda tidak dapat mempratinjaunya secara instan, namun Anda dapat mengklik dua kali pada file untuk membukanya di tab baru. Di sini, Anda cukup mengeklik kanan dan mengunduhnya.
3
Tangkap Tangkapan Layar Satu Halaman Penuh
Jika Anda ingin menyimpan seluruh halaman web, Anda dapat dengan cepat mendownloadnya sebagai file PDF atau HTML. Namun bagaimana jika Anda ingin mengambil cuplikan gambar biasa dari seluruh halaman? Begini caranya.
Firefox memiliki alat tangkapan layar khusus di menu konteks biasa, jadi saya akan menunjukkan cara melakukannya di Google Chrome dan browser lainnya.
Buka alat inspektur dengan mengklik kanan di mana saja pada halaman atau menekan F12.
Tekan Ctrl+Shift+P untuk membuka jendela Jalankan. Jenis Ambil tangkapan layar ukuran penuh di jendela ini. Klik itu.
Jendela “Simpan Sebagai” akan langsung muncul yang memungkinkan Anda menyimpan tangkapan layar satu halaman penuh dalam format JPG.
4
Berpura-puralah Anda Sedang Menggunakan Telepon
Sebagian besar situs web memuat secara berbeda berdasarkan jenis perangkat dan ukuran layar. Jika Anda ingin mengelabui situs web agar mengira Anda menggunakan perangkat lain (untuk alasan apa pun), Anda dapat melakukannya dengan mudah menggunakan alat inspektur.
Di Chrome, buka jendela Inspect Element dari menu konteks klik kanan atau dengan F12. Kemudian klik ikon laptop dan telepon kecil di pojok kiri atas. Firefox memiliki tombol serupa, yang disebut Mode Desain Responsif (Ctrl+Shift+M).
Anda akan mendapatkan daftar perangkat yang dapat Anda tiru, dan Anda juga dapat menyesuaikan ukuran layar secara manual.
Setelah Anda memilih perangkat seluler, Anda akan melihat bahwa browser Anda juga mensimulasikan gerakan sentuh.
5
Identifikasi Font
Ini untuk materi iklan, tetapi siapa pun yang penasaran dengan font di situs web dapat menggunakan trik ini. Anda dapat menggunakan alat inspektur untuk mengidentifikasi dan terkadang bahkan mengunduh font.
Pertama buka alat inspeksi elemen. Selanjutnya, klik tab “Jaringan” (mungkin tersembunyi di menu tambahan) dan pilih “Font.”
Lalu tekan Ctrl+R. Font yang dirender akan dimuat dalam daftar, kemungkinan besar dalam format WOFF. Anda dapat mendownloadnya langsung dengan mengklik dua kali pada nama font. Misalnya, How-To Geek menggunakan Roboto sebagai font default.
Jika Anda memerlukan informasi font yang lebih detail, buka tab “Elemen” dan pilih “Gaya.” Gulir ke bawah ke properti keluarga font dan klik. Teks yang sesuai akan menyala di halaman web. Dengan cara ini Anda dapat mengidentifikasi font dengan tepat.
6
Mengedit Teks Pada Halaman (Sementara)
Tahukah Anda bahwa Anda dapat mengedit sementara apa saja di halaman web menggunakan inspektur? Alat ini memungkinkan kita mengedit kode yang membentuk situs web, jadi jika Anda mengetahui kodenya, Anda dapat membuat situs web terlihat seperti apa pun (hanya di komputer Anda, hingga Anda menyegarkan halamannya).
Meskipun 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 Anda.
Sorot teks pada halaman yang ingin Anda edit dan klik kanan padanya. Kemudian klik “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 inspektur elemen dan selesai! Ingat, menyegarkan halaman akan membatalkan perubahan Anda.
7
Hapus Elemen
Sama seperti mengedit teks, Anda juga dapat menghapus elemen tertentu dari halaman web. Sekali lagi, perubahan hanya bertahan hingga Anda menyegarkan halaman.
Klik kanan pada elemen yang ingin Anda hapus, lalu klik “Periksa” atau “Periksa Elemen.”
Arahkan kursor ke “
Begitu saja, hilang.
8
Identifikasi Nilai Warna
Tip lain untuk materi iklan: Anda dapat mengambil nilai RGB dan HEX untuk warna apa pun di halaman web dengan alat pipet yang dapat Anda temukan di pemeriksa elemen.
Klik kanan di mana saja pada halaman dan buka Inspektur. Secara default, jendela Aturan terbuka di dalam tab Inspektur. Gulir ke bawah untuk menemukan properti berlabel warna.
Properti color harus memiliki lingkaran atau kotak berwarna di sebelahnya. Klik untuk membuka pemilih warna dan tekan ikon pipet di sebelahnya.
Anda dapat mengarahkan pipet ini ke mana saja pada halaman untuk mencari nilai warna. Mengklik pipet akan mengisi otomatis properti dengan nilai warna yang baru saja Anda pilih. Dari sini Anda dapat menyalinnya dengan mudah.
Kiat-kiat ini hanya menjelaskan permukaan dari apa yang sebenarnya mungkin dilakukan dengan menggunakan Element Inspector. Jika Anda ingin mencoba lebih jauh dalam pengembangan web, berikut panduan untuk Anda mulai.
