Pengantar
Google Chrome adalah browser web yang kaya dan canggih, memelopori apa yang mungkin dilakukan untuk aplikasi di web. Google telah bekerja keras untuk memberikan pengalaman penjelajahan yang sangat cepat, sangat stabil, dan kaya fitur bagi pengguna akhir. Google juga telah memastikan bahwa developer seperti Anda memiliki pengalaman yang luar biasa dengan Chrome. Developer Tools, yang dipaketkan dan tersedia di Chrome serta Safari, memungkinkan programmer dan developer web mengakses lebih dalam bagian internal browser dan aplikasi web mereka.
Developer Tools adalah bagian dari project Webkit open source. Sebagian besar diskusi dalam artikel ini berlaku untuk Google Chrome dan Safari. Namun, screenshot diambil menggunakan Google Chrome 6, sehingga mungkin ada sedikit perbedaan di browser Anda.
Dalam artikel ini, kami akan mengikuti tur ringkasan Developer Tools dan menunjukkan fitur-fiturnya yang paling populer dan bermanfaat. Audiens target kami adalah developer web yang tidak mengetahui, atau belum menyelidiki, Developer Tools. Namun, kami yakin bahwa meskipun Anda adalah developer web berpengalaman, Anda pasti bisa memberikan satu atau dua tips.
Jika instance Developer Tools Anda tidak sepenuhnya cocok dengan screenshot yang ditemukan dalam artikel ini, sebaiknya upgrade ke versi 5 agar Anda dapat mengikuti dan mendapatkan akses ke semua fitur yang dijelaskan di sini.
Ringkasan
Secara keseluruhan, ada delapan grup alat utama yang tersedia untuk melihat Developer Tools, dan kemampuan ini terus diperluas dengan setiap rilis. Chrome 5 kini menawarkan Elemen, Resource, Skrip, Linimasa, Profil, Penyimpanan, Audit, dan Konsol.
Elemen
Alat Elements memungkinkan Anda melihat halaman web saat browser melihatnya. Yaitu, dengan menggunakan alat Elemen, Anda bisa melihat HTML mentah, gaya CSS mentah, Model Objek Dokumen, dan memanipulasinya secara waktu nyata.
Referensi
Gunakan alat Resources untuk mempelajari komponen yang diminta halaman web atau aplikasi Anda dari server web, waktu yang diperlukan untuk permintaan ini, dan jumlah bandwidth yang diperlukan. Anda juga dapat melihat header respons dan permintaan HTTP untuk setiap resource. Alat Sumber Daya sangat tepat untuk membantu Anda mempercepat waktu muat halaman.
Skrip
Untuk melakukan peering di dalam JavaScript untuk suatu halaman, Anda akan menggunakan alat Skrip. Di sini Anda dapat menemukan daftar skrip yang diperlukan oleh halaman ditambah debugger skrip unggulan lengkap. Anda bahkan dapat mengubah JavaScript dengan cepat!
Linimasa
Untuk analisis kecepatan dan pengaturan waktu tingkat lanjut, alat Linimasa menawarkan visibilitas mendalam ke berbagai aktivitas di balik layar Chrome. Anda bisa mempelajari berapa lama browser yang dibutuhkan untuk menangani peristiwa DOM, merender tata letak halaman, dan menggambar jendela.
Profil
Alat Profil membantu Anda menangkap dan menganalisis performa skrip JavaScript. Misalnya, Anda dapat mempelajari fungsi mana yang memerlukan paling banyak waktu untuk dijalankan dan membidik tepat di bagian mana untuk dioptimalkan.
Penyimpanan
Aplikasi web modern memerlukan lebih banyak persistensi daripada sekadar cookie, dan alat Storage membantu Anda melacak, membuat kueri, dan melakukan debug pada penyimpanan browser lokal. Alat ini dapat menampilkan dan mengkueri data yang disimpan di database lokal, penyimpanan lokal, penyimpanan sesi, dan cookie.
Audit
Alat Audit seperti memiliki konsultan pengoptimalan web sendiri yang duduk di samping Anda. Alat ini dapat menganalisis halaman saat dimuat serta memberikan saran dan pengoptimalan untuk mengurangi waktu muat halaman dan meningkatkan responsivitas yang dirasakan (dan nyata).
Konsol
Yang tidak kalah pentingnya, Developer Tools menawarkan Konsol berfitur lengkap. Dari Konsol, Anda dapat memasukkan JavaScript arbitrer dan berinteraksi secara terprogram dengan halaman Anda.
Memulai
Memulai Developer Tools saat berada di Chrome sangatlah mudah.
Untuk sistem operasi apa pun, Anda cukup mengklik kanan di elemen mana pun di halaman, lalu memilih opsi "Periksa Elemen" dari menu konteks. Tindakan ini akan membuka Developer Tools dan melihat perincian langsung ke elemen yang Anda klik.
Untuk melihat cara kerjanya, kunjungi http://www.google.com di Browser Chrome. Klik kanan logo Google, dan Anda akan melihat opsi berikut:
Memilih "Inspect Element" akan memunculkan Developer Tools, yang akan terlihat seperti berikut:
Perhatikan cara Developer Tools terbuka di dalam tab Elemen dan secara otomatis melihat perincian ke, serta ditandai, tag <img> untuk logo Google. Hal ini sangat berguna saat Anda ingin mengetahui HTML mana yang menghasilkan elemen halaman tertentu.
Anda juga dapat membuka Developer Tools dengan pintasan keyboard sederhana. Bergantung pada sistem operasi Anda, coba langkah berikut ini:
- Di Windows dan Linux, pilih tombol
Control-Shift-J. - Di Mac, pilih tombol
Command-Option-J.
Terakhir, Anda dapat memilih untuk membuka alat dari menu utama {i>browser<i}.
Di Mac, dan dari bilah menu aplikasi utama, pilih Tampilan, Pengembang, Alat Pengembang.
Di PC Windows, Anda sebaiknya menggunakan menu {i>Page<i} di kanan atas, lalu pilih {i>Developer<i}, {i>Developer Tools<i}.
Sekarang setelah Alat Pengembang Anda terbuka dan siap, mari kita mulai dengan menjelajahi elemen di beranda Google.
Elemen
Tab pertama di Developer Tools adalah Elemen. Ini adalah jendela ke dalam struktur halaman web, yang ditampilkan seperti yang dilihat browser Anda.
Penjelajahan DOM
Anda akan sering mengunjungi tab Elemen saat perlu mengidentifikasi cuplikan HTML untuk beberapa aspek halaman. Misalnya, Anda mungkin ingin tahu apakah suatu gambar memiliki atribut ID HTML, dan berapa nilai atribut tersebut.
Tab Elemen terkadang merupakan cara yang lebih baik untuk "melihat sumber" sebuah halaman. Di dalam tab Elemen, DOM halaman akan diformat dengan baik, dengan mudah menunjukkan kepada Anda elemen HTML, keturunan, dan keturunannya. Sering kali, halaman yang Anda kunjungi memiliki HTML yang dikecilkan atau hanya tampak jelek sehingga menyulitkan untuk melihat bagaimana struktur halaman. Tab Elemen adalah solusi Anda untuk melihat struktur dasar halaman yang sebenarnya.
Misalnya, berikut adalah output dari "lihat sumber" halaman beranda Google.
Sumber di atas sulit dibaca karena dioptimalkan dan diminifikasi. Format ini bagus untuk klien dan server tetapi sulit bagi pengembang!
Sebagai gantinya, saat Anda ingin membaca sumber halaman, gunakan Tab Elements untuk melihat hierarki elemen yang telah dicetak dan ditandai dengan sintaksis yang cukup.
Tab Elemen juga memungkinkan Anda menjelajahi, berinteraksi, dan bahkan terkadang mengubah Gaya, Metrik, Properti, dan Pemroses Peristiwa untuk elemen mana pun di halaman.
Penjelajahan Gaya
Sifat CSS yang berjenjang membuat browser Styles di tab Elements menjadi sangat berguna. Terkadang, gaya runtuh ke dirinya sendiri dan visual yang tidak diinginkan muncul. Mengetahui aturan gaya visual mana yang diterapkan browser pada elemen akan membantu Anda men-debug masalah tersebut.
Mengklik elemen mana pun di tab Elemen akan menampilkan semua gaya yang dilampirkan pada elemen tersebut.
Anda akan melihat pada screenshot di atas, bahwa kita dapat memberi tahu semua atribut gaya yang sedang diterapkan. Misalnya, padding berasal langsung dari atribut gaya elemen <img>. Namun, lebar dan tinggi berasal dari atribut native masing-masing. Menariknya, Anda dapat mengetahui bahwa ada gaya yang juga diwarisi dari tag <center>, tag <body>, dan lainnya.
Meskipun senang melihat masing-masing gaya dan dari mana asalnya, ini juga sangat berguna untuk melihat kumpulan gaya akhir setelah dihitung dan diterapkan pada elemen. Anda dapat melihat produk akhir dengan memilih menu Gaya Komputasi, seperti yang ditunjukkan pada screenshot di bawah.
Selanjutnya, kita akan melihat sekilas pada fitur lain yang disediakan oleh Tab Elemen. Kami akan membahas hal berikut secara lebih mendetail dalam artikel mendatang.
Model Kotak
Anda dapat melihat model kotak saat diterapkan ke elemen yang dipilih dengan memilih menu Metrics:
Properti Elemen
Anda dapat melihat semua properti elemen, seperti JavaScript dan DOM akan melihatnya, dengan memilih menu Properties:
Pemroses Peristiwa
Dan akhirnya, Anda bahkan bisa melihat pemroses peristiwa yang dilampirkan, atau balon tersebut melewati, elemen melalui menu Pemroses Peristiwa:
Ringkasan
Ada banyak fungsi yang tersedia melalui Tab Elemen, dan artikel mendatang akan membahas lebih dalam tentang setiap menu.
Sebaiknya gunakan Tab Elemen saat Anda ingin melihat tampilan halaman di browser. Masalah umum seperti "bagaimana gaya ini dihitung?" atau "tag HTML apa yang menghasilkan komponen ini?" dapat dijawab dengan cepat dan mudah melalui Tab Elemen.
Anggaplah Tab Elemen seperti "lihat sumber" uber, dan dapatkan visibilitas yang sangat tajam ke halaman Anda.
Setelah Anda menyelidiki halaman, Anda mungkin bertanya-tanya bagaimana HTML, CSS, dan gambar bisa sampai ke sana. Tab Resources, yang akan dijelaskan berikutnya, menunjukkan cara browser klien dan server web berkomunikasi untuk mengirimkan resource tersebut.
Referensi
Setelah aplikasi Anda berfungsi, langkah selanjutnya adalah mengoptimalkan performa jaringan dan bandwidth. Anda harus berupaya membuat transfer aplikasi, dari server ke klien, secepat dan seefisien mungkin. Pengguna akan berterima kasih atas pemuatan halaman yang cepat, menghemat uang bandwidth dan sumber daya server, serta mendapatkan skor yang lebih baik dalam peringkat hasil penelusuran Google (yang kini mempertimbangkan kecepatan situs).
Tab Resources pada Developer Tools adalah jendela menuju komunikasi antara server web dan browser klien. Anda dapat melihat semua sumber daya yang diminta oleh browser (hal ini selalu sangat mengejutkan!), waktu yang dibutuhkan untuk menerimanya dari server, dan berapa banyak {i>bandwidth<i} yang digunakan selama transfer.
Ironisnya, menjalankan Tab Resources akan memengaruhi kinerja pemuatan halaman, sehingga dinonaktifkan secara default. Saat pertama kali mengakses fungsi tersebut, Anda harus mengaktifkannya untuk halaman yang sedang Anda lihat.
Sebaiknya biarkan opsi "Hanya aktifkan untuk sesi ini" tetap dipilih, karena Anda tidak ingin dikenai penalti performa yang terlalu kecil. Setelah Anda mengklik "Aktifkan pelacakan resource", halaman akan dimuat ulang, dan Developer Tools akan memantau serta menampilkan resource yang dikirim dari server.
Screenshot berikut menunjukkan resource yang diperlukan, dan dimuat untuk, halaman beranda Google.
Ada banyak informasi di layar ini, jadi mari kita bahas satu per satu.
Perilaku defaultnya adalah menunjukkan waktu yang diperlukan untuk meminta dan memuat semua resource untuk halaman. Men-scroll daftar Referensi mungkin akan mengejutkan Anda, karena Anda mungkin tidak mengetahui jumlah permintaan individual yang dibuat oleh klien. Jumlah permintaan yang tinggi dari klien dapat sangat memengaruhi performa. Mendapatkan visibilitas terkait hal yang diminta secara spesifik adalah langkah pertama untuk mengoptimalkan dan akhirnya mengurangi resource.
Jika Anda hanya tertarik pada gambar atau lembar gaya, Anda dapat memfilter jenis sumber daya menggunakan menu langsung di bawah jendela tab utama.
Anda juga akan mempelajari urutan resource diminta. Dengan menggunakan tampilan linimasa, Anda dapat memperoleh pemahaman yang lebih baik tentang mengapa elemen tertentu di halaman Anda muncul lebih lambat daripada yang lain.
Setelah mendapatkan ringkasan semua resource yang diminta dan caranya menyusun seluruh linimasa permintaan, Anda dapat melihat perincian masing-masing resource.
Jika Anda melihat bahwa beberapa resource diminta setiap kali Anda mengakses halaman, itu adalah tanda bahwa header cache Anda tidak dikonfigurasi dengan benar. Anda dapat melihat semua {i>header<i} untuk sumber daya dengan mengeklik sumber daya di daftar sebelah kiri.
Gunakan tampilan Header untuk memastikan Kode Respons HTTP yang diharapkan telah ditetapkan dan header yang sesuai disediakan. Misalnya, jika sumber daya jarang atau tidak pernah berubah, server Anda harus menyetel header Berakhir untuk waktu yang lama ke masa mendatang. Hal ini akan memberi tahu browser bahwa resource tidak akan diminta lagi sampai tanggal tersebut. Tindakan ini mengurangi jumlah koneksi HTTP yang diperlukan untuk halaman Anda, sehingga mempercepat situs.
Ringkasan
Ada banyak hal lainnya di tab Referensi, yang akan kami bahas di artikel mendatang.
Gunakan Tab Resources untuk mendapatkan visibilitas tentang cara browser klien berkomunikasi dengan server web. Dengan menggunakan informasi ini, termasuk waktu permintaan, ukuran permintaan, dan pesanan permintaan, Anda dapat melakukan pengoptimalan cerdas untuk mengurangi beban server, biaya, dan meningkatkan kecepatan serta meningkatkan pengalaman pengguna.
Kecepatan sangat penting bagi situs, pengguna, dan mesin telusur Anda. Setelah jumlah dan ukuran resource dikurangi, dan percakapan HTTP yang sesuai terjadi, langkah berikutnya adalah menyelidiki dan mengoptimalkan skrip yang berjalan di halaman Anda. Untungnya, tab Skrip, yang akan dibahas berikutnya, mendukung hal tersebut.
Referensi Tambahan
Untuk informasi selengkapnya tentang Developer Tools, kami dapat merekomendasikan hal berikut:
- Slide dan video presentasi Developer Tools Chrome dari Google I/O 2010
- Tutorial Developer Tools Chrome
Dan tentu saja, pantau terus html5rock.com untuk Bagian 2 dari artikel ini, bersama dengan banyak konten HTML5 dan Chrome yang bagus lainnya.