Inspect Element di Chrome adalah sebuah fitur yang bisa melakukan perubahan temporer pada website. Fitur ini dapat diakses dengan mudah.
Saat sedang berkunjung ke sebuah website, apakah Anda pernah merasa terganggu? Salah satu hal yang umum terjadi adalah tampilan navigasi yang rumit dan sulit dipahami. Padahal, keberadaan navigasi website seharusnya memudahkan pengunjung untuk mencari informasi penting yang dibutuhkan.
Secara keseluruhan, desain website yang menarik dapat menciptakan kesan pertama yang baik bagi pengunjung. Semakin positif kesan yang timbul, semakin besar pula peluang bagi website itu untuk dikunjungi kembali. Bahkan, pengunjung dengan senang hati akan membagikan pengalamannya seraya mengajak orang lain untuk mencobanya. Jelas, jumlah view akan meningkat.
Mengenal Fitur Inspect Element
Masih banyak keuntungan yang bisa didapatkan apabila website memiliki tampilan desain yang menarik. Sayangnya, tidak semua orang piawai melakukan perubahan permanen pada website. Karena itu, layanan jasa pembuatan website sangat dicari. Web developer akan membangun atau melakukan modifikasi pada website berdasarkan riset mendalam supaya sesuai target pasar.
Akan tetapi, sebelum memutuskan untuk mengubah desain website secara permanen, Anda bisa melakukan eksperimen singkat terlebih dahulu. Caranya dengan memanfaatkan fitur Inspect Element pada browser yang digunakan, termasuk Google Chrome.
Untuk mengakses Inspect Element pada Chrome, ada 3 cara mudah yang dapat dilakukan, yaitu:
- Melalui menu browser
Buka Chrome pada komputer. Klik pada ikon berbentuk tiga titik vertikal yang terletak di address bar, tepatnya di sebelah kanan atas layar browser. Pada menu yang tersedia, pilih More tools > Developer tools. Selanjutnya, sebuah box berisi kode akan muncul di sebelah kanan layar browser.
- Klik kanan pada elemen di website
Cara kedua yang bisa dilakukan adalah mengarahkan kursor pada elemen yang ingin diubah. Pilih elemen tersebut, kemudian klik kanan. Di layar akan muncul pop up, klik Inspect.
- Menggunakan shortcut
Terakhir, Anda juga bisa menggunakan shortcut untuk membuka box berisi kode HTML dan CSS pada website. Untuk pengguna Windows, tekan Ctrl+Shift+C. Sementara itu, untuk pengguna Mac, tekan Command+Option+C. Untuk mengakses panel terakhir yang dibuka, tekan Command+Option+I (Mac) atau Control+Shift+I (Windows).
Setelah melakukan salah satu dari 3 cara ini, Anda dapat melihat tampilan HTML dan CSS halaman web yang sedang diakses. Pada box tersebut, ada 3 bagian berbeda yang akan muncul, yaitu:
- Panel DOM
Panel DOM adalah tool yang digunakan untuk mengubah tata letak halaman. Di sini, Anda memiliki akses penuh ke kode HTML dan dapat melakukan modifikasi dengan bebas. Panel ini terletak di bagian atas box, tepatnya di bawah menu Elements.
- Panel CSS
Di bagian panel CSS, Anda dapat memodifikasi aturan gaya beranda website dengan mengubah, menambah, atau menghapus properti CSS, seperti huruf, ukuran, dan warna. Panel ini terletak di bagian tengah, tepatnya di bawah menu Styles.
- Panel Console
Panel Console menampilkan apa yang baru pada developer tools. Panel ini terletak di bagian box paling bawah. Di sini, Anda juga bisa mengecek jika ada eror yang terjadi pada kode HTML.
Kegunaan Fitur Inspect Element
Fitur Inspect Element biasanya digunakan untuk kebutuhan seperti berikut ini:
- Untuk melakukan eksperimen CSS
Sebelum menulis kode CSS secara permanen, lakukan eksperimen dengan Inspect Element. Browser akan langsung mengeksekusi perintah yang disampaikan melalui fitur ini. Tersedia pula sejumlah fitur yang memudahkan penulisan CSS, seperti colorpicker, autocomplete, filter, dan sebagainya. Jika sudah sesuai, Anda hanya perlu menyalin kode tersebut ke teks editor.
- Untuk menguji respons web
Melalui fitur Inspect Element, Anda juga bisa menguji respons website di berbagai perangkat mobile. Caranya, klik Inspect pada sembarang elemen di website. Klik toggle device toolbar yang terletak pada sisi kiri atas box atau tekan Ctrl+Shift+M. Selanjutnya, pilih jenis device yang ingin dicek.
- Mengecek error di JavaScript
Dengan menggunakan Inspect Element, Anda bisa mengecek eror yang terjadi pada kode JavaScript. Buka menu Console untuk mengetahuinya. Selanjutnya, hubungi jasa pembuatan website untuk memperbaikinya secara permanen.
- Menyembunyikan konten sensitif untuk sementara
Ada pula yang menggunakan fitur ini untuk menyembunyikan konten sensitif pada website sebelum melakukan screenshot.
Cara Mengubah DOM dan CSS
Sekilas, DOM tampak sama dengan HTML. Perbedaannya, HTML mewakili konten halaman awal, sedangkan DOM mewakili konten halaman saat ini. Saat JavaScript menambah, menghapus, atau mengedit node, DOM menjadi berbeda dengan HTML.
Untuk mengubah node pada DOM, klik dua kali pada teks yang akan diubah. Teks yang terpilih itu akan tampak berwarna biru. Selanjutnya, Anda dapat menggantinya dengan teks yang baru. Pada halaman website, teks pun langsung berubah.
Bukan hanya konten, Anda juga bisa mengubah latar teks pada website. Caranya, klik dua kali pada node, tekan tanda panah kanan pada keyboard, tambahkan space, lalu ketik style=”background-color:red”. Klik Enter dan warna latar teks yang dipilih akan berubah menjadi merah.
Melalui node DOM, Anda juga bisa mengubah tipe konten, misalnya dari list menjadi button, mengubah urutan konten, mengubah latar saat kursor diarahkan pada teks, serta menyembunyikan dan menghapus konten.
Selain DOM, Anda juga bisa melakukan perubahan pada CSS dengan menggunakan fitur Inspect pada Chrome. Salah satunya, mengubah atau menambahkan deklarasi CSS pada sebuah elemen. Sebagai contoh, jika ingin mengubah warna latar, klik kanan pada teks, pilih Inspect. Pada tab Styles, klik element.style, ketik background-color, tekan Enter. Lalu, pilih jenis warna yang diinginkan.
Anda juga bisa mengubah dimensi suatu elemen, baik lebar, tinggi, padding, margin, maupun panjang batas elemen. Caranya, klik kanan pada elemen yang akan diubah, pilih Inspect. Pada bagian kanan tab Style, perhatikan Box Model. Arahkan kursor pada angka yang tertera, ubah sesuai keinginan. Lalu, klik Enter dan desain website pun berubah.
Inilah sejumlah hal yang bisa dilakukan dengan fitur Inspect Element di Chrome. Eksperimen sederhana ini akan membantu Anda menciptakan desain website yang tepat. Selanjutnya, hubungi jasa pembuatan website untuk melakukan perubahan permanen terhadap website. Jangan lupa, pilihlah jasa yang sekaligus menawarkan strategi digital marketing untuk hasil yang lebih optimal.
