Pengembang dan desainer UI menggunakan fitur Elemen Inspeksi untuk memodifikasi situs web secara online tanpa mengubah kode sumber. Tapi bagaimana cara memeriksa elemen tanpa mengikuti kursus pengembangan web?
Inspect Element adalah alat pengembang praktis yang keluar dari kotak dengan browser web populer. Anda hanya perlu mengetahui cara menggunakan alat ini dalam beberapa klik saat menjelajahi situs web.
Anda dapat melakukan banyak trik sulap seperti mengubah tata letak situs web, mengambil tangkapan layar tanpa teks, mengubah font, mengubah angka, dan banyak lagi.
Temukan panduan langkah demi langkah singkat di bawah ini untuk mempelajari cara memeriksa elemen dengan mudah.
Apa itu Elemen Inspeksi?
Inspect Element adalah alat pengembangan web yang tersedia di sebagian besar browser web. Anda dapat menggunakannya untuk mengedit kode sumber front-end dari situs web mana pun yang Anda kunjungi.
Perubahan yang Anda buat terjadi dalam kotak pasir di dalam browser web Anda. Jadi, Anda tidak melakukan perubahan apa pun pada situs web yang sebenarnya. Selain itu, perubahan dangkal yang Anda lakukan akan hilang saat Anda menyegarkan halaman.
Berikut adalah beberapa cara kreatif untuk menggunakannya:
- Anda perlu mengambil tangkapan layar dari sebuah situs web, dan teks pada gambar tersebut mengganggu Anda. Gunakan alat Inspeksi Elemen untuk menghapus teks tersebut.
- Anda ingin mengerjai teman-teman Anda dengan menunjukkan nama Anda di New York Times atau Washington Post. Inspeksi Elemen adalah cara terbaik untuk melakukan ini.
- Uji kode debug di situs web dengan menerapkannya secara waktu nyata menggunakan alat Elemen Inspeksi. Jika berhasil, Anda dapat mengubah kode sumber backend.
- Sebagai pemasar digital, Anda dapat mengungkap kata kunci pesaing, judul SEO, tag meta, dll., menggunakan alat pengembangan web yang hebat ini.
Cara Memeriksa Elemen di Windows
Menggunakan alat Elemen Inspeksi di Windows sangatlah mudah. Temukan di bawah panduan langkah demi langkah untuk memeriksa elemen menggunakan berbagai browser web di Windows:
Alat Inspeksi Google Chrome
- Ketika menggunakan Google Chrome, klik kanan di mana saja di situs web.
- Menu konteks klik kanan akan muncul.
- Di bagian bawah, Anda akan melihat Memeriksa.
- Klik Memeriksa untuk melihat kode HTML dan CSS pada a panel sisi kanan.
Bagaimana Saya Membuka Elemen Inspeksi di Chrome Tanpa Mengklik Kanan?
Ada beberapa pintasan praktis untuk membuka alat Elemen Inspeksi di Google Chrome untuk Windows. Hotkeys ini adalah sebagai berikut:
- Ctrl + Menggeser + C
- Tombol fungsi F12
Tombol pintas di atas juga berfungsi di browser Mozilla untuk Windows.
Alat Inspektur Mozilla
Di browser Mozilla, prosesnya sama dengan Google Chrome. Namun, Inspektur jendela akan muncul di bagian bawah browser, bukan di sisi kanan, seperti di Google Chrome.
Alat Pemeriksaan Microsoft Edge
Anehnya, Elemen Inspeksi Microsoft Edge bekerja mirip dengan browser Google Chrome. Alat Inspeksi tersedia saat mengklik kanan. Juga, kode HTML dan CSS muncul di sisi kanan, mirip dengan Google Chrome.
Cara Memeriksa Elemen di Mac
Apakah Anda menggunakan Google Chrome, Mozilla Firefox, atau Microsoft Edge di komputer Mac Apple? Jika ya, maka Anda dapat menggunakan alat Elemen Inspeksi dengan mengikuti langkah-langkah yang disebutkan di atas di bagian Windows.
Namun, jika Anda menggunakan browser web macOS default, Safari, menggunakan alat Elemen Inspeksi adalah permainan yang rumit. Secara default, Safari tidak menampilkan Inspect Element di Mac. Inilah yang perlu Anda lakukan:
Cara Membuka Elemen Inspeksi di Mac
Pertama, Anda perlu mengaktifkan alat pengembang di Safari di Mac. Begini caranya:
- Berlari itu Peramban Safari.
- Kunjungi situs web tempat Anda ingin memeriksa elemen web.
- Pilih Safari dari bilah menu atas browser Safari.
- Klik Preferensi dari menu konteks yang terbuka.
- Di Layar preferensi, Pilih Canggih.
- Tanda centang pada Tunjukkan Berkembang menu di bagian bawah Preferensi Lanjutan layar.
Anda telah berhasil mengaktifkan alat pengembang di Safari untuk Mac. Sekarang, ikuti langkah-langkah ini untuk menggunakan Elemen Inspeksi:
- Pada setiap elemen situs web seperti teks, atau gambar, klik kanan.
- Menu konteks akan muncul. Di bagian bawah, Anda akan melihat Memeriksa elemen.
- Klik itu untuk membuka bagian debug di bawah situs web yang menampilkan HTML dan CSS kode.
Apa Kunci untuk Memeriksa Elemen?
Anda mungkin mencari pintasan untuk Inspect Element di Mac. Anda dapat menggunakan yang berikut ini:
- Memerintah + Menggeser + C
- tekan Kontrol kunci lalu pilih elemen apa pun.
- Klik trackpad dengan dua jari
Cara Memeriksa Elemen di Chromebook
Chromebook menggunakan Google Chrome sebagai browser default. Karenanya, setelah membuka situs web apa pun, cukup klik kanan untuk menemukan opsi Inspect Element di menu konteks berikut.
Jika Anda menggunakan Chromebook dari kantor atau sekolah, Anda mungkin mengajukan pertanyaan ini:
Mengapa Saya Tidak Dapat Memeriksa Chromebook Sekolah Saya?
Sebagian besar admin sekolah dan bisnis menonaktifkan fitur lanjutan di Chromebook yang mereka sediakan untuk Anda bekerja atau belajar. Karena alat pengembang adalah fitur lanjutan, kemungkinan Chromebook sekolah atau kantor Anda tidak akan menampilkan alat Elemen Inspeksi.
Cara Memeriksa Elemen di iPad/iPhone
Sayangnya, Anda tidak dapat menggunakan alat Elemen Inspeksi di iPhone atau iPad tanpa Mac.
iOS dan iPadOS memiliki Inspektur Web untuk aplikasi Safari. Namun, ini hanya berfungsi jika Anda menyambungkan perangkat seluler ke Mac tempat Anda telah mengaktifkan alat pengembang untuk Safari. Di bawah ini adalah langkah-langkah yang dapat Anda coba:
- Buka iPad/iPhone Pengaturan aplikasi.
- Klik Safari di panel navigasi sisi kiri.
- Kemudian, gulir ke bawah di sisi kanan untuk menemukan dan memilih Canggih.
- Aktifkan sakelar untuk Inspektur Web.
- Sekarang, sambungkan perangkat seluler ke Mac menggunakan USB.
- Otorisasi iPhone/iPad di Mac.
- Buka situs web apa pun di perangkat seluler di Safari.
- Sekarang, jalankan Safari di Mac dan pilih Mengembangkan di bilah menu atas.
- Di menu konteks yang terbuka, cari nama perangkat seluler Anda.
- Arahkan kursor ke perangkat seluler untuk melihat semua situs web yang terbuka.
- Sekarang, pilih situs web mana saja untuk melihat kode sumber HTML dan CSS di browser Safari Mac.
Kesimpulan
Anda telah menjelajahi semua kemungkinan cara untuk menggunakan alat Elemen Inspeksi untuk pengeditan halaman web sementara. Anda juga telah mempelajari cara memeriksa elemen untuk berbagai perangkat seperti Mac, Windows, Chromebook, iPad, dan iPhone.
Lain kali Anda perlu memodifikasi halaman web untuk bersenang-senang atau untuk kebutuhan profesional, cobalah metode ini. Anda pasti akan menyukai langkah mudah ini dibandingkan dengan metode rumit lainnya yang dijelaskan di tempat lain.
Jangan lupa untuk meninggalkan komentar di bawah jika langkah-langkah di atas membantu Anda, metode apa pun yang menurut Anda menantang, atau kiat rahasia apa pun tentang alat Elemen Inspeksi.
Butuh halaman web sebagai referensi cetak? Pelajari caranya menyimpan halaman web dengan cepat sebagai PDF Sekarang!