Panduan ini mengajarkan cara menggunakan Chrome DevTools untuk melihat resource halaman web. Resource adalah file yang diperlukan halaman agar dapat ditampilkan dengan benar. Contoh resource meliputi file CSS, JavaScript, dan HTML, serta gambar.
Panduan ini mengasumsikan bahwa Anda telah memahami dasar-dasar pengembangan web dan Chrome DevTools.
Buka referensi
Jika Anda mengetahui nama resource yang ingin diperiksa, Menu Command akan 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
Menampilkan resource di panel Jaringan dari panel lain
Bagian Jelajahi resource di bawah menunjukkan cara melihat resource dari berbagai bagian UI DevTools. Jika ingin memeriksa resource di panel Network, klik kanan resource, lalu pilih Reveal in Network panel.
Gambar 4. Opsi Buka di panel Jaringan
Lihat fasilitas
Menjelajahi resource di panel Network
Lihat Mencatat aktivitas jaringan ke dalam log.
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 Halaman akan terbuka.
Gambar 6. Panel Page
Berikut rincian item yang tidak jelas dalam Gambar 6:
- top adalah konteks penjelajahan dokumen utama.
- airhorner.com mewakili domain. Semua resource bertingkat di dalamnya berasal dari domain tersebut.
Misalnya, URL lengkap file comlink.global.js mungkin adalah
https://airhorner.com/scripts/comlink.global.js. - scripts adalah direktori.
- (indeks) adalah dokumen HTML utama.
- iu3 adalah konteks penjelajahan lainnya. Konteks ini mungkin dibuat oleh elemen
<iframe>yang disematkan dalam HTML dokumen utama. - sw.js adalah konteks eksekusi pekerja layanan.
Klik resource untuk melihatnya di Editor.
Gambar 7. Melihat file di Editor
Telusuri menurut nama file
Secara default, panel Halaman mengelompokkan resource berdasarkan direktori. Untuk menonaktifkan pengelompokan ini dan melihat resource setiap domain sebagai daftar tetap:
- Buka panel Halaman. Lihat Jelajahi berdasarkan direktori.
Klik More Options
, lalu nonaktifkan Group By Folder.
Gambar 8. Opsi Group By Folder
Resource diatur menurut jenis file. 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 Frames.
Gambar 11. Panel Frames
Luaskan bagian yang Anda minati.
Klik sumber daya untuk melihatnya.
Gambar 11. Melihat resource di panel Application
Mencari file menurut jenis di panel Jaringan
Lihat Memfilter menurut jenis resource.
Gambar 12. Pemfilteran untuk CSS di Log Jaringan