Pernahkah Anda ingin mengubah sementara halaman web untuk melihat tampilannya dengan warna, font, gaya tertentu? Ini dimungkinkan dengan alat yang sudah ada di browser Anda bernama " Periksa elemen ". Ini adalah mimpi yang menjadi kenyataan bagi semua pengguna yang suka memanipulasi CSS.
Dalam tutorial ini, kami akan memandu Anda melalui dasar-dasar pemeriksaan item dan cara menggunakannya dengan situs WordPress Anda.
Apa itu alat inspeksi barang?
Browser modern seperti Google Chrome dan Mozilla Firefox telah membangun alat yang memungkinkan pengembang web untuk men-debug kesalahan. Alat-alat ini menampilkan HTML, CSS, dan JavaScript untuk halaman dan menunjukkan bagaimana kode berjalan.
Penggunaan alat " memeriksa Element Anda dapat mengedit kode HTML, CSS, atau JavaScript untuk halaman web apa pun dan melihat perubahan Anda secara langsung (hanya pada komputer Anda).
Untuk pemilik situs jaringan, alat ini dapat membantu Anda melihat pratinjau tampilan gaya tertentu tanpa benar-benar menerapkan perubahan untuk semua orang.
Bagi penulis, alat ini luar biasa karena Anda dapat dengan mudah mengubah informasi identitas pribadi saat mengambil tangkapan layar sehingga tidak perlu benar-benar mengaburkan elemen.
Untuk agen dukungan, ini adalah cara terbaik untuk mengidentifikasi kesalahan yang dapat menyebabkan galeri Anda tidak memuat atau mencegahnya bekerja dengan semestinya.
Kami hanya menggores permukaan kasus penggunaan, karena alat " Periksa elemen Sangat kuat.
Dalam artikel ini, kami akan fokus pada alat " Periksa elemen Dari Google Chrome, karena itu browser pilihan kami. Firefox memiliki alat pengembangannya sendiri yang juga dapat dijalankan dengan memilih menu " memeriksa elemen '.
Peluncuran fitur "Inspect element" dan pelokalan kode
Anda dapat menjalankan tool ini dengan menekan CTRL + Shift + I di keyboard Anda. Alternatifnya, Anda dapat mengklik di mana saja di halaman web lalu memilih Periksa item menu browser.
Jendela browser Anda akan terbagi dua, dan jendela bagian bawah akan menunjukkan kode sumber halaman web.
Jendela alat pengembang dibagi lagi menjadi dua jendela. Di sebelah kiri Anda, Anda akan melihat kode HTML untuk halaman tersebut. Di panel kanan, Anda akan melihat aturan CSS.
Saat Anda menggerakkan mouse ke sumber kode HTML, Anda akan melihat area yang disorot disorot di halaman web. Anda juga akan melihat aturan CSS untuk elemen ini.
Anda juga dapat mengambil penunjuk mouse di atas item di halaman web, klik kanan dan pilih " periksa elemen ". Item yang Anda klik akan disorot di kode sumber.
Pengembang Kode dan Debugger Pengembang
HTML dan CSS di jendela pemeriksaan elemen dapat diedit. Anda dapat mengklik dua kali pada kode sumber HTML dan mengedit kode sesuka Anda.
Anda juga dapat mengklik dua kali dan mengedit atribut gaya di panel CSS. Untuk menambahkan aturan, klik ikon plus di panel gaya di bagian atas.
Saat Anda membuat perubahan pada CSS atau kode HTML, perubahan ini akan tercermin secara instan di browser Anda.
Perhatikan bahwa tidak semua perubahan yang dilakukan di sini disimpan di mana saja. Alat itu Periksa elemen Adalah alat debugging, dan itu tidak menyimpan perubahan Anda ke file di server Anda. Ini berarti bahwa jika Anda me-refresh halaman, semua perubahan Anda akan hilang.
Untuk benar-benar membuat perubahan, Anda harus memodifikasi gaya tema WordPress atau template untuk menambahkan perubahan yang ingin Anda simpan.
Sebelum Anda mulai mengedit tema WordPress yang ada dengan menggunakan alat" Periksa elemen Pastikan untuk menyimpan semua perubahan Anda dengan membuat tema anak.
Bagaimana menemukan kesalahan pada WordPress
Alat itu Periksa elemen Memiliki daerah yang disebut " konsul Yang menunjukkan semua kesalahan yang ada di situs Anda. Sebelum mencoba men-debug kesalahan atau meminta bantuan dari penulis tema atau plugin, selalu ada baiknya mencari di sini untuk melihat apa yang salah.
Misalnya, jika Anda seorang pelanggan OptinMonster Siapa yang bertanya-tanya mengapa optin-nya tidak memuat, maka Anda dapat dengan mudah menemukan masalah yang menunjukkan bahwa " siput halaman Anda tidak cocok '.
Jika bilah berbagi Anda tidak berfungsi dengan benar maka Anda dapat melihat bahwa ada kesalahan JavaScript yang menyebabkannya.
Itu saja untuk tutorial ini, saya harap Anda dapat menyesuaikan Anda dengan lebih baik blog WordPress. Jangan ragu untuk membagikan tutorial ini kepada teman-teman Anda.