Technology

10 Fungsi Google Chrome untuk Developer Website

 
  • 4
    Shares

Loading...

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.

1-chrome-tools

Berikutnya akan ditampilkan menu tampilan Developer Tool di bagian bawah halaman website.

2-chrome-tools

Elements

3-chrome-tools

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.

4-chrome-tools

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.

5-chrome-tools

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.

6-chrome-tools

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.

7-chrome-tools

Properties

Anda dapat melihat semua properti dari elemen, seperti JavaScript dan DOM pada menu Properties.

8-chrome-tools

Resources

Resource memungkinkan anda untuk melihat sumber daya yang dimuat di halaman website. seperti konten HTML5, database, penyimpanan lokal, cookies, AppCache, dll

9-chrome-tools

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.

10-chrome-tools

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.

11-chrome-tools

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

12-chrome-tools

Anda bisa melihat source code yang include ke halaman website seperti CSS, JavaScript, dll.

13-chrome-tools

Timeline

14-chrome-tools

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.

15-chrome-tools

Profiles

16-chrome-tools

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.

17-chrome-tools

Audits

18-chrome-tools

Alat audits ini dapat menganalisa halaman seperti beban dan memberi saran&optimasi untuk mengurangi waktu load halaman website.

19-chrome-tools

Console

20-chrome-tools

Terakhir adalah Console Developer Tools. Dia menawarkan fitur untuk menganalisa dan menampilkan pesan warning dan error pada saat load halaman website.

21-chrome-tools

Anda dapat praktekkan sekarang juga di Google Chrome anda.

Loading...

  • 4
    Shares

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *