Apa itu inspect elements?
Google Chrome, salah satu aplikasi untuk melaksanakan browsing internet yang sangat populer. Aplikasi ini memiliki tampilan yang sederhana dan minimalis bagi penggunanya. Selain itu yang membuatnya menjadi pilihan kebanyakan orang ialah alasannya ialah Google Chrome cukup ringan dalam pengoperasiannya.Namun meskipun demikian, Google Chrome telah dibekali dengan banyak sekali fitur yang membuatnya bukan hanya sekadar browser. Salah satu yang mungkin masih jarang diketahui ialah 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 bekerjsama 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 memakai inspect elements, pengguna sanggup 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 dipakai untuk berguru HTML, CSS, ataupun Javascript. Sebab dengan inspeksi elemen memungkinkan kita untuk melihat tampilan dan hasil dari sebuah arahan dengan gampang secara pribadi melalui browser. Atau sanggup dibilang sebagai materi simulasi dalam pembuatan web.
Dengan inspeksi elemen pula kita sanggup memperoleh warta tertentu dari sebuah halaman situs yang kadang disembunyikan. Misal untuk mengetahui link sebuah gambar (yang tidak sanggup dibuka dengan klik kanan), untuk mengetahui arahan warna yang dipakai sebuah situs, atau bahkan mengetahui font apa yang digunakannya.
Inspect elements juga memungkinkan kita untuk memodifikasi tampilan sebuah web dengan mengubah susunan arahan HTML maupun arahan CSS nya. Namun segala bentuk perubahan yang diakibatkan oleh inspeksi elemen hanya bersifat lokal. Perubahan tersebut tidak akan terlihat oleh orang lain, hanya kuat pada komputer itu saja dan pada browser itu saja.
Inspeksi elemen yang paling sering dipakai dalam blog ini ialah inspeksi elemen dari Google Chrome. Selain alasannya ialah ringan juga fiturnya lengkap dengan cara penggunaan yang gampang dimengerti bahkan untuk pemula.
Inspect elements di Google Chrome
Membuka inspect elements
Untuk membuka inspeksi elemen di Google Chrome, ada beberapa cara yang sanggup kau gunakan. Sebagai referensi kau sanggup buka inspeksi elemen dari halaman ini. Silakan pilih salah satu cara di bawah:- Tekan CTRL + SHIFT + I di keyboard;
- Tekan F12 pada keyboard; atau
- Klik kanan pada halaman web kemudian pilih
Inspeksi
Menambahkan style CSS
Setelah jendela inspect elements terbuka (biasanya menempel di sisi samping atau bawah dari halaman web), kau akan melihat susunan arahan HTML dari situs ini. Sebagai referensi pula, semoga kau lebih mengerti ihwal cara kerja inspect elements saya akan menyediakan sebuah tag div khusus di bawah dengan nama kelasini-tombol.This is button!
Pertama-tama kau perlu klik tombol seleksi (tombol bergambar kursor yang ada kotaknya di pecahan paling atas-kiri dari jendela inspeksi elemen). Atau kau sanggup memakai
CTRL + SHIFT + C kemudian arahkan kursor ke goresan pena This is button! di atas hingga tampilannya ibarat sedang diblok berwarna biru.
Sebelum melanjutkan kau sanggup copy arahan CSS di bawah ini, atau kau sanggup 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 gres dengan cara klik ikon tambah yang berada pada pecahan kanan jendela style. Setelah itu akan muncul style rule CSS gres untuk elemen dengan arahan CSS
.ini-tombol {}.. Tambahkan arahan CSS di atas pada style rule tersebut.
Kemudian perhatikan perubahan yang terjadi pada teks "This is button!" di atas. Teks tersebut akan bermetamorfosis tombol. Selain itu kau sanggup memodifikasi teks tersebut sesuai impian kamu, contohnya untuk mengganti warnanya kau sanggup memanfaatkan fitur color picker dengan cara klik kotak berwarna yang ada di depan arahan warna
background atau color. Lalu jiplak warna yang kau inginkan.Mengatur style CSS:hover
Kamu juga sanggup mengatur hover style untuk tombol tersebut. Hover style merupakan perubahan gaya yang terjadi pada tombol ketika kursor melintas di atasnya. Untuk menambahkan hover style kau perlu seleksi kembali tombol tadi ibarat cara di atas, kemudian menambahkan style rula dengan cara yang sama pula.Terlebih dahulu kau sanggup menyalin arahan CSS di bawah ini, atau sanggup kau ketik pribadi nantinya.
background: #80DEEA; color: #333;
Kemudian tambahkan
:hover di pecahan terakhir dari nama kelas tersebut. Dan jadinya .ini-tombol:hover{}. Lalu tekan Enter.
Lalu tambahkan arahan CSS tadi pada hover style tersebut. Kemudian lihat hasilnya dikala kau mengarahkan kursor di atas tombol tadi.
Untuk memudahkan mengatur hover style, kau sanggup mengaktifkan Toogle Element State, centang pecahan hover dan lihat hasilnya di pecahan bawah akan muncul style rule yang telah dibentuk untuk hover style.
Menyalin hasil arahan CSS
Setelah mengatur style rule memakai arahan CSS, kau sanggup mengambil arahan CSS tersebut untuk digunakan. Cara mendapat hasil kesannya secara keseluruhan yaitu dengan klik goresan penainspector-stylesheet di pecahan atas salah satu style CSS yang kau buat. Dan salin seluruh arahan CSS yang ada.
Penutup
Itulah cara yang sanggup kau lakukan untuk memakai fitur inspeksi elemen di Google Chrome. Cara yang sama berlaku pada enspeksi elemen dari browser lain, hanya saja letak serta nama sajian dan tombolnya yang mungkin berbeda. Jangan lupa sampaikan komentar terbaik kau di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan hingga jumpa! Sumber http://www.maringngerrang.com/Buat lebih berguna, kongsi: