Panduan ini mengajarkan cara menggunakan Chrome DevTools untuk melihat resource halaman web. Resource adalah file yang dibutuhkan halaman agar ditampilkan dengan benar. Contoh resource mencakup file CSS, JavaScript, dan HTML, serta gambar.
Panduan ini mengasumsikan bahwa Anda telah memahami dasar-dasar pengembangan web dan Chrome DevTools.
Buka materi
Jika Anda mengetahui nama resource yang ingin diperiksa, Menu Perintah menyediakan cara cepat untuk membuka resource.
Tekan Control+P atau Command+P (Mac). Dialog Open File akan terbuka.
Gambar 1. Dialog Open File
Pilih file dari menu dropdown, atau mulai ketik nama file, lalu tekan Enter setelah file yang benar ditandai di kotak pelengkapan otomatis.
Gambar 2. Mengetik nama file dalam dialog Open File
Membuka resource di panel Jaringan
Lihat Memeriksa detail resource.
Gambar 3. Memeriksa resource di panel Network
Buka resource di panel Jaringan dari panel lain
Bagian Jelajahi resource di bawah ini menunjukkan cara menampilkan resource dari berbagai bagian UI DevTools. Jika Anda ingin memeriksa resource di panel Network, klik kanan resource, lalu pilih Reveal in Network panel.
Gambar 4. Opsi Pengungkapan di panel Jaringan
Lihat fasilitas
Menjelajahi resource di panel Jaringan
Lihat Mencatat aktivitas jaringan.
Gambar 5. Resource halaman di Log Jaringan
Jelajahi menurut direktori
Untuk melihat resource halaman yang diatur berdasarkan direktori:
- Klik tab Sources untuk membuka panel Sources.
Klik tab Halaman untuk menampilkan resource halaman. Panel Page akan terbuka.
Gambar 6. Panel Page
Berikut adalah perincian item yang tidak jelas di Gambar 6:
- atas adalah dokumen utama konteks penjelajahan.
- airhorner.com mewakili domain. Semua resource yang ada di bawahnya berasal dari domain tersebut.
Misalnya, URL lengkap file comlink.global.js mungkin adalah
https://airhorner.com/scripts/comlink.global.js. - scripts adalah direktori.
- (index) adalah dokumen HTML utama.
- iu3 adalah konteks penjelajahan lainnya. Konteks ini mungkin dibuat oleh elemen
<iframe>yang disematkan di HTML dokumen utama. - sw.js adalah konteks eksekusi pekerja layanan.
Klik resource untuk melihatnya di Editor.
Gambar 7. Melihat file di Editor
Cari menurut nama file
Secara default, panel Page mengelompokkan resource menurut direktori. Untuk menonaktifkan pengelompokan ini dan melihat resource setiap domain sebagai daftar datar:
- Buka panel Page. Lihat Jelajahi menurut direktori.
Klik More Options
dan
nonaktifkan Group By Folder.
Gambar 8. Opsi Group By Folder
Resource diatur menurut jenis file. Di dalam setiap jenis file, resource diatur menurut abjad.
Gambar 9. Panel Page setelah menonaktifkan Group By Folder
Cari menurut jenis file
Untuk mengelompokkan resource berdasarkan jenis filenya:
Klik tab Application. Panel Application akan terbuka. Secara default, panel Manifest biasanya akan terbuka terlebih dahulu.
Gambar 10. Panel Application
Scroll ke bawah ke panel Frame.
Gambar 11. Panel Frame
Luaskan bagian yang Anda minati.
Klik sumber daya untuk melihatnya.
Gambar 11. Melihat resource di panel Application
Jelajahi file menurut jenis di panel Jaringan
Lihat Memfilter menurut jenis resource.
Gambar 12. Memfilter CSS di Log Jaringan