Cara Membuka Inspect Element Website di Chrome
Daftar Isi :
- Pengertian apa itu Inspect Element Google Chrome Secara Umum
- Fitur atau Menu Yang Terdapat di Inspect Elements Browser Chrome
- Cara Masuk Inspect Elements Google Chrome Lewat Keyboard
- Cara Buka Inspect Element Chrome Secara Manual
buayaberdiri.blogspot.com - Inspect Element adalah salahsatu fitur dari browser Google Chrome yang dapat melihat beberapa source code atau kode html css dan javascript pada website atau blog. Tidak semua kode bahasa pemograman ini tampil di inspect element.
Google Chrome menyediakan fitur ini untuk pengembangan website (khususnya untuk frontend developer web) dan difitur ini kita dapat mengedit atau mengubah kode secara sementara (tidak permanent).Kamu dapat menggunakan fitur Inspect Element pada browser google chrome untuk device HP Android,iPhone,PC komputer dan laptop (Windows dan Linux,MacOS).
Apa Saja Yang Ditampilkan Inspect Element Google Chome ?
Didalam inspect element kita dapat melihat menu-menu yang berguna untuk pengembangan website,berikut ini beberapa menu dan fitur yang ada didalam inspect element pada browser google chrome :
- Menu Elements
- Menu Console
- Menu Sources
- Menu Network
- Menu Performance
- Menu Memory
- Menu Application
- Menu Security
- Menu Lighthouse
1.Fitur Elements pada Inspect Elements
Menu yang tampil pertama disebelah kiri pada inspect element adalah Elements,menu ini menampilkan kode HTML pada website atau blog.Kamu dapat melihat struktur kode yang ada didalam HTML seperti CSS dan Javascript.
Pada elemen kode html tersebut kita dapat edit kode secara sementara (tidak permanent),mengubah atau mengganti tulisan pada elemen html ,duplikat elemen,mencopy atau menyalin elemen tertentu,menyembunyikan elemen,memotong atau cut elemen dan lain-lain.Pada sebelah kanan menampilkan style pada kode CSS.
2.Fitur Console pada Inspect Elements
Pada fitur console yang terdapat di Inspect Elements google chrome ini menampilkan error dan warnings pada kode tertentu pada saat load dan scroll website.Jika terdapat error pada website atau blog akan tampil error apa saja di menu console ini.Jika tidak terjadi error biasanya akan tampil kosong pada bagian console ini.
3.Fitur Menu Sources pada Inspect Elements
Menu Sources ini menampilkan beberapa source code yang terdapat pada elements html ,jika terdapat error yang kode tertentu,jika kita klik error pada bagian yang error maka akan menampilkan ke menu source untuk melihat kodenya.Jadi tidak semua source code di website ditampilkan pada inspect element.
4.Fitur Network pada Inspect Elements
Menu Network ini menampilkan informasi seperti source pada website seperti nama URL atau domain, source css javascript,php dan lain-lain,status response code pada source code,waktu pemuatan source kode tersebut dan lain-lain.
Network ini sangat berguna untuk melihat source code mana saja yang memakan waktu pemuatan halaman yang lebih lama sehingga menjadi salahsatu penyebab mengapa website lambat,tidak dapat mengakses website dan lain-lain.
5.Fitur Performance pada Inspect Elements
Fitur Performance yang terdapat di inspect elements ini berfungsi untuk menganalisa atau menghitung performance website pada saat pemuatan website dimulai hingga scroll,kita dapat menentukan berapa lama waktu perekaman atau record performance website kita di inspect elements tersebut.
6.Fitur Lighthouse pada Inspect Elements
Lighthouse berfungsi untuk melihat atau menampilkan hasil audit pada performa loading halaman website atau blog.Hasil audit ini akan menampilkan nilai atau skor dari performance,Accessibility,Best Practices,SEO,Progessive Web App (PWA).
Tools ini sering digunakan untuk developers website atu blog,orang dibidang SEO,digital marketing dan blogger penulis konten.Lighthouse memiliki kaitannya dengan performance di perangkingan website di pencarian google dan laporan data core web vitals di google search console (GSC) atau versi lamanya Google Webmaster Tools (GWT).
Cara Inspect Element di PC Komputer atau PC
Untuk pengguna google chrome di perangkat PC komputer dan laptop dengan sistem operasi Windows dan Linux,kamu bisa membuka mode inspect element 2 cara yaitu :
Cara Pertama Masuk Mode Inspect Elements Chrome Menggunakan Keyboard Komputer:
- Buka alamat URL atau domain website yang ingin kamu inspect elements
- Tekan tombol CTRL + Shift + i
- Maka akan tampil atau muncul sendiri mode Inspect Elements secara otomatis
Cara Kedua Buka Mode Inspect Elements Google Chrome :
- Buka alamat URL atau domain website yang ingin kamu inspect elements
- Klik menu Customize and Control Google Chrome
- Kemudian pilih menu More Tools
- Lalu pilih Developer Tools
- Maka akan masuk kedalam inspect element pada website atau blog tersebut di browser google chrome
Penutup
Demikian informasi tentang bagaimana cara mengakses inspect element di google chrome,fitur ini sangat berguna untuk pemilik website seperti melihat error kode,performance source code,waktu pemuatan halaman,hasil audit lighthouse untuk keperluan SEO dan lain-lain.
Inspect element untuk menampilkan apa yang ada dielemen website tersebut,bukan untuk hack kode bahasa pemograman pada website atau blog.Cara inspect element di google chrome sangat mudah bukan ? karena tanpa aplikasi apapun untuk membukanya.
Semoga informasi ini bisa membantu kamu,Gbu :)