Cara Memeriksa Situs Web dengan Benar

Apakah Anda seorang pengembang yang menguji fitur baru pada sebuah proyek atau seorang desainer yang ingin melihat lebih dekat kode HTML dan CSS, ada banyak alasan untuk memeriksa situs web dan elemennya. Namun, mengetahui dari mana harus memulai mungkin tampak membingungkan (pada awalnya).

Untungnya, Anda dapat menggunakan berbagai alat, teknik, dan trik sederhana untuk memeriksa elemen web dengan benar. Plus, ada opsi untuk hampir setiap browser dan Sistem Operasi (OS).

Dalam posting ini, kami akan membahas mengapa Anda mungkin ingin memeriksa situs web. Kemudian kami akan memandu Anda melalui beberapa alat terbaik yang dapat Anda gunakan sebelum menjelaskan apa yang harus dicari. Ayo lompat!

Mengapa Anda Harus Memeriksa Situs Web

Ada beberapa alasan mengapa Anda mungkin ingin memeriksa situs web. Misalnya, Anda mungkin perlu memecahkan masalah atau menemukan informasi tertentu.

Memeriksa elemen web di browser memungkinkan pengembang, perancang, dan pemasar digital WordPress memanipulasi tampilan halaman web dan menguji perubahan. Pengembang atau penguji lebih cenderung menggunakan fitur ini untuk men-debug elemen tertentu, melakukan pengujian tata letak, atau melakukan pengeditan CSS langsung.

Memeriksa elemen web juga bermanfaat bagi desainer web. Jika Anda ingin menguji perubahan warna atau font baru dengan cepat, Anda dapat melakukannya tanpa menggali kode CSS Anda.

Selain itu, pemasar digital dapat menggunakan alat Elemen Inspeksi untuk melihat bagaimana perubahan tertentu akan memengaruhi keseluruhan tampilan dan nuansa halaman web. Misalnya, Anda mungkin ingin mencoba tombol Ajakan Bertindak (CTA) baru atau skema warna yang berbeda. Anda dapat menggunakan alat untuk mereplikasi pembaruan tanpa melakukan perubahan apa pun pada situs langsung Anda.

Terakhir, memeriksa situs web bisa menjadi cara terbaik untuk mempelajari tentang bagaimana situs web dibuat dan berfungsi. Jika Anda tertarik mempelajari lebih lanjut tentang pengembangan web, memeriksa situs adalah cara terbaik untuk memulai.

Alat dan Ekstensi Terbaik untuk Memeriksa Situs Web

Ada sejumlah alat dan ekstensi berbeda yang dapat Anda gunakan untuk memeriksa situs web. Berikut adalah beberapa opsi paling populer!

Memeriksa elemen

Alat Inspeksi Elemen adalah opsi yang paling umum. Ini memungkinkan Anda melihat lebih dekat pada kode HTML dan CSS yang membentuk halaman web. Anda juga dapat menggunakannya untuk mengedit langsung CSS dan melihat bagaimana perubahan Anda akan terlihat tanpa membuat perubahan permanen.

Meskipun tersedia sebagai ekstensi Google Chrome, alat Elemen Inspeksi juga hadir dengan semua browser utama. Fitur tersebut merupakan bagian dari Alat Pengembang Chrome, sekumpulan program yang memungkinkan Anda memeriksa dan mengedit kode HTML dan CSS laman web.

Untuk mengakses Alat Pengembang Google Chrome, cukup tekan Ctrl+Shift+I (atau Cmd+Opt+I di Mac). Anda juga dapat mengakses alat dengan membuka menu Chrome dan memilih Alat lainnya > Alat pengembang :

Anda dapat mengakses alat pengembang yang sama di browser lain. Misalnya, Alat Pengembang Firefox memiliki fitur serupa. Untuk mengakses alat, cukup tekan Ctrl+Shift+I (atau Cmd+Opt+I di Mac). Anda juga dapat menemukan alat tersebut dengan membuka menu Firefox dan memilih Pengembang Web > Inspektur.

Selain itu, Alat Pengembang Safari memungkinkan Anda memeriksa dan mengedit kode HTML dan CSS halaman web di perangkat Mac. Cukup tekan Cmd+Opt+I . Anda juga dapat membuka menu Safari dan memilih Preferences > Advanced > Show Develop menu di menu bar .

BrowserStack

Platform lain yang dapat Anda gunakan untuk menguji situs web adalah BrowserStack:

Platform pengujian berbasis cloud ini berfungsi dengan semua browser dan perangkat utama. Setelah mendaftar untuk uji coba gratis, Anda dapat membuka dasbor Live dan memilih OS Anda.

Kemudian, Anda dapat memilih versi browser pilihan Anda untuk meluncurkan sesi Live di browser Anda. Terakhir, Anda dapat menavigasi situs web yang ingin Anda periksa seperti yang Anda lakukan melalui Inspect Element.

Cara Memeriksa Situs Web

Mari kita lihat bagaimana Anda dapat memeriksa situs web menggunakan alat Elemen Inspeksi. Mulailah dengan mengklik kanan elemen halaman web mana saja dan memilih Inspeksi dari menu konteks:

Ini akan membuka alat Elemen Inspeksi di browser Anda. Setelah alat ini terbuka, Anda dapat mulai memanipulasi kode HTML dan CSS untuk melihat pengaruhnya terhadap tampilan halaman web.

Misalnya, Anda dapat mengubah warna elemen, menambah atau menghapus kelas, atau bahkan mengubah posisi elemen. Anda juga dapat menggunakan kolom pencarian di bagian atas untuk mencari potongan teks atau gambar.

Tentu saja, setiap perubahan yang Anda lakukan menggunakan Inspect Element hanya bersifat sementara. Mereka tidak akan disimpan saat Anda menyegarkan halaman atau menutup browser. Namun, ini adalah cara yang bagus untuk menguji bagaimana perubahan spesifik akan terlihat tanpa mengubah situs web Anda secara permanen.

Anda juga dapat mengakses alat ini dengan menekan Ctrl+Shift+I (atau Cmd+Opt+I di Mac) untuk membuka Alat pengembang . Kemudian, klik tab Elemen di bagian atas jendela:

Terakhir, Anda juga dapat mengakses Inspect Element dengan membuka menu Chrome dan memilih More tools > Developer tools , yang telah kita bahas sebelumnya.

Cara Mengubah Elemen

Jika Anda ingin mengubah elemen di halaman web, klik kanan elemen tersebut dan pilih Inspect . Di panel Elemen yang terbuka, temukan bagian yang ingin Anda ubah dan klik dua kali.

Saat Anda membuka kotak Elemen , Anda dapat menggunakan ikon Inspeksi kursor di kiri atas panel untuk menyorot kode sumber elemen yang ingin Anda ubah. Saat Anda mengklik kanan pada kode yang disorot, pilih Edit as HTML :

Kotak akan mengembang, lalu Anda dapat mengubah teksnya. Untuk mempratinjau perubahan, Anda dapat membatalkan pilihan elemen. Anda juga dapat mengklik dua kali pada teks untuk mengeditnya.

Anda juga dapat menggunakan teknik ini untuk mengubah kode CSS untuk suatu elemen. Untuk melakukan ini, klik kanan padanya dan pilih Periksa . Di panel elemen, temukan elemen yang ingin Anda ubah dan pilih properti element.style . Kemudian Anda dapat menambahkan kode atau deklarasi Anda dalam tanda kurung kurawal.

Cara Menyembunyikan atau Menghapus Elemen

Anda mungkin juga ingin menyembunyikan atau menghapus elemen di halaman web. Setelah Anda menemukan elemen yang ingin Anda sembunyikan atau hapus, klik kanan padanya dan pilih Periksa untuk meluncurkan alat Elemen Inspeksi.

Dari sini, klik kanan pada elemen, lalu pilih opsi Hapus elemen atau Sembunyikan elemen :

Tombol Hapus menghapus elemen Model Objek Dokumen (DOM). Tombol Sembunyikan hanya akan menyembunyikan elemen, tetapi masih ada di DOM.

Cara Memeriksa Kelas CSS

Ada beberapa cara untuk memeriksa kelas CSS. Namun, metode termudah adalah klik kanan pada elemen yang ingin Anda tinjau dan pilih Inspect . Kemudian buka tab Gaya untuk melihat gaya CSS-nya:

Perhatikan bahwa tab ini hanya menampilkan gaya sebaris yang diterapkan dan bukan gaya yang berasal dari lembar gaya.

Jika Anda ingin melihat semua gaya CSS yang diterapkan pada suatu elemen, Anda dapat menggunakan tab Computed . Ini menunjukkan kepada Anda semua gaya CSS yang diterapkan ke suatu elemen, termasuk dari lembar gaya:

Saat Anda selesai memeriksa halaman web, cukup tutup alat Elemen Inspeksi. Perubahan Anda tidak akan disimpan, jadi Anda tidak perlu khawatir akan merusak sesuatu secara tidak sengaja.

Yang Harus Diperhatikan Saat Memeriksa Situs Web

Apapun metode yang Anda gunakan untuk mengakses Inspect Element, Anda akan melihat antarmuka yang sama. Ini terdiri dari dua panel: panel HTML dan panel CSS.

Panel HTML menampilkan struktur halaman web. Anda dapat melihat bagaimana berbagai elemen bersarang dan terkait.

Panel CSS menampilkan gaya yang diterapkan ke elemen yang dipilih. Anda juga dapat mengedit aturan CSS untuk melihat bagaimana perubahan Anda akan memengaruhi tampilan elemen.

Jika Anda mencari sesuatu yang spesifik di situs web, baik teks atau gambar tertentu, Anda dapat menggunakan Inspect Element untuk membantu menemukannya. Ini memiliki bidang pencarian tempat Anda dapat mencari elemen tertentu.

Saat Anda memeriksa situs web, ada beberapa hal yang perlu diingat:

• HTML: Kode yang mendefinisikan struktur halaman web. Perhatikan cara elemen diatur dan bagaimana mereka berinteraksi satu sama lain.
• CSS: Kode yang menentukan gaya halaman web.
• JavaScript : Kode yang menentukan perilaku halaman web. Ini memengaruhi cara elemen berinteraksi dan cara halaman merespons input pengguna.
• Desain : Keseluruhan tampilan dan nuansa situs web. Ini memengaruhi seberapa ramah pengguna tata letak dan seberapa cocoknya dengan tujuan situs web.
• Konten: Teks situs web, gambar, dan media lainnya.

Apa yang harus Anda cari saat memeriksa situs web akan bergantung terutama pada apakah Anda seorang desainer, pengembang, atau pemasar digital. Seperti yang telah kita bahas sebelumnya, alat Elemen Inspeksi dapat membantu Anda dalam segala hal mulai dari pengujian desain hingga pemecahan masalah.

Kesimpulan

Inspect Element adalah fitur berharga bagi desainer dan pengembang. Anda dapat menggunakannya untuk melihat dan mengedit HTML dan CSS halaman web. Alat ini dapat berguna saat Anda ingin membuat perubahan pada halaman web yang sedang Anda kerjakan atau melihat cara kodenya.

Elemen Inspeksi tersedia di sebagian besar browser web. Anda dapat mengaksesnya dengan mengklik kanan halaman web dan memilih Inspeksi dari menu. Setelah Anda membuka jendela Inspeksi , Anda akan melihat kode HTML dan CSS untuk halaman web tersebut dan dapat membuat berbagai perubahan.

Apakah Anda memerlukan bantuan dengan manajemen atau pengoptimalan situs web Anda? Pelajari bagaimana WP Engine dapat membantu segala hal mulai dari hosting WordPress hingga manajemen situs dan klien!