Cara Menggunakan Google Chrome untuk Debug CSS

Alat Inspect Element sangat bagus dalam hal men-debug halaman web Anda secara real time. Anda dapat menggunakan alat ini untuk membantu melihat pratinjau dan mengubah desain situs web. Ini juga memungkinkan Anda melakukannya tanpa perlu memuat ulang halaman, segera menampilkan perubahan CSS Anda.

Artikel ini akan membahas cara melihat kelas CSS dan gaya yang diterapkan di jendela Elemen Inspeksi. Ini juga akan mencakup bagaimana Anda dapat menggunakan ini untuk melihat perubahan yang Anda buat pada CSS Anda secara real time.

Membuka Elemen Inspeksi di Google Chrome

Anda dapat mengunjungi situs web mana pun dan membuka jendela Inspect Element untuk melihat seperti apa kode HTML atau CSS-nya. Tutorial ini akan menggunakan contoh situs web untuk menunjukkan.

Anda dapat membuka jendela Inspect Element di Google Chrome dengan menekan tombol F12 kunci. Anda juga dapat mengklik kanan di mana saja pada halaman dan mengklik Memeriksa.

Jendela Inspect Element akan terbuka ke kode HTML untuk bagian situs web tempat Anda mengklik kanan. Di sinilah Anda juga bisa

edit teks situs web menggunakan Google Chrome.

Tab Gaya di Jendela Elemen Inspeksi

Di jendela Inspect Element itu sendiri, di bawah Elemen tab, ada tempat untuk melihat kode HTML dan CSS. Anda dapat melihat kode HTML di sebelah kiri jendela Inspect Element. Anda dapat menemukan kode CSS di sebelah kanan, di bawah Gaya tab.

Katakanlah Anda memiliki elemen HTML dengan kelas yang disebut "card-padding", dengan padding kanan dan kiri yang diterapkan padanya:

.card-padding {
 padding-kanan: 0vh;
 padding-kiri: 0vh;
}

Jika Anda melihat pratinjau situs web ini di browser, Anda akan dapat memilih div elemen dengan kelas "card-padding". Gaya apa pun yang diterapkan ke kelas "pading kartu" akan ditampilkan di sebelah kanan, di bawah Gaya tab.

Saat Anda mengarahkan kursor ke elemen dalam tampilan kode HTML, bagian halaman web tersebut akan disorot di browser web. Jenis elemen HTML, bersama dengan nama kelas apa pun juga akan ditampilkan dalam kotak dialog di sebelah elemen.

Dalam hal ini, Anda akan melihat wadah div dengan nama kelas "baris", "pading kartu" dan "pb-5" disorot pada halaman.

Cara Membuat Perubahan pada CSS secara Real Time

Anda dapat mengubah CSS langsung dari tab Gaya:

1. Menggunakan situs ini, klik kanan pada judul pertama.
2. Pada heading h4 tertentu, Anda akan melihat kelas diterapkan padanya yang disebut "text-grey" dengan warna #8a8a8a.
3. Ubah warnanya menjadi sesuatu yang lain, seperti oranye. Anda hanya ingin mengubah nilainya sendiri, dan bukan nama properti, "warna".
4. Anda akan melihat perubahan heading dari abu-abu gelap menjadi oranye.
5. Jika Anda ingin menonaktifkan gaya CSS tertentu, hapus centang pada kotak di sebelah kiri gaya.
6. Anda juga dapat menambahkan lebih banyak gaya ke set asli. Klik tepat di bawah atau di sebelah kanan properti untuk mulai menambahkan properti baru. Anda harus menggunakan sintaks yang sama seperti yang Anda lakukan pada file CSS biasa saat menambahkan gaya baru.
7. Jika Anda melihat pratinjau situs web lokal, Anda dapat terus membuat perubahan CSS hingga Anda mendekati tampilan dan nuansa yang diperlukan untuk UI Anda. Setelah itu, Anda dapat menyalin perubahan CSS yang Anda buat kembali ke kode lokal Anda.

Cara Memodifikasi CSS Dari Pustaka atau Kerangka Kerja Pihak Ketiga

Anda juga dapat membuat perubahan pada elemen HTML jika Anda menggunakan pustaka atau kerangka kerja pihak ketiga seperti Bootstrap.

1. Menggunakan situs ini, klik kanan pada salah satu tombol Bootstrap di halaman.
2. Anda akan melihat dua kelas diterapkan pada tombol, "btn" dan "btn-primer". Bootstrap sudah memiliki gayanya sendiri yang diterapkan pada kedua kelas ini. Warna yang digunakan sebagai warna background dan border adalah #007bff. Ubah ini menjadi sesuatu yang lain, seperti Violet.
3. Jika Anda melihat pratinjau situs web lokal, Anda dapat menambahkan kembali perubahan baru ke kode lokal Anda. Tergantung pada urutan CSS Anda, Anda mungkin perlu gunakan pemilih CSS yang lebih spesifik. Misalnya, awali pemilih dengan ".btn". Ini akan menimpa gaya Bootstrap asli.

   .btn.btn-primer {
    warna latar: ungu;
    warna batas: ungu;
   }

Apa Arti element.style di Tab Styles?

Setiap elemen HTML yang Anda sorot di jendela Inspect Element memiliki blok element.styles. Ini sama dengan menambahkan gaya sebaris ke elemen HTML, alih-alih menargetkannya menggunakan pemilih.

1. Klik kanan pada elemen HTML. Tambahkan gaya apa pun ke bagian element.style, seperti:

   warna: asap putih;

2. Anda akan melihat bahwa kode untuk elemen HTML juga telah berubah. Kode di dalam elemen HTML sekarang memiliki baris baru:

   gaya="warna: asap putih;"

Bagaimana Elemen HTML Anak Mewarisi Gaya

Jika Anda memiliki dua nilai gaya berbeda yang diterapkan ke elemen induk dan elemen turunan, nilai dalam elemen turunan akan diprioritaskan.

1. Menggunakan situs ini, klik kanan di mana saja di tepi luar situs web.
2. Di bagian HTML jendela Inspect Element, fokuskan pada dua elemen HTML tertentu. Ada elemen div induk dengan kelas "konten" yang diterapkan padanya. Elemen HTML ini memiliki elemen turunan h4, dengan kelas "teks-abu-abu" yang diterapkan padanya.
3. Pilih elemen HTML h4 anak, dan nonaktifkan gaya warna di kelas "teks-abu-abu".
4. Pilih Elemen HTML induk dengan kelas "konten". Tambahkan gaya CSS berikut ke kelas:

   warna merah;

   Semua teks dalam div induk akan berubah menjadi merah. Perubahan ini juga akan mengalir ke elemen anak, yang berarti h4 juga akan memiliki warna merah.
5. Pilih elemen HTML h4 anak, dan tambahkan gaya baru ke kelas "teks-abu-abu":

   warna: hijau;

   Ini akan menimpa gaya kelas induk mana pun. Elemen HTML h4 akan berubah dari merah menjadi hijau.
6. Anda juga akan melihat coretan jika Anda melihat gaya untuk kelas "konten". Ini menegaskan bahwa elemen anak h4 menggantikan warna induknya.

Manfaat Men-debug CSS Anda di Browser

Men-debug CSS di browser Anda dapat menghemat banyak waktu dan mempercepat alur kerja pengkodean Anda. Ini terutama benar jika Anda perlu melihat bagaimana perubahan CSS baru Anda memengaruhi UI di situs web Anda secara real time.

Anda dapat menggunakan teknik ini alih-alih membuat perubahan pada kode lokal dan memuat ulang aplikasi Anda. Ini akan menyelamatkan Anda dari menebak nilai CSS apa yang akan berfungsi, karena Anda sekarang dapat melihat perubahan UI saat Anda membuatnya.

Anda dapat membuat perubahan pada jendela Inspect Element sampai Anda mendekati desain yang Anda inginkan. Setelah Anda memilikinya, Anda dapat menyalin kode dari jendela Inspect Element, kembali ke kode lokal Anda. Anda masih dapat menjalankan kembali aplikasi Anda untuk menguji apakah perubahan CSS baru Anda masih berfungsi.

Tutorial ini membahas dasar-dasar cara men-debug CSS situs web menggunakan jendela Inspect Element, termasuk di mana menemukan CSS di tab Styles.

Itu juga mencakup cara membuat perubahan pada CSS dan melihat perubahan visual pada UI secara real time. Semoga, Anda juga memahami cara membuat perubahan saat CSS menggunakan perpustakaan pihak ketiga, dan cara kerja pewarisan gaya.

Ada banyak hal menarik lainnya yang dapat Anda lakukan dengan jendela Inspect Element.

7 Hal Menyenangkan yang Dapat Anda Lakukan Dengan Elemen Inspeksi

Baca Selanjutnya

Tentang Penulis