Cara Menggunakan Inspeksi Elemen di Google Chrome

Cara Menggunakan Inspeksi Elemen di Google Chrome

Apa itu inspect elements?

Google Chrome, salah satu aplikasi untuk melakukan browsing internet yang sangat populer. Aplikasi ini mempunyai tampilan yang sederhana dan minimalis bagi penggunanya. Selain itu yang membuatnya menjadi pilihan kebanyakan orang adalah karena Google Chrome cukup ringan dalam pengoperasiannya.

Namun meskipun demikian, Google Chrome telah dibekali dengan berbagai fitur yang membuatnya bukan hanya sekadar browser. Salah satu yang mungkin masih jarang diketahui adalah adanya fitur Inspect Elements. Fitur inspeksi elemen ini berfungsi untuk menampilkan source code sebuah halaman situs yang dibuka melalui Google Chrome.

Fitur inspeksi elemen ini sebenarnya sudah ada di sebagian besar aplikasi browser lain di PC seperti, Mozilla Firefox, UC Browser, Opera, Safari, bahkan Microsoft Edge dan Internet Explorer juga telah dilengkapi dengan fitur tersebut.

Apa gunanya inspect elements?

Dengan menggunakan inspect elements, pengguna dapat melihat sintaks HTML, CSS, bahkan Javascript yang dimuat oleh sebuah situs web. Namun fitur ini hanya terdapat pada browser untuk perangkat PC, tidak pada browser smartphone.

Selain itu inspect elements juga merupakan salah satu cara yang sering digunakan untuk belajar HTML, CSS, ataupun Javascript. Sebab dengan inspeksi elemen memungkinkan kita untuk melihat tampilan dan hasil dari sebuah kode dengan mudah secara langsung melalui browser. Atau bisa dibilang sebagai bahan simulasi dalam pembuatan web.

Dengan inspeksi elemen pula kita dapat memperoleh informasi tertentu dari sebuah halaman situs yang kadang disembunyikan. Misal untuk mengetahui link sebuah gambar (yang tidak bisa dibuka dengan klik kanan), untuk mengetahui kode warna yang digunakan sebuah situs, atau bahkan mengetahui font apa yang digunakannya.

Inspect elements juga memungkinkan kita untuk memodifikasi tampilan sebuah web dengan mengubah susunan kode HTML maupun kode CSS nya. Namun segala bentuk perubahan yang diakibatkan oleh inspeksi elemen hanya bersifat lokal. Perubahan tersebut tidak akan terlihat oleh orang lain, hanya berpengaruh pada komputer itu saja dan pada browser itu saja.

Inspeksi elemen yang paling sering digunakan dalam blog ini adalah inspeksi elemen dari Google Chrome. Selain karena ringan juga fiturnya lengkap dengan cara penggunaan yang mudah dimengerti bahkan untuk pemula.

Inspect elements di Google Chrome

Membuka inspect elements

Untuk membuka inspeksi elemen di Google Chrome, ada beberapa cara yang bisa kamu gunakan. Sebagai contoh kamu bisa buka inspeksi elemen dari halaman ini. Silakan pilih salah satu cara di bawah:
  1. Tekan CTRL + SHIFT + I di keyboard;
  2. Tekan F12 pada keyboard; atau
  3. Klik kanan pada halaman web lalu pilih Inspeksi

Cara Menggunakan Inspeksi Elemen di Google Chrome

Menambahkan style CSS

Setelah jendela inspect elements terbuka (biasanya melekat di sisi samping atau bawah dari halaman web), kamu akan melihat susunan kode HTML dari situs ini. Sebagai contoh pula, agar kamu lebih mengerti tentang cara kerja inspect elements saya akan menyediakan sebuah tag div khusus di bawah dengan nama kelas ini-tombol.

This is button!

Pertama-tama kamu perlu klik tombol seleksi (tombol bergambar kursor yang ada kotaknya di bagian paling atas-kiri dari jendela inspeksi elemen). Atau kamu bisa menggunakan CTRL + SHIFT + C lalu arahkan kursor ke tulisan This is button! di atas hingga tampilannya seperti sedang diblok berwarna biru.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Sebelum melanjutkan kamu bisa copy kode CSS di bawah ini, atau kamu bisa mengetiknya secara manual nanti.

position: relative;
display: block;
margin: 0 auto;
border: 1px solid #1d80a2;
width: fit-content;
padding: .5rem 1rem;
background: #32a3cb;
color: #fff;
cursor: pointer;
transition: .3s all;

Setelah itu tambahkan Style Rule baru dengan cara klik ikon tambah yang berada pada bagian kanan jendela style. Setelah itu akan muncul style rule CSS baru untuk elemen dengan kode CSS .ini-tombol {}.
. Tambahkan kode CSS di atas pada style rule tersebut.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Kemudian perhatikan perubahan yang terjadi pada teks "This is button!" di atas. Teks tersebut akan berubah menjadi tombol. Selain itu kamu bisa memodifikasi teks tersebut sesuai keinginan kamu, misalnya untuk mengganti warnanya kamu bisa memanfaatkan fitur color picker dengan cara klik kotak berwarna yang ada di depan kode warna background atau color. Lalu jiplak warna yang kamu inginkan.

Mengatur style CSS:hover

Kamu juga bisa mengatur hover style untuk tombol tersebut. Hover style merupakan perubahan gaya yang terjadi pada tombol ketika kursor melintas di atasnya. Untuk menambahkan hover style kamu perlu seleksi kembali tombol tadi seperti cara di atas, lalu menambahkan style rula dengan cara yang sama pula.

Terlebih dahulu kamu bisa menyalin kode CSS di bawah ini, atau bisa kamu ketik langsung nantinya.

background: #80DEEA;
color: #333;

Kemudian tambahkan :hover di bagian terakhir dari nama kelas tersebut. Dan jadinya .ini-tombol:hover{}. Lalu tekan Enter.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Lalu tambahkan kode CSS tadi pada hover style tersebut. Kemudian lihat hasilnya saat kamu mengarahkan kursor di atas tombol tadi.

Untuk memudahkan mengatur hover style, kamu bisa mengaktifkan Toogle Element State, centang bagian hover dan lihat hasilnya di bagian bawah akan muncul style rule yang telah dibuat untuk hover style.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Menyalin hasil kode CSS

Setelah mengatur style rule menggunakan kode CSS, kamu bisa mengambil kode CSS tersebut untuk digunakan. Cara mendapatkan hasil akhirnya secara keseluruhan yaitu dengan klik tulisan inspector-stylesheet di bagian atas salah satu style CSS yang kamu buat. Dan salin seluruh kode CSS yang ada.

Cara Menggunakan Inspeksi Elemen di Google Chrome

Penutup

Itulah cara yang bisa kamu lakukan untuk menggunakan fitur inspeksi elemen di Google Chrome. Cara yang sama berlaku pada enspeksi elemen dari browser lain, hanya saja letak serta nama menu dan tombolnya yang mungkin berbeda. Jangan lupa sampaikan komentar terbaik kamu di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel