Memeriksa aktivitas jaringan

Berikut adalah tutorial interaktif untuk beberapa fitur DevTools yang paling sering digunakan terkait dengan pemeriksaan aktivitas jaringan halaman.

Lihat Referensi Jaringan jika Anda hanya ingin menjelajahi fitur.

Lanjutkan membaca, atau tonton versi video tutorial ini:

Kapan harus menggunakan panel Jaringan

Secara umum, gunakan panel Network saat Anda perlu memastikan bahwa resource sedang didownload atau diupload seperti yang diharapkan. Kasus penggunaan paling umum untuk panel Jaringan adalah:

• Memastikan bahwa resource benar-benar diupload atau didownload.
• Memeriksa properti resource individual, seperti header HTTP, konten, ukuran, dan sebagainya.

Jika Anda mencari cara untuk meningkatkan performa pemuatan halaman, jangan memulai dengan panel Jaringan. Ada banyak jenis masalah performa pemuatan yang tidak terkait dengan aktivitas jaringan. Mulai dengan panel Lighthouse karena panel ini memberikan saran bertarget tentang cara meningkatkan halaman Anda. Lihat Mengoptimalkan Kecepatan Situs.

Membuka panel Jaringan

Untuk mendapatkan hasil maksimal dari tutorial ini, buka demo dan coba fitur di halaman demo.

1. Buka Demo Memulai.

   

   Gambar 1. Demo

   Anda mungkin lebih memilih untuk memindahkan demo ke jendela terpisah.

   

   Gambar 2. Demo di satu jendela dan tutorial ini di jendela lain

2. Buka DevTools dengan menekan Control+Shift+J atau Command+Option+J (Mac). Panel Konsol akan terbuka.

   

   Gambar 3. Console

   Anda mungkin lebih memilih untuk memasang DevTools ke bagian bawah jendela.

   

   Gambar 4. DevTools dipasang ke bagian bawah jendela

3. Klik tab Network Panel Jaringan akan terbuka.

   

   Gambar 5. DevTools dipasang ke bagian bawah jendela

Saat ini panel Jaringan kosong. Hal itu karena DevTools hanya mencatat aktivitas jaringan saat dibuka dan tidak ada aktivitas jaringan yang terjadi sejak Anda membuka DevTools.

Log aktivitas jaringan

Untuk melihat aktivitas jaringan yang disebabkan oleh halaman:

1. Muat ulang halaman. Panel Jaringan mencatat semua aktivitas jaringan ke dalam log di Log Jaringan.

   

   Gambar 6. Log Jaringan

   Setiap baris Log Jaringan mewakili satu resource. Secara default, resource dicantumkan secara kronologis. Resource teratas biasanya merupakan dokumen HTML utama. Resource bawah adalah resource yang diminta terakhir.

   Setiap kolom mewakili informasi tentang resource. Gambar 6 menunjukkan kolom default:

   • Status. Kode respons HTTP.
   • Jenis. Jenis resource.
   • Inisiator. Penyebab permintaan resource. Mengklik link di kolom Inisiator akan mengarahkan Anda ke kode sumber yang menyebabkan permintaan.
   • Time. Waktu permintaan berlangsung.

   • Waterfall. Representasi grafis dari berbagai tahap permintaan. Arahkan kursor ke {i>Waterfall<i} untuk melihat perinciannya.

2. Selama Anda membuka DevTools, DevTools akan merekam aktivitas jaringan di Log Jaringan. Untuk mendemonstrasikan ini, pertama-tama lihat bagian bawah Log Jaringan dan buat catatan mental tentang aktivitas terakhir.

3. Sekarang, klik tombol Dapatkan Data di demo.

4. Lihat lagi bagian bawah Log Jaringan. Ada resource baru bernama getstarted.json. Mengklik tombol Dapatkan Data menyebabkan halaman meminta file ini.

   

   Gambar 7. Resource baru di Log Jaringan

Tampilkan informasi selengkapnya

Kolom Log Jaringan dapat dikonfigurasi. Anda dapat menyembunyikan kolom yang tidak digunakan. Ada juga banyak kolom yang disembunyikan secara default yang mungkin berguna bagi Anda.

1. Klik kanan header tabel Log Jaringan lalu pilih Domain. Domain setiap resource kini ditampilkan.

   

   Gambar 8. Mengaktifkan kolom Domain

Menyimulasikan koneksi jaringan yang lebih lambat

Koneksi jaringan komputer yang Anda gunakan untuk membuat situs mungkin lebih cepat daripada koneksi jaringan perangkat seluler pengguna Anda. Dengan membatasi halaman, Anda bisa mendapatkan gambaran yang lebih baik tentang lamanya waktu yang diperlukan untuk memuat halaman di perangkat seluler.

1. Klik menu dropdown Throttling, yang ditetapkan ke Online secara default.

   

   Gambar 9. Mengaktifkan throttling

2. Pilih 3G lambat.

   

   Gambar 10. Memilih 3G Lambat

3. Tekan lama Reload , lalu pilih Empty Cache And Hard Reload.

   

   Gambar 11. Kosongkan Cache dan Muat Ulang Keras

   Pada kunjungan berulang, browser biasanya menyalurkan beberapa file dari cache, sehingga mempercepat pemuatan halaman. Empty Cache dan Hard Reload memaksa browser masuk ke jaringan untuk semua resource. Informasi ini berguna jika Anda ingin melihat pengalaman pengunjung kali pertama saat pemuatan halaman.

Mengambil screenshot

Screenshot memungkinkan Anda melihat tampilan halaman dari waktu ke waktu saat dimuat.

1. Klik Capture Screenshots .

2. Muat ulang halaman melalui alur kerja Empty Cache dan Hard Reload. Lihat Menyimulasikan koneksi yang lebih lambat jika Anda memerlukan pengingat tentang cara melakukannya. Panel Screenshot menyediakan thumbnail yang menunjukkan tampilan halaman di berbagai titik selama proses pemuatan.

   

   Gambar 12. Screenshot pemuatan halaman

3. Klik thumbnail pertama. DevTools menunjukkan aktivitas jaringan yang terjadi pada saat tersebut.

   

   Gamabar 13. Aktivitas jaringan yang terjadi selama screenshot pertama

4. Klik Capture Screenshots lagi untuk menutup panel Screenshots.

5. Muat ulang halaman tersebut.

Memeriksa detail resource

Klik referensi untuk mempelajari informasinya lebih lanjut. Coba sekarang:

1. Klik getstarted.html. Tab Headers akan ditampilkan. Gunakan tab ini untuk memeriksa header HTTP.

   

   Gambar 14. Tab Header

2. Klik tab Preview. Rendering dasar HTML ditampilkan.

   

   Gambar 15. Tab Pratinjau

   Tab ini berguna ketika API menampilkan kode error dalam HTML sehingga lebih mudah untuk membaca HTML yang dirender daripada kode sumber HTML, atau saat memeriksa gambar.

3. Klik tab Response. Kode sumber HTML ditampilkan.

   

   Gambar 16. Tab Respons

4. Klik tab Waktu. Perincian aktivitas jaringan untuk resource ini ditampilkan.

   

   Gambar 17. Tab Waktu

5. Klik Close untuk melihat Network Log lagi.

   

   Gambar 18. Tombol Tutup

Header dan respons jaringan penelusuran

Gunakan panel Search saat Anda perlu menelusuri header HTTP dan respons semua resource untuk menemukan string atau ekspresi reguler tertentu.

Misalnya, Anda ingin memeriksa apakah resource menggunakan kebijakan cache yang wajar.

1. Klik Telusuri . Panel Search akan terbuka di sebelah kiri log Network.

   

   Gambar 19. Panel Penelusuran

2. Ketik Cache-Control, lalu tekan Enter. Panel Penelusuran mencantumkan semua instance Cache-Control yang ditemukannya di header atau konten resource.

   

   Gambar 20. Hasil penelusuran untuk Cache-Control

3. Klik hasil untuk melihatnya. Jika kueri ditemukan di header, tab Header akan terbuka. Jika kueri ditemukan dalam konten, tab Respons akan terbuka.

   

   Gambar 21. Hasil penelusuran ditandai di tab Header

4. Tutup panel Telusuri dan tab Waktu.

   

   Gambar 22. Tombol Tutup

Memfilter resource

DevTools menyediakan banyak alur kerja untuk memfilter resource yang tidak relevan dengan tugas yang sedang digunakan.

Gambar 23. Toolbar Filter

Toolbar Filter seharusnya diaktifkan secara default. Jika tidak:

1. Klik Filter untuk menampilkannya.

Filter menurut string, ekspresi reguler, atau properti

Kotak teks Filter mendukung berbagai jenis pemfilteran.

1. Ketikkan png di dalam kotak teks Filter. Hanya file yang berisi teks png yang ditampilkan. Dalam hal ini, satu-satunya file yang cocok dengan filter adalah gambar PNG.

   

   Gambar 24. Filter string

2. Ketik /.*\.[cj]s+$/. DevTools memfilter resource dengan nama file yang tidak diakhiri dengan j atau c, diikuti dengan 1 atau beberapa karakter s.

   

   Gambar 25. Filter ekspresi reguler

3. Ketik -main.css. DevTools memfilter main.css. Jika ada file lain yang cocok dengan polanya, file-file itu juga akan difilter.

   

   Gambar 26. Filter negatif

4. Ketikkan domain:raw.githubusercontent.com di dalam kotak teks Filter. DevTools memfilter resource apa pun dengan URL yang tidak cocok dengan domain ini.

   

   Gambar 27. Filter properti

   Lihat Memfilter permintaan menurut properti untuk mengetahui daftar lengkap properti yang dapat difilter.

5. Kosongkan kotak teks Filter dari teks mana pun.

Filter menurut jenis resource

Untuk berfokus pada jenis file tertentu, seperti stylesheet:

1. Klik CSS. Semua jenis file lainnya difilter.

   

   Gambar 28. Hanya menampilkan file CSS

2. Untuk melihat skrip juga, tahan tombol Control atau Command (Mac), lalu klik JS.

   

   Gambar 29. Hanya menampilkan file CSS dan JS

3. Klik Semua untuk menghapus filter dan melihat semua resource lagi.

Lihat Memfilter permintaan untuk alur kerja pemfilteran lainnya.

Blokir permintaan

Bagaimana tampilan dan perilaku halaman saat beberapa resource-nya tidak tersedia? Apakah aplikasi benar-benar gagal, atau masih berfungsi? Blokir permintaan untuk mengetahui:

1. Tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Command.

   

   Gambar 30. Menu Perintah

2. Ketik block, pilih Show Request Blocking, lalu tekan Enter.

   

   Gambar 31. Tampilkan Pemblokiran Permintaan

3. Klik Add Pattern .

4. Ketik main.css.

   

   Gambar 32. Memblokir main.css

5. Klik Tambahkan.

6. Muat ulang halaman. Seperti yang diharapkan, gaya halaman sedikit berantakan karena stylesheet utamanya telah diblokir. Catat baris main.css di Log Jaringan. Teks merah berarti resource diblokir.

   

   Gambar 33. main.css telah diblokir

7. Hapus centang pada kotak Aktifkan pemblokiran permintaan.

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial. Klik Berikan Penghargaan untuk menerima penghargaan Anda.

Lihat Referensi Jaringan untuk menemukan fitur DevTools lainnya yang terkait dengan pemeriksaan aktivitas jaringan.