10 Fungsi Google Chrome untuk Developer Website
0 
5940
Nah pemilik website, jika siang ini anda sedang melakukan pengembangan untuk website anda, maka Google Chrome bisa membantu anda. Google Chrome adalah browser yang sangat cepat, stabil dan kaya fitur. Di dalamnya sudah ada Developer Tools untuk pengembangan web. Di artikel kali ini, kita akan praktek dengan Google Chrome Version 26. Anda dapat menyesuaikan jika ada perbedaan pada versi yang anda gunakan.
Mari kita mulai dengan klik kanan pada halaman browser (silakan akses dulu sebuah website apapun), kemudian klik Inspect Element.
Berikutnya akan ditampilkan menu tampilan Developer Tool di bagian bawah halaman website.
Elements
Menu pertama adalah Elements. Di sini, kita bisa melihat konten-konten apa saja yang tampil di halaman website seperti element HTML, CSS dan Document Object Model. Tab element adalah cara yang lebih baik untuk melihat source code halaman website. Halaman DOM akan diformat dengan baik, mudah dan menunjukkan struktur dari masing-masing element HTML. Karena kadang kita menemui struktur source code HTML yang jelek dan membuat susunan halaman website sulit untuk dilihat. Contohnya jika kita “view source” dari Google Chrome.
Source code di atas sulit dibaca karena formatnya dibuat untuk mengurangi space, tetapi sulit bagi pengembang untuk mendefinisikan setiap struktur penyusunnya. Nah dengan Tab Element, susunan source code yang dioptimalkan dan minified akan menjadi mudah untuk dimengerti dan dapat lebih mudah dipahami struktur penyusun halaman website.
Tab Elemen juga memungkinkan untuk menelusuri, berinteraksi, dan mengubah Styles, Metrik, Properties, dan Event untuk setiap elemen pada halaman website secara local. Sehingga anda dapat bereksperimen secara sementara tanpa merusak.
Styes Browser
Anda bisa menyorot salah satu div atau element yang mempunyai styles. Kemudian akan muncul menu styles pada pojok kanan pada Developer Tool. Pada menu inilah anda bisa langsung merubah setiap susunan attribut styles dan secara otomatis akan diterapkan/tampilkan pada halaman browser.
Seperti gambar di atas, salah satu div id=”grap-top” dengan masing-masing attribut css akan tampil pada menu styles. Anda bisa merubah value pada masing attribut dan secara otomatis pada halaman website akan berubah. Perlu diingat styles akan revert / berubah kesemula apabila anda melakukan refresh pada browser karena perubahan styles dari sini hanya bersifat lokal dan tidak tersimpan di server.
Metrics
Anda dapat melihat model kotak setiap position, margin, border, padding dan size dari element yang anda pilih.
Properties
Anda dapat melihat semua properti dari elemen, seperti JavaScript dan DOM pada menu Properties.
Resources
Resource memungkinkan anda untuk melihat sumber daya yang dimuat di halaman website. seperti konten HTML5, database, penyimpanan lokal, cookies, AppCache, dll
Network
Anda bisa melihat komponen apa saja yang direquest halaman web dari server, berapa lama eksekusinya, dan berapa banyak bandwidth yang dibutuhkan. Anda juga dapat melihat HTTP dan respon header dari content website.
Dengan tool ini, anda bisa menemukan cara untuk mengoptimalkan waktu load dan bandwidth yang dibutuhkan. Anda bisa mengoptimalkan transfer secepat dan seefisien mungkin dari server ke client. Dan cara untuk menghemat bandwidth dan resource server.
Anda bisa melihat semua resource yang diminta browser, waktu yang dibutukan untuk menerima dari server, dan berapa banyak bandwidth yang digunakan selama proses transfer.
Sources
Anda bisa melihat source code yang include ke halaman website seperti CSS, JavaScript, dll.
Timeline
Untuk menganalisis kecepatan dan menawarkan visibilitas proses background, Anda bisa melihat berapa lama waktu yang dibutuhkan browser untuk menangani peristiwa DOM dan rendering halaman layout website.
Profiles
Profiles membantu Anda menganalisa kinerja JavaScript. Misalnya, Anda dapat melihat waktu untuk mengeksekusi dari awal sampai akhir load halaman website dan memungkinan untuk melakukan optimasi JavaScript.
Audits
Alat audits ini dapat menganalisa halaman seperti beban dan memberi saran&optimasi untuk mengurangi waktu load halaman website.
Console
Terakhir adalah Console Developer Tools. Dia menawarkan fitur untuk menganalisa dan menampilkan pesan warning dan error pada saat load halaman website.
Anda dapat praktekkan sekarang juga di Google Chrome anda.
Tidak ada komentar:
Posting Komentar