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.

Inspeksi elemen WordPress

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.

inpection kode blogpascher

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.

inspeksi kode HTML-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.

Aturan CSS dari elemen HTML

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.

Pengeditan kode sumber HTML

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.

tambahkan css aturan baru

Saat Anda membuat perubahan pada CSS atau kode HTML, perubahan ini akan tercermin secara instan di browser Anda.

perubahan kode hidup

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.

konsol JavaScript

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.