Friday, March 10, 2017

Cara Menggunakan Inspeksi Elemen di Google Chrome

Cara Menggunakan Inspeksi Elemen di Google Chrome

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang bagaimana cara menggunakan inspect element pada Google Chrome. Inspeksi elemen merupakan fitur yang terdapat pada kebanyakan browser, seperti Google Chrome, Mozilla Firefox, UC Browser, Opera, Safari, bahkan Microsoft Edge dan Internet Explorer.

Sebelum itu akan saya jelaskan apa manfaat menggunakan inspeksi elemen. Untuk sobat yang sedang belajar HTML, CSS & JS, atau yang sedang membuat tampilan sebuah halaman web, dapat menggunakan inspeksi elemen untuk mengatur tampilan dan kode yang digunakan, hebatnya hasil dari kode yang digunakan dapat langsung dilihat hasilnya melalui browser serta dapat menggantinya dengan mudah, setelah sesuai, kode yang digunakan dapat disalin dan di simpan ke web yang di inginkan.

Dalam hal ini saya akan membahas tentang inspeksi elemen pada Google Chrome. Untuk membuka inspeksi elemen, silakan tekan CTRL + SHIFT + I atau F12 pada keyboard, atau bisa pula dengan klik kanan pada halaman yang tampil dan pilih Inspeksi Elemen (inspect elements).

Cara Menggunakan Inspeksi Elemen di Google Chrome

Setelah itu akan muncul tampilan yang kurang lebih seperti gambar dibawah. Sebagai permulaan menggunakannya misalnya kita akan mengatur tampilan tombol yang saya sediakan dibawah ini dengan CSS. Silakan klik tombol seleksi pada jendela inspeksi elemen (atau tekan CTRL + SHIFT + C) lalu pilih/klik teks This is button! dibawah ini.

This is button!

Cara Menggunakan Inspeksi Elemen di Google Chrome

Setelah itu tambahkan Style Rule baru dengan cara klik ikon tambah yang berada pada bagian kanan. Setelah itu akan muncul style rule CSS baru untuk elemen dengan class="ini-tombol" dengan kode CSS .ini-tombol {}.
.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Selanjutnya klik dibawah .ini-tombol untuk mulai menambahkan style.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Cara Menggunakan Inspeksi Elemen di Google Chrome

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 kode warna yang sobat gunakan (background dan color), klik kotak berwarna tersebut untuk mengganti warna sesuai dengan yang sobat inginkan. Saat kotak color picker muncul sobat juga bisa memilih warna lain dari halaman web dengan mengarahkan langsung kursor pada objek berwarna lalu klik untuk menggunakan warna.

Cara Menggunakan Inspeksi Elemen di Google Chrome
Untuk mengganti mode kode warna yang digunakan, klik pada kotak berwarna.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Sobat bisa pula membuat hover style, misal untuk .ini-tombol:hover {}. Masalahnya adalah cara kerja inspeksi elemen ini adalah menampilkan kode yang aktif untuk objek yang dipilih, sedangkan untuk hover style hanya aktif ketika kursor berada diatas objek yang di inginkan, sehingga untuk membuat hover style sobat perlu meletakkan kursor diatas objek yang diatur dan mengklik tombol add style rule secara bersamaan. Tentu ini hal yang mustahil, jadi untuk membuat hover style sobat bisa menambahkan style rule .ini-tombol:hover {} kemudian klik tombol Toggle Element State dan akan muncul hover style pada jendela.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Sobat juga dapat mengatur dimana letak jendela inspeksi elemen terletak, klik ikon option pada sudut kanan atas disamping tombol close kemudian pilih jenis tampilan yang sobat inginkan.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Kemudian jika sobat ingin menyalin kode CSS yang telah dibuat, sobat bisa klik pada inspector-stylesheet:x dan akan tampil kode CSS yang telah sobat buat tadi.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comments