Pengantar
Google Chrome adalah browser web yang kaya dan canggih, yang merintis berbagai kemungkinan untuk aplikasi di web. Google telah berupaya keras untuk memberikan pengalaman penjelajahan yang sangat cepat, sangat stabil, dan kaya fitur bagi pengguna akhir. Google juga memastikan bahwa developer seperti Anda memiliki pengalaman yang luar biasa dengan Chrome. Developer Tools, yang dipaketkan dan tersedia di Chrome dan Safari, memungkinkan developer dan programmer web mengakses lebih jauh ke bagian internal browser dan aplikasi web mereka.
Alat Developer adalah bagian dari project Webkit open source. Sebagian besar pembahasan 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, kita akan melakukan tur ringkasan Alat Developer dan menunjukkan fiturnya yang paling populer dan berguna. Target audiens kami adalah developer web yang tidak mengetahui, atau belum menyelidiki, Developer Tools. Namun, kami yakin bahwa meskipun Anda adalah developer web berpengalaman, Anda akan mendapatkan satu atau dua tips.
Jika instance Alat Developer Anda tidak 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 di Alat Developer, dan kemampuannya diperluas dengan setiap rilis. Chrome 5 kini menawarkan Elemen, Resource, Skrip, Linimasa, Profil, Penyimpanan, Audit, dan Konsol.
Elemen
Alat Elemen memungkinkan Anda melihat halaman web seperti yang dilihat browser. Artinya, dengan menggunakan alat Elements, Anda dapat melihat HTML mentah, gaya CSS mentah, Document Object Model, dan memanipulasinya secara real time.
Resource
Gunakan alat Resource untuk mempelajari komponen yang diminta halaman web atau aplikasi Anda dari server web, berapa lama permintaan ini berlangsung, dan berapa banyak bandwidth yang diperlukan. Anda juga dapat melihat header permintaan dan respons HTTP untuk setiap resource. Alat Referensi sangat cocok untuk membantu Anda mempercepat waktu pemuatan halaman.
Skrip
Untuk melihat bagian dalam JavaScript untuk 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 lanjutan, alat Linimasa menawarkan visibilitas mendalam tentang berbagai aktivitas di balik layar Chrome. Anda dapat mempelajari berapa lama waktu yang diperlukan browser untuk menangani peristiwa DOM, merender tata letak halaman, dan menggambar jendela.
Profil
Alat Profil membantu Anda merekam dan menganalisis performa skrip JavaScript. Misalnya, Anda dapat mempelajari fungsi mana yang memerlukan waktu paling lama untuk dieksekusi dan mengetahui dengan tepat tempat yang perlu dioptimalkan.
Penyimpanan
Aplikasi web modern memerlukan persistensi yang lebih besar daripada sekadar cookie, dan alat Penyimpanan membantu Anda melacak, membuat kueri, dan men-debug penyimpanan browser lokal. Alat ini dapat menampilkan dan membuat kueri data yang disimpan di database lokal, penyimpanan lokal, penyimpanan sesi, dan cookie.
Audit
Alat Audit ini seperti memiliki konsultan pengoptimalan web Anda sendiri. Alat ini dapat menganalisis halaman saat dimuat dan memberikan saran serta pengoptimalan untuk mengurangi waktu pemuatan halaman dan meningkatkan responsivitas yang dirasakan (dan sebenarnya).
Konsol
Terakhir, 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 dalam Chrome itu mudah.
Untuk sistem operasi apa pun, Anda cukup mengklik kanan pada elemen mana pun di halaman, lalu memilih opsi "Periksa Elemen" dari menu konteks. Tindakan ini akan membuka Developer Tools dan langsung membuka elemen yang Anda klik.
Untuk melihat cara kerjanya, buka http://www.google.com di Browser Chrome. Klik kanan pada logo Google, dan Anda akan melihat opsi berikut:
Memilih "Periksa Elemen" akan menampilkan Alat Developer, yang akan terlihat seperti berikut:
Perhatikan bagaimana Alat Developer terbuka di dalam tab Elemen dan secara otomatis merinci, serta menandai, tag <img> untuk logo Google. Hal ini sangat berguna jika Anda ingin mengetahui HTML mana yang menghasilkan elemen halaman tertentu.
Anda juga dapat membuka Alat Developer dengan pintasan keyboard sederhana. Bergantung pada sistem operasi Anda, coba langkah-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 browser utama.
Di Mac, dan dari panel menu aplikasi utama, pilih View, Developer, Developer Tools.
Di PC Windows, Anda harus menggunakan menu Halaman di kanan atas, lalu pilih Developer, Alat Developer.
Setelah Developer Tools terbuka dan siap, mari kita mulai dengan menjelajahi elemen di halaman beranda Google.
Elemen
Tab pertama di Developer Tools adalah Elemen. Ini adalah jendela ke struktur halaman web, yang ditampilkan seperti yang dilihat browser Anda.
Penjelajahan DOM
Anda akan sering membuka tab Elemen saat perlu mengidentifikasi cuplikan HTML untuk beberapa aspek halaman. Misalnya, Anda mungkin ingin tahu apakah gambar memiliki atribut ID HTML, dan nilai atribut tersebut.
Tab Elemen terkadang merupakan cara yang lebih baik untuk "melihat sumber" halaman. Di dalam tab Elemen, DOM halaman akan diformat dengan baik, sehingga memudahkan Anda melihat elemen HTML, asal-usulnya, dan turunannya. Sering kali, halaman yang Anda kunjungi akan memiliki HTML yang diminifikasi atau tidak menarik sehingga sulit untuk melihat struktur halaman. Tab Elemen adalah solusi Anda untuk melihat struktur 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 developer.
Sebagai gantinya, saat Anda ingin membaca sumber halaman, gunakan Tab Elemen untuk melihat hierarki elemen yang dicetak dengan baik dan ditandai sintaksis.
Tab Elemen juga memungkinkan Anda menjelajahi, berinteraksi, dan terkadang bahkan mengubah Gaya, Metrik, Properti, dan Pemroses Peristiwa untuk elemen apa pun di halaman.
Penjelajahan Gaya
Sifat CSS yang beruntun membuat browser Gaya di tab Elemen sangat berguna. Terkadang, gaya diciutkan dan visual yang tidak diinginkan muncul. Mengetahui aturan gaya mana yang diterapkan browser ke elemen akan membantu Anda men-debug masalah tersebut.
Mengklik elemen apa pun di tab Elemen akan menampilkan semua gaya yang terpasang ke elemen tersebut.
Anda akan melihat pada screenshot di atas bahwa kita dapat mengetahui semua atribut gaya yang 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 sangat bagus untuk melihat setiap gaya dan asalnya, melihat kumpulan gaya akhir setelah dihitung dan diterapkan ke elemen juga sangat berguna. Anda dapat melihat produk akhir dengan memilih menu Gaya yang Dihitung, 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 ke elemen yang dipilih dengan memilih menu Metrik:
Properti Elemen
Anda dapat melihat semua properti elemen, seperti yang akan dilihat JavaScript dan DOM, dengan memilih menu Properties:
Pemroses Peristiwa
Terakhir, Anda bahkan dapat melihat pemroses peristiwa yang dilampirkan ke, atau yang muncul melalui, elemen melalui menu Pemroses Peristiwa:
Ringkasan
Ada banyak fungsi yang tersedia melalui Tab Elemen, dan artikel mendatang akan membahas setiap menu secara lebih mendalam.
Anda harus menggunakan Tab Elemen jika ingin melihat tampilan halaman untuk browser itu sendiri. Masalah umum seperti "bagaimana gaya ini dihitung?" atau "tag HTML apa yang menghasilkan komponen ini?" dapat dijawab dengan cepat dan mudah melalui Tab Elemen.
Anggap Tab Elemen seperti "view source" yang sangat canggih, dan dapatkan visibilitas yang sangat tajam ke halaman Anda.
Setelah menyelidiki halaman, Anda mungkin bertanya-tanya bagaimana HTML, CSS, dan gambar muncul di sana. Tab Resource, yang dijelaskan berikutnya, menunjukkan cara browser klien dan server web berkomunikasi untuk mengirim resource tersebut.
Resource
Setelah aplikasi berfungsi, langkah berikutnya adalah mengoptimalkan performa jaringan dan bandwidth. Anda harus berupaya melakukan transfer aplikasi, dari server ke klien, secepat dan seefisien mungkin. Pengguna akan berterima kasih karena halaman dimuat dengan cepat, Anda akan menghemat uang untuk bandwidth dan resource server, dan Anda juga akan mendapatkan skor yang lebih baik di peringkat hasil penelusuran Google (yang kini memperhitungkan kecepatan situs).
Tab Resources di Developer Tools adalah jendela untuk melihat komunikasi antara server web dan browser klien. Anda dapat melihat semua resource yang diminta oleh browser (ini selalu sangat mengejutkan!), waktu yang diperlukan untuk menerimanya dari server, dan jumlah bandwidth yang digunakan selama transfer.
Ironisnya, menjalankan Tab Resource memengaruhi performa pemuatan halaman, sehingga dinonaktifkan secara default. Saat pertama kali mengakses fungsi ini, Anda harus mengaktifkannya untuk halaman yang sedang dilihat.
Sebaiknya biarkan "Only enable for this session" dipilih secara default, karena Anda tidak ingin mengalami penalti performa kecil yang tidak perlu. Setelah Anda mengklik "Aktifkan pelacakan resource", halaman akan dimuat ulang, dan Alat Developer 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 menampilkan berapa lama waktu yang diperlukan untuk meminta dan memuat semua resource untuk halaman. Men-scroll daftar Resource ke bawah mungkin akan mengejutkan Anda, karena Anda mungkin tidak tahu jumlah permintaan individual yang dibuat oleh klien. Permintaan dalam jumlah besar dari klien dapat sangat memengaruhi performa. Mendapatkan visibilitas tentang apa yang diminta secara tepat adalah langkah pertama menuju pengoptimalan dan pengurangan resource pada akhirnya.
Jika hanya tertarik dengan gambar atau lembar gaya, Anda dapat memfilter jenis resource menggunakan menu langsung di bawah jendela tab utama.
Anda juga akan mempelajari urutan permintaan resource. Dengan menggunakan tampilan linimasa, Anda dapat lebih memahami alasan elemen tertentu di halaman Anda muncul lebih lambat daripada elemen lainnya.
Setelah mendapatkan ringkasan tentang semua resource yang diminta, dan cara resource tersebut menyusun seluruh linimasa permintaan, Anda dapat melihat perincian untuk setiap resource.
Jika Anda melihat bahwa beberapa resource diminta setiap kali Anda mengakses halaman, itu adalah tanda bahwa header penyimpanan dalam cache tidak dikonfigurasi dengan benar. Anda dapat melihat semua header untuk suatu resource dengan mengklik resource di daftar sebelah kiri.
Gunakan tampilan Header untuk memastikan Kode Respons HTTP yang diharapkan ditetapkan dan header yang sesuai diberikan. Misalnya, jika resource jarang atau tidak pernah diubah, server Anda harus menetapkan header Expires untuk masa mendatang. 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 Resource 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 melakukan pengoptimalan cerdas untuk mengurangi beban server, biaya, serta meningkatkan kecepatan dan pengalaman pengguna.
Kecepatan sangat penting bagi situs, pengguna, dan mesin telusur Anda. Setelah Anda mengurangi jumlah dan ukuran resource, serta percakapan HTTP yang sesuai terjadi, langkah berikutnya adalah menyelidiki dan mengoptimalkan skrip yang berjalan di halaman Anda. Untungnya, tab Skrip, yang akan dibahas berikutnya, melakukan hal itu.
Referensi Tambahan
Untuk informasi selengkapnya tentang Developer Tools, sebaiknya baca artikel berikut:
- Video dan slide presentasi Chrome Developer Tools dari Google I/O 2010
- Tutorial Chrome Developer Tools
Dan tentu saja, nantikan Bagian 2 artikel ini di html5rocks.com, beserta banyak konten HTML5 dan Chrome lainnya yang menarik.