Dengan Chrome DevTools kita bisa langsung melihat efek modifikasi pada kode
Chrome DevTools adalah set pembuatan situs web dan alat debugging yang terpasang di Google Chrome. Tentu saja, kami juga dapat menggunakannya dalam versi open source-nya; Chromium.
Anda dapat mengakses alat Chrome untuk pengembang dengan menekan kombinasi tombol Ctrl + Shift + I, juga dengan mengarahkan kursor ke elemen dan mengklik kanan Inspeksi.
Komponen
Saat kami membuka Chrome DevTools, kami melihat bahwa u munculn panel di sebelah kanan halaman yang kita jelajahi. Untuk bagiannya, panel ini eIni dibagi menjadi tab yang sesuai dengan masing-masing alat. Pada gilirannya, alat-alat tersebut dibagi menjadi beberapa bagian.
Bagian-bagiannya adalah:
- Elemen: Menampilkan berbagai komponen halaman.
- Konsol: Memungkinkan Anda menjalankan diagnostik selama pengembangan atau berinteraksi dengan kode Javascript seperti yang Anda lakukan dengan terminal Linux.
- Sumber: Memudahkan untuk men-debug kode Javascript dan bekerja dengan file lokal.
- Jaringan: Membantu memantau dan meningkatkan kinerja halaman.
- Timeline: Memungkinkan perekaman dan eksplorasi berbagai peristiwa yang terjadi selama kunjungan ke suatu situs.
- Aplikasi: Menyelidiki semua sumber daya yang dimuat; antara lain, database IndexedDB atau Web SQL, penyimpanan lokal dan sesi, cookie, cache aplikasi, gambar, font, dan lembar gaya.
- Keamanan: Mendeteksi masalah keamanan dalam kode.
Mari kita lihat untuk apa kita dapat menggunakan Chrome DevTools
Perbaiki apa yang tidak berhasil
Itu terjadi pada setiap pengembang. Tulis kode, verifikasi bahwa tidak ada kesalahan, namun pada saat yang benar halaman tidak berfungsi sebagaimana mestinya. Alat Konsol menunjukkan kesalahan apa yang terjadi pada waktu eksekusi.
Kurangi waktu pemuatan
Jika halaman membutuhkan waktu lama untuk dimuat, pengguna menjadi lelah dan pergi ke situs lain. Untungnya, usia web Flash dan intro animasinya telah berakhir. Bagaimanapun, tab Jaringan dari Chrome DevTools memudahkan untuk menemukan elemen mana yang menunda pemuatan. Kami dapat mengulangi pengujian untuk kecepatan koneksi yang berbeda.
Ubah kodenya
Di tab Elemen kita bisa melihat elemen halaman, kode html terkait, dan properti css. Kami juga bisa mengubahnya.
Kita dapat mengedit teks halaman menggunakan perintah
document.designMode = 'on';
Coba ukuran layar yang berbeda
Tablet, smartphone, smart TV, komputer desktop. Daftar perangkat yang kita gunakan untuk menjelajahi Internet semakin bertambah. Dengan Chrome DevTools kami bisa uji apakah halaman terlihat bagus dalam berbagai ukuran.
benchmarking
Dalam Manajemen, istilah benchmarking berarti belajar dari praktik terbaik dari mereka yang melakukan hal yang sama seperti kami. Dengan Chrome DevTolls, jika kita menyukai desain situs web, kita bisa lihat kode html dan stylesheet css dan salin ke situs kami.
Mendapatkan Chrome DevTools
Chrome DevTools tersedia di browser Google Chrome dan Chromium. Chromium ada di repositori distribusi utama. Itu juga dapat dipasang dari toko Jepret. Adapun Google chrome Anda bisa ke sini. dalam format DEB dan RPM