Pengantar
Google Chrome adalah browser web yang kaya dan canggih, pelopor apa yang mungkin untuk aplikasi di web. Google telah bekerja keras untuk memberikan pengalaman penjelajahan yang sangat cepat, sangat stabil, dan kaya fitur kepada pengguna akhir. Google juga telah memastikan bahwa developer seperti Anda mendapatkan pengalaman terbaik dengan Chrome. Developer Tools, yang dipaketkan dan tersedia di Chrome dan Safari, memungkinkan developer dan pemrogram web mengakses secara mendalam 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 tersebut diambil menggunakan Google Chrome 6, sehingga mungkin ada sedikit perbedaan di browser Anda.
Dalam artikel ini, kami akan melakukan tur ringkasan Developer Tools dan menunjukkan fitur yang paling populer dan berguna. Target audiens kami adalah pengembang web yang tidak mengetahui, atau belum menyelidiki, Alat Pengembang. Namun, kami yakin bahwa meskipun Anda adalah developer web berpengalaman, Anda akan mendapatkan satu atau dua tips.
Jika instance Alat Developer Anda tidak cukup cocok dengan screenshot yang ditemukan dalam artikel ini, sebaiknya upgrade ke versi 5 sehingga Anda dapat mengikuti dan mendapatkan akses ke semua fitur yang dijelaskan di sini.
Ringkasan
Secara keseluruhan, ada delapan grup utama alat yang tersedia dalam tampilan Developer Tools, dan kemampuan ini terus diperluas di setiap rilis. Chrome 5 kini menawarkan Elemen, Referensi, Skrip, Linimasa, Profil, Penyimpanan, Audit, dan Konsol.
Elemen
Fitur Elements memungkinkan Anda melihat halaman web sebagaimana browser melihatnya. Artinya, dengan menggunakan alat Elements, Anda bisa melihat HTML mentah, gaya CSS mentah, Model Objek Dokumen, dan memanipulasinya secara real time.
Referensi
Gunakan alat Resource untuk mempelajari komponen yang diminta halaman web atau aplikasi Anda dari server web, durasi permintaan tersebut, dan jumlah bandwidth yang diperlukan. Anda juga dapat melihat header respons dan permintaan HTTP untuk setiap resource. Alat Sumber Daya sangat cocok untuk membantu Anda mempercepat waktu pemuatan laman.
Skrip
Untuk mengintip ke dalam JavaScript untuk suatu halaman, Anda akan menggunakan alat Skrip. Di sini Anda dapat menemukan daftar skrip yang diperlukan oleh halaman beserta debugger skrip berfitur 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 dapat mempelajari berapa lama browser menangani peristiwa DOM, merender tata letak halaman, dan menggambar jendela.
Profil
Alat Profil membantu Anda mengambil dan menganalisis performa skrip JavaScript. Misalnya, Anda dapat mempelajari fungsi mana yang memerlukan waktu eksekusi paling lama dan membidik tepat di mana harus dioptimalkan.
Penyimpanan
Aplikasi web modern memerlukan persistensi yang lebih dari sekadar cookie, dan alat Storage membantu Anda melacak, membuat kueri, dan men-debug penyimpanan browser lokal. Alat ini dapat menampilkan dan mengkueri data yang disimpan dalam database lokal, penyimpanan lokal, penyimpanan sesi, dan cookie.
Audit
Alat Audit ibarat memiliki konsultan pengoptimalan web Anda 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 terlihat (dan nyata).
Konsol
Yang tak kalah penting, Alat Pengembang menawarkan Konsol berfitur lengkap. Dari Console, Anda dapat memasukkan JavaScript arbitrer dan berinteraksi secara terprogram dengan halaman Anda.
Memulai
Sangat mudah untuk memulai Developer Tools saat berada di dalam Chrome.
Untuk setiap sistem operasi, Anda cukup mengklik kanan pada elemen apa pun di laman dan memilih opsi "Periksa Elemen" dari menu konteks. Tindakan ini akan membuka Developer Tools dan menelusuri langsung ke elemen yang Anda klik.
Untuk melihat penerapannya, buka http://www.google.com di Browser Chrome. Klik kanan logo Google, dan Anda akan melihat opsi berikut:
Memilih "Periksa Elemen" akan menampilkan Developer Tools, yang akan terlihat seperti berikut:
Perhatikan bagaimana Developer Tools terbuka di dalam tab Elemen dan secara otomatis menelusuri, serta menandai, tag <img> untuk logo Google. Hal ini sangat berguna saat Anda ingin tahu 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:
- 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 browser.
Di Mac, dan dari panel menu aplikasi utama, pilih View, Developer, Developer Tools.
Di PC Windows, Anda harus menggunakan menu {i>Page<i} di kanan atas, dan pilih {i>Developer<i}, {i>Developer Tools<i}.
Setelah Alat Developer terbuka dan siap, mari kita mulai dengan menjelajahi elemen-elemen di halaman beranda Google.
Elemen
Tab pertama di Developer Tools adalah Elemen. Ini adalah jendela Anda menuju struktur halaman web, yang ditampilkan saat browser Anda melihatnya.
Penjelajahan DOM
Anda akan sering mengunjungi tab Elemen saat harus mengidentifikasi cuplikan HTML untuk beberapa aspek halaman. Misalnya, Anda mungkin ingin tahu apakah sebuah gambar memiliki atribut id HTML, dan apa nilai atribut tersebut.
Tab Elemen terkadang merupakan cara yang lebih baik untuk "melihat sumber" suatu halaman. Di dalam tab Elements, DOM halaman akan diformat dengan baik, dengan mudah menunjukkan kepada Anda elemen HTML, nenek moyangnya, dan turunannya. Terlalu sering, halaman yang Anda kunjungi akan memiliki HTML yang diminifikasi atau hanya terlihat jelek sehingga sulit untuk melihat bagaimana struktur halaman tersebut. Tab Elemen adalah solusi Anda untuk melihat struktur dasar halaman yang sebenarnya.
Misalnya, berikut ini adalah output dari "lihat sumber" halaman beranda Google.
Sulit untuk membaca sumber di atas karena dioptimalkan dan diminifikasi. Formatnya bagus untuk klien dan server, tetapi sulit untuk pengembang!
Sebagai gantinya, ketika Anda ingin membaca sumber halaman, gunakan Tab Element untuk melihat hierarki elemen yang disorot sintaks dan tercetak dengan baik.
Tab Elemen juga memungkinkan Anda menjelajahi, berinteraksi, dan bahkan terkadang mengubah Gaya, Metrik, Properti, dan Pemroses Peristiwa untuk elemen apa pun di halaman.
Penjelajahan Gaya
Sifat CSS yang berjenjang membuat browser Gaya di tab Elemen sangat berguna. Terkadang, gaya menciut menjadi 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 apa pun di tab Elements akan menampilkan semua gaya yang dilampirkan ke elemen tersebut.
Anda akan melihat dalam screenshot di atas, bahwa kita dapat mengetahui semua atribut gaya yang sedang diterapkan. Misalnya, padding berasal langsung dari atribut gaya elemen <img>. Namun, lebar dan tinggi berasal dari atribut native-nya masing-masing. Menariknya, Anda dapat mengetahui bahwa ada gaya yang juga diwarisi dari tag <center>, tag <body>, dan lainnya.
Meskipun bagus untuk melihat masing-masing gaya dan dari mana asalnya, juga sangat berguna untuk melihat kumpulan gaya akhir setelah dihitung dan diterapkan ke elemen. Anda dapat melihat produk akhir dengan memilih menu Computed Style, seperti yang ditunjukkan pada screenshot di bawah.
Selanjutnya, kita akan melihat sekilas fitur lain yang disediakan oleh Tab Elemen. Kami akan membahas hal berikut secara lebih mendetail di artikel mendatang.
Model Kotak
Anda dapat melihat model kotak saat diterapkan pada elemen yang dipilih dengan memilih menu Metrik:
Properti Elemen
Anda bisa melihat semua properti elemen, sebagaimana JavaScript dan DOM akan melihatnya, dengan memilih menu Properties:
Pemroses Peristiwa
Dan terakhir, Anda bahkan bisa melihat pemroses peristiwa yang terhubung ke, atau balon tersebut melalui elemen melalui menu Pemroses Peristiwa:
Ringkasan
Ada banyak fungsi yang tersedia melalui Tab Elemen, dan artikel mendatang akan membahas lebih dalam ke masing-masing menu.
Anda harus menggunakan Tab Elemen jika ingin melihat tampilan halaman pada browser. Masalah umum seperti "bagaimana gaya ini dihitung?" atau "tag HTML apa yang menghasilkan komponen ini?" akan dijawab dengan cepat dan mudah melalui Tab Elemen.
Bayangkan Tab Elemen seperti uber-"sumber penayangan", dan dapatkan visibilitas yang sangat tajam ke halaman Anda.
Setelah Anda menyelidiki laman, Anda mungkin ingin tahu bagaimana HTML, CSS, dan gambar bisa sampai di sana sejak awal. Tab Resource, yang akan dijelaskan selanjutnya, 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 melakukan transfer aplikasi dari server ke klien, secepat dan seefisien mungkin. Pengguna Anda akan berterima kasih atas pemuatan halaman yang cepat, Anda dapat menghemat uang untuk sumber daya server dan bandwidth, serta mendapatkan skor yang lebih baik dalam peringkat hasil penelusuran Google (yang kini memperhitungkan kecepatan situs).
Tab Resource di 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 mengejutkan!), waktu yang diperlukan untuk menerimanya dari server, dan berapa banyak bandwidth yang digunakan selama transfer.
Ironisnya, menjalankan Tab Resource akan memengaruhi performa pemuatan halaman, sehingga fitur ini dinonaktifkan secara default. Saat pertama kali mengakses fungsi, Anda harus mengaktifkannya untuk halaman yang sedang dilihat.
Sebaiknya biarkan default "Hanya aktifkan untuk sesi ini" dipilih, karena Anda tidak ingin secara tidak perlu dikenai penalti kinerja kecil. Setelah Anda mengeklik "Aktifkan pelacakan sumber daya", laman akan dimuat ulang, dan Alat Pengembang akan memantau serta menampilkan sumber daya 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 default-nya adalah menunjukkan waktu yang diperlukan untuk meminta dan memuat semua resource untuk halaman. Men-scroll ke bawah daftar Resource mungkin mengejutkan Anda, karena Anda mungkin tidak tahu jumlah permintaan individual yang dibuat oleh klien. Jumlah permintaan yang tinggi dari klien dapat sangat memengaruhi performa. Mendapatkan visibilitas terkait apa yang diminta adalah langkah pertama untuk pengoptimalan dan akhirnya pengurangan resource.
Jika Anda hanya tertarik dengan gambar atau lembar gaya, Anda dapat memfilter jenis sumber daya menggunakan menu langsung di bawah jendela tab utama.
Anda juga akan mempelajari urutan permintaan resource. Dengan menggunakan tampilan garis waktu, Anda dapat memperoleh pemahaman yang lebih baik tentang mengapa elemen tertentu di laman Anda muncul lebih lambat daripada yang lain.
Setelah mendapatkan ringkasan tentang semua resource yang diminta, dan bagaimana resource tersebut menyusun seluruh linimasa permintaan, sebaiknya Anda melihat perincian resource satu per satu.
Jika Anda melihat bahwa beberapa sumber daya diminta setiap kali Anda mengakses halaman, itu adalah tanda bahwa header penyimpanan ke cache Anda tidak dikonfigurasi dengan benar. Anda dapat melihat semua {i>header<i} untuk sumber daya dengan mengeklik sumber daya tersebut 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 diubah, server Anda harus menyetel header Expires di waktu yang akan datang. Tindakan ini akan memberi tahu browser bahwa resource tidak boleh diminta lagi hingga tanggal tersebut. Hal ini mengurangi jumlah koneksi HTTP yang diperlukan untuk halaman Anda, sehingga mempercepat situs Anda.
Ringkasan
Ada banyak hal lain di tab Referensi, yang akan kita 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 urutan permintaan, Anda dapat membuat pengoptimalan cerdas untuk mengurangi beban server, biaya, dan meningkatkan kecepatan serta menyempurnakan pengalaman pengguna.
Kecepatan sangat penting untuk situs web, pengguna, dan mesin telusur Anda. Setelah jumlah dan ukuran sumber daya dikurangi, dan percakapan HTTP yang sesuai terjadi, langkah berikutnya adalah menyelidiki dan mengoptimalkan skrip yang berjalan di laman Anda. Untungnya, tab Skrip, yang akan dibahas selanjutnya, melakukan hal itu.
Referensi Tambahan
Untuk informasi selengkapnya tentang Developer Tools, kami dapat merekomendasikan hal berikut:
- Slide dan video presentasi Chrome Developer Tools dari Google I/O 2010
- Tutorial Developer Tools Chrome
Dan tentu saja, tetap saksikan html5Rock.com untuk Bagian 2 dari artikel ini, bersama dengan banyak konten HTML5 dan Chrome hebat lainnya.