Cara Memakai Inspeksi Elemen Di Google Chrome
Dalam posting kali ini aku akan membahas ihwal bagaimana cara memakai inspect element pada Google Chrome. Inspeksi elemen merupakan fitur yang terdapat pada kebanyakan browser, menyerupai Google Chrome, Mozilla Firefox, UC Browser, Opera, Safari, bahkan Microsoft Edge dan Internet Explorer.
Sebelum itu akan aku jelaskan apa manfaat memakai inspeksi elemen. Untuk teman yang sedang mencar ilmu HTML, CSS & JS, atau yang sedang menciptakan tampilan sebuah halaman web, sanggup memakai inspeksi elemen untuk mengatur tampilan dan instruksi yang digunakan, hebatnya hasil dari instruksi yang dipakai sanggup eksklusif dilihat kesudahannya melalui browser serta sanggup menggantinya dengan mudah, sesudah sesuai, instruksi yang dipakai sanggup disalin dan di simpan ke web yang di inginkan.
Dalam hal ini aku akan membahas ihwal inspeksi elemen pada Google Chrome. Untuk membuka inspeksi elemen, silakan tekan CTRL + SHIFT + I atau F12 pada keyboard, atau sanggup pula dengan klik kanan pada halaman yang tampil dan pilih Inspeksi Elemen (inspect elements).
Setelah itu akan muncul tampilan yang kurang lebih menyerupai gambar dibawah. Sebagai permulaan menggunakannya contohnya kita akan mengatur tampilan tombol yang aku sediakan dibawah ini dengan CSS. Silakan klik tombol seleksi pada jendela inspeksi elemen (atau tekan CTRL + SHIFT + C) kemudian pilih/klik teks This is button! dibawah ini.
This is button!
Setelah itu tambahkan Style Rule gres dengan cara klik ikon tambah yang berada pada bab kanan. Setelah itu akan muncul style rule CSS gres untuk elemen dengan
class="ini-tombol" dengan instruksi CSS .ini-tombol {}..
Selanjutnya klik dibawah .ini-tombol untuk mulai menambahkan style.
Silakan ketik sendiri style berikut. Jangan copy-paste.
.ini-tombol { position: relative; display: block; margin: 0 auto; text-align: center; border: 1px solid #333; width: 100px; padding: 5px 0; background: #32a3cb; color: #fff; }Kemudian perhatikan pada kotak berwarna didepan instruksi warna yang teman gunakan (background dan color), klik kotak berwarna tersebut untuk mengganti warna sesuai dengan yang teman inginkan. Saat kotak color picker muncul teman juga sanggup menentukan warna lain dari halaman web dengan mengarahkan eksklusif kursor pada objek berwarna kemudian klik untuk memakai warna.
 |
| Untuk mengganti mode instruksi warna yang digunakan, klik pada kotak berwarna. |
Sobat sanggup pula menciptakan hover style, misal untuk
.ini-tombol:hover {}. Masalahnya ialah cara kerja inspeksi elemen ini ialah menampilkan instruksi yang aktif untuk objek yang dipilih, sedangkan untuk hover style hanya aktif saat kursor berada diatas objek yang di inginkan, sehingga untuk menciptakan hover style teman perlu meletakkan kursor diatas objek yang diatur dan mengklik tombol add style rule secara bersamaan. Tentu ini hal yang mustahil, jadi untuk menciptakan hover style teman sanggup menambahkan style rule .ini-tombol:hover {} kemudian klik tombol Toggle Element State dan akan muncul hover style pada jendela.
Sobat juga sanggup mengatur dimana letak jendela inspeksi elemen terletak, klik ikon option pada sudut kanan atas disamping tombol close kemudian pilih jenis tampilan yang teman inginkan.
Kemudian bila teman ingin menyalin instruksi CSS yang telah dibuat, teman sanggup klik pada
inspector-stylesheet:x dan akan tampil instruksi CSS yang telah teman buat tadi.
Mungkin cukup sekian dari saya, agar sanggup bermanfaat, kalau ada yang ingin teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.
