Chrome DevTools adalah tools untuk melakukan proses debug pada suatu web yang menjadi keistimewaan dari browser Google Chrome. Tools ini sangat berguna jika anda adalah seorang developer web. Berikut beberapa fitur DevTool yang bisa dimanfaatkan untuk membantu proses pengembangan web:
Cara Menggunakan Chrome DevTools
Untuk menggunakan tools ini caranya begitu mudah kamu hanya perlu klik kanan > pilih inspect element. tools ini juga mempunyai beberapa fitur berikut penejalasanya
Device Mode
device mode digunakan untuk menguji apakah website yang anda kembangkan tampilannya responsif dan berjalan dengan baik di platform mobile. untuk menggunakan mode ini kamu hanya perlu melakukan Klik kanan pilih inspect lalu toggle device toolbar atau bisa menekan F12, Ctrl + Shift + M
Elements
Berguna untuk memeriksa dan bisa mengedit langsung kode HTML dan CSS (namun akan hilang saat i refresh)
Console
Fitur ini memungkinkan developer untuk menjalankan perintah-perintah JavaScript atau melihat pesan-pesan yang dihasilkan oleh kode JavaScript di laman yang sedang aktif.
Source
Fitur ini akan menampilkan isi file atau kode sumber dari laman yang sedang aktif.
Network
Fitur ini anda menampilkan rincian size, status, type, intiator, size, time, waterfall halaman web file yang telah di tampilkan
- size = ukuran file yang mengoperasi tampilan website tersebut
- status = status yang di terima HTTP
- type = jenis format file
- time = tempo waktu yang di ambil
Security
Fitur ini akan menampilkan informasi keamanan pada web yang sedang aktif, apakah sertifikat HTTPS nya aktif atau tidak, dsb.
