Apakah bizzie tahu bahwa sebenarnya, saat ini sudah ada alat canggih yang bersembunyi di browser yang bernama Inspect Element tool?
Apabila misalnya bizzie tertarik untuk menjadi seorang web developer, maka pasti bizzie sudah pernah dengar inspect element tool ini bukan. Namun jika bizzie belum pernah mendengar tentang alat ini sebelumnya, dan seperti apa cara inspect element ini, berikut penjelasannya.
Apa Itu Inspect Element Tool?
Saat bizzie membuka halaman website, maka sebenarnya ada banyak hal yang tidak bisa bizze lihat secara langsung. Alat inspect element inilah yang sangat berguna untuk bisa melihat kumpulan kode yang membentuk tampilan dalam sebuah situs.
Pada umumnya, inspect element ini merupakan salah satu fitur developers tool di browser bizzie yang mana akan memudahkan bizzie semua untuk mengubah tampilan sebuah website dari browser. Tool ini sendiri pun digunakan untuk mengubah tampilan dan konten sebuah website dengan cara mengedit file CSS dan HTML di halaman website tersebut.
Perubahan yang bisa dilakukan oleh inspect element ini pun juga hanya bersifat sementara. Jadi, dalam hal ini bizzie tidak perlu khawatir akan merusak desain dan konten dari website tersebut saat menggunakan alat ini. Lalu seperti apa cara inspect element ini?
Menilik Cara Inspect Element di Chrome dengan Developer Tools
Jadi, sebelum membahas cara inspect element di Chrome, perlu bizzie ketahui mengenai Developer Tools. Dimana ini merupakan sebuah panel yang dilengkapi dengan Inspect Tool, dan terdiri dari 3 bagian utama:
· Panel Elements atau Document Object Model (DOM), dimana panel ini memuat struktur DOM halaman juga akan menyediakan akses ke kode source HTML. Bagian ini ada terdapat di taskbar atas Chrome Developer Tools.
· Panel CSS, yang mana di sini, bizzie bisa mengubah, menambah, serta menghapus properti CSS untuk bisa mengubah aturan gaya halaman web. Panel CSS ini pun berada di bagian tengah Developer Tools, di bawah Styles
· Console yaitu yang akan menampilkan pesan yang mana sudah ercatat dalam log serta akan menjalankan kode JavaScript. Untuk bagian ini maka akan muncul di taskbar tombol Developer Tools.
Sementraa untuk cara inspect element di Google Chrome, yaitu dengna cara ini:
· Pertama silahkan buka sebuah website di Google Chrome.
· Selanjutnya klik tiga titik vertikal di menu bar atas Chrome, kemudian pilih More tools atau Fitur lainnya, lalu pilih Developer tools atau Alat pengembang.
· Atau bisa juga dengan menggunakan shortcut keyboard Ctrl + Shift + I untuk Windows ataupun dengan Linux, dan Cmd + Option + I untuk macOS.
· Selanjutnya bizzie bisa mengklik kanan halaman web di mana saja, lalu memilih Inspect untuk mengakses panel Developer tools.
· Jika nanti tab Elements muncul di jendela browser, maka bizzie bisa mengedit source code halaman. Silahkan ubah ukuran area tool inspeksi dengan menarik sudutnya supaya nanti lebih mudah dibaca.
· Secara default, panel Elements ini pun akan muncul di sisi kanan jendela browser. Jika misalnya ingin mengubah lokasinya atau memindahkannya ke jendela sendiri, maka silahkan klik tiga titik vertikal di pojok kanan atas panel, kemudian pilih Dock side yang Anda inginkan.
· Untuk melihat versi seluler halaman web, maka silahkan klik Toggle device toolbar atau alihkan toolbar perangkat yang ada di pojok kiri atas panel. Di atas preview, bizzie pun juga bisa mengubah variabel untuk mengetes performa halaman dengan banyak resolusi layer.
Beberapa Manfaat Penting dari Inspect Element
Bagi para web developer, inspect element ini memang memiliki beberapa manfaat. Beberapa manfaat yang dimaksud adalah:
1. Tempat untuk Eksperimen CSS
Pada fitur Inspect Element, ada terdapat sebuah console CSS yang mana akan memungkinkan bizzi untuk melakukan beberapa eksperimen pada kode CSS. Juga sangat disarankan untuk menggunakan Inspect Element terlebih dahulu sebelum nanti bizzie menulis kode CSS.
Karena, ketika melakukan penulisan kode CSS pada fitur Inspect Element, maka secara otomatis browser akan langsung melakukan eksekusi. Supaya nanti kode CSS bersifat temporer, maka bizzie pun perlu menyalinnya ke dalam kode CSS yang terdapat pada teks editor supaya nanti dapat disimpan.
2. Melakukan Pengujian Responsive Web
Untuk bisa melakukan tes pengujian responsif, maka bizzie sudah tidak perlu lagi membeli banyak perangkat. Namun melalui Inspect Element, maka kini sudah dapat melakukan berbagai pengujian website dengan menggunakan berbagai jenis perangkat mobile yang diinginkan.
3. Mengukur Kecepatan Web
Tentunya melalui inspect element, bizzie pun juga dapat mengukur seberapa lama website saat diunduh oleh browser juga untuk mengetahui juga mengenai kecepatan dan ukuran kapasitas web tersebut. Caranya cukup mudah, dimana bizzie hanya perlu menggunakan fitur Network atau Timeline untuk bisa mengukur seberapa cepat website Anda.
4. Melakukan Pengukuran Performa Memori dan CPU
Hal lain yang juga bisa dilakukan oleh inspect element yaitu dengan mampu mengukur performa memori serta CPU pada website. Tentunya semakin banyak tab yang bizzia buka pada browser, maka akan semakin banyak memori yang terpakai. Bukan hanya itu saja, namun ada juga script yang terdapat pada web juga yang mana akan membuat CPU semakin bekerja keras.
Bagaimana? Sudah paham sekarang mengenai cara inspect element serta manfaat pentingnya? Melalui penjelasan diatas, kini bizzie sudah bisa langsung mempraktekkannya. Selamat mencoba.
