Referensi fitur jaringan

Kayce Basques

Sofia Emelianova

Temukan cara baru untuk menganalisis pemuatan halaman Anda dalam referensi komprehensif fitur analisis jaringan Chrome DevTools ini.

Mencatat permintaan jaringan

Secara default, DevTools mencatat semua permintaan jaringan di panel Jaringan, selama DevTools terbuka.

Berhenti merekam permintaan jaringan

Untuk berhenti mencatat permintaan:

• Klik Stop recording network log di panel Network. Panel Jaringan akan berubah menjadi abu-abu yang menandakan bahwa DevTools tidak lagi merekam permintaan.
• Tekan Command> + E (Mac) atau Control + E (Windows, Linux) saat panel Network dalam fokus.

Menghapus permintaan

Klik Hapus di panel Jaringan untuk menghapus semua permintaan dari tabel Permintaan.

Menyimpan permintaan di seluruh pemuatan halaman

Untuk menyimpan permintaan di seluruh pemuatan halaman, centang kotak centang Preserve log di panel Network. DevTools menyimpan semua permintaan hingga Anda menonaktifkan Preserve log.

Mengambil screenshot selama pemuatan halaman

Ambil screenshot untuk menganalisis apa yang dilihat pengguna saat mereka menunggu halaman Anda dimuat.

Untuk mengaktifkan screenshot, buka Setelan di dalam panel Jaringan, lalu centang Ambil screenshot.

Muat ulang halaman saat panel Jaringan berada dalam fokus untuk mengambil screenshot.

Setelah gambar diambil, Anda dapat menindaklanjuti screenshot dengan cara berikut:

• Arahkan kursor ke screenshot untuk melihat titik pengambilan screenshot tersebut. Garis kuning akan muncul di linimasa Ringkasan.
• Klik thumbnail screenshot untuk memfilter permintaan yang terjadi setelah screenshot diambil.
• Klik dua kali thumbnail untuk memperbesar.

Putar ulang permintaan XHR

Untuk memutar ulang permintaan XHR, lakukan salah satu tindakan berikut di tabel Permintaan:

• Pilih permintaan, lalu tekan R.
• Klik kanan permintaan dan pilih Replay XHR.

Mengubah perilaku pemuatan

Mengemulasikan pengunjung kali pertama dengan menonaktifkan cache browser

Untuk mengemulasikan pengalaman pengguna kali pertama di situs Anda, centang kotak Nonaktifkan cache. DevTools menonaktifkan cache browser. Hal ini mengemulasikan pengalaman pengguna pertama kali secara lebih akurat, karena permintaan disalurkan dari cache browser pada kunjungan berulang.

Nonaktifkan cache browser dari panel samping Kondisi jaringan

Jika Anda ingin menonaktifkan cache saat bekerja di panel DevTools lain, gunakan panel samping Kondisi jaringan.

1. Klik ikon untuk membuka panel samping Kondisi Jaringan.
2. Centang atau hapus centang pada kotak Disable cache.

Menghapus cache browser secara manual

Untuk menghapus cache browser secara manual, klik kanan di mana saja di tabel Permintaan dan pilih Hapus cache browser.

Emulasikan offline

Ada kelas baru aplikasi web, yang disebut Progressive Web App, yang dapat berfungsi secara offline dengan bantuan pekerja layanan. Saat mem-build jenis aplikasi ini, sebaiknya Anda dapat melakukan simulasi perangkat yang tidak memiliki koneksi data dengan cepat.

Untuk menyimulasikan pengalaman jaringan yang sepenuhnya offline, pilih Offline dari menu drop-down Network throttling di samping kotak centang Disable cache.

DevTools menampilkan ikon peringatan di samping tab Jaringan untuk mengingatkan Anda bahwa mode offline diaktifkan.

Mengemulasi koneksi jaringan yang lambat

Untuk mengemulasi 4G cepat, 4G lambat, atau 3G, pilih preset yang sesuai dari menu drop-down Throttling di panel tindakan di bagian atas.

DevTools menampilkan ikon peringatan peringatan di samping panel Jaringan untuk mengingatkan Anda bahwa throttling diaktifkan.

Membuat profil throttling kustom

Selain preset, seperti 4G lambat atau cepat, Anda juga dapat menambahkan profil throttling kustom Anda sendiri:

1. Buka menu Pembatasan, lalu pilih Kustom > Tambahkan....
2. Siapkan profil throttling baru seperti yang dijelaskan di setelan Setelan > Throttling.

3. Kembali ke panel Jaringan, pilih profil baru Anda dari menu drop-down Pembatasan.

   

DevTools menampilkan ikon peringatan di samping panel Jaringan untuk mengingatkan Anda bahwa throttling diaktifkan.

Membatasi koneksi WebSocket

Selain permintaan HTTP, DevTools membatasi koneksi WebSocket sejak versi 99.

Untuk mengamati throttling WebSocket:

1. Memulai koneksi baru, misalnya, dengan menggunakan alat pengujian.
2. Di panel Network, pilih No throttling dan kirim pesan melalui koneksi.
3. Buat profil throttling kustom yang sangat lambat, misalnya, 10 kbit/s. Profil lambat seperti itu akan membantu Anda melihat perbedaannya.
4. Di panel Jaringan, pilih profil dan kirim pesan lain.
5. Aktifkan/nonaktifkan filter WS, klik nama koneksi Anda, buka tab Pesan, dan periksa perbedaan waktu antara pesan yang dikirim dan di-echokan dengan dan tanpa throttling. Contoh:

Emulasikan koneksi jaringan yang lambat dari panel samping Kondisi jaringan

Jika Anda ingin membatasi koneksi jaringan saat bekerja di panel DevTools lainnya, gunakan panel samping Kondisi jaringan.

1. Klik ikon untuk membuka panel samping Kondisi Jaringan.
2. Pilih kecepatan koneksi dari menu Pembatasan bandwidth jaringan.

Menghapus cookie browser secara manual

Untuk menghapus cookie browser secara manual kapan saja, klik kanan di mana saja pada tabel Permintaan, lalu pilih Hapus cookie browser.

Mengganti header respons HTTP

Lihat Mengganti file dan header respons HTTP secara lokal.

Mengganti agen pengguna

Untuk mengganti browser secara manual:

1. Klik ikon untuk membuka panel samping Kondisi Jaringan.
2. Hapus centang Pilih otomatis.
3. Pilih opsi agen pengguna dari menu, atau masukkan agen kustom dalam kotak.

Telusuri permintaan

Untuk melakukan penelusuran di seluruh header, payload, dan respons permintaan:

1. Tekan pintasan berikut untuk membuka tab Penelusuran di sebelah kanan:

   • Di macOS, Command + F.
   • Di Windows atau Linux, Control + F.

2. Di tab Penelusuran, masukkan kueri Anda, lalu tekan Enter. Atau, klik match_case atau regular_expression untuk mengaktifkan peka huruf besar/kecil atau ekspresi reguler.

3. Klik salah satu hasil penelusuran. Panel Jaringan menandai permintaan yang cocok dengan warna kuning. Selain itu, panel ini juga akan membuka tab Header atau Response dan menandai string yang cocok di sana, jika ada.

Untuk memuat ulang hasil penelusuran, klik muat ulang Muat ulang. Untuk menghapus hasil, klik blokir Hapus.

Untuk informasi selengkapnya tentang semua cara melakukan penelusuran di DevTools, lihat Penelusuran: Menemukan teks di semua resource yang dimuat.

Memfilter permintaan

Memfilter permintaan berdasarkan properti

Gunakan kotak Filter untuk memfilter permintaan berdasarkan properti, seperti domain atau ukuran permintaan.

Jika Anda tidak dapat melihat kotak, panel Filter mungkin tersembunyi. Lihat Menyembunyikan panel Filter.

Untuk membalik filter, centang kotak Balik di samping kotak Filter.

Anda dapat menggunakan beberapa properti secara bersamaan dengan memisahkan setiap properti menggunakan spasi. Misalnya, mime-type:image/gif larger-than:1K menampilkan semua GIF yang lebih besar dari satu kilobyte. Filter multi-properti ini setara dengan operasi AND. Operasi OR tidak didukung.

Berikutnya adalah daftar lengkap properti yang didukung.

• cookie-domain. Menampilkan resource yang menetapkan domain cookie tertentu.
• cookie-name. Tampilkan resource yang menetapkan nama cookie tertentu.
• cookie-path. Tampilkan resource yang menetapkan jalur cookie tertentu.
• cookie-value. Menampilkan resource yang menetapkan nilai cookie tertentu.
• domain. Hanya menampilkan resource dari domain yang ditentukan. Anda dapat menggunakan karakter pengganti (*) untuk menyertakan beberapa domain. Misalnya, *.com menampilkan resource dari semua nama domain yang berakhir dengan .com. DevTools menampilkan menu drop-down pelengkapan otomatis yang diisi dengan semua domain yang dijumpainya.
• has-overrides. Menampilkan permintaan yang telah mengganti content, headers, penggantian apa pun (yes), atau tidak ada penggantian (no). Anda dapat menambahkan kolom Memiliki penggantian yang sesuai ke tabel permintaan.
• has-response-header. Menampilkan resource yang berisi header respons HTTP yang ditentukan. DevTools mengisi drop-down pelengkapan otomatis dengan semua header respons yang ditemukannya.
• is. Gunakan is:running untuk menemukan resource WebSocket.
• larger-than. Menampilkan resource yang lebih besar dari ukuran yang ditentukan, dalam byte. Menetapkan nilai 1000 sama dengan menetapkan nilai 1k.
• method. Menampilkan resource yang diambil melalui jenis metode HTTP yang ditentukan. DevTools mengisi dropdown pelengkapan otomatis dengan semua metode HTTP yang dijumpainya.
• mime-type. Menampilkan resource jenis MIME yang sudah ditentukan. DevTools mengisi drop-down pelengkapan otomatis dengan semua jenis MIME yang dijumpainya.
• mixed-content. Menampilkan semua resource konten campuran (mixed-content:all) atau hanya yang ditampilkan (mixed-content:displayed).
• priority. Menampilkan resource yang tingkat prioritasnya cocok dengan nilai yang ditentukan.
• resource-type. Tampilkan resource jenis resource, misalnya gambar. DevTools mengisi drop-down pelengkapan otomatis dengan semua jenis resource yang dijumpainya.
• response-header-set-cookie. Menampilkan header Set-Cookie mentah di tab Masalah. Cookie dengan format yang salah dan header Set-Cookie yang salah akan ditandai di panel Jaringan.
• scheme. Menampilkan resource yang diambil melalui HTTP yang tidak dilindungi (scheme:http) atau HTTPS yang dilindungi (scheme:https).
• set-cookie-domain. Menampilkan resource yang memiliki header Set-Cookie dengan atribut Domain yang cocok dengan nilai yang ditentukan. DevTools mengisi pelengkapan otomatis dengan semua domain cookie yang dijumpainya.
• set-cookie-name. Menampilkan resource yang memiliki header Set-Cookie dengan nama yang cocok dengan nilai yang ditentukan. DevTools mengisi pelengkapan otomatis dengan semua nama cookie yang dijumpainya.
• set-cookie-value. Menampilkan resource yang memiliki header Set-Cookie dengan nilai yang cocok dengan nilai yang ditentukan. DevTools mengisi pelengkapan otomatis dengan semua nilai cookie yang dijumpainya.
• status-code. Hanya menampilkan resource yang kode status HTTP-nya cocok dengan kode yang ditentukan. DevTools mengisi menu drop-down pelengkapan otomatis dengan semua kode status yang ditemukannya.
• url. Menampilkan resource yang memiliki url yang cocok dengan nilai yang ditentukan.

Memfilter permintaan menurut jenis

Untuk memfilter permintaan berdasarkan jenis resource, klik tombol Semua, Pengambilan/XHR, JS, CSS, Gambar, Media, Font, Dokumen, WS (WebSocket), Wasm (WebAssembly), Manifes, atau Lainnya (jenis lainnya yang tidak tercantum di sini) di panel Jaringan.

Jika Anda tidak dapat melihat tombol ini, panel tindakan Filter mungkin tersembunyi. Lihat Menyembunyikan panel Filter.

Untuk menampilkan beberapa jenis resource secara bersamaan, tahan Command (Mac) atau Control (Windows, Linux), lalu klik beberapa filter jenis.

Memfilter permintaan menurut waktu

Tarik ke kiri atau kanan pada linimasa Ringkasan untuk hanya menampilkan permintaan yang aktif selama jangka waktu tersebut. Filter inklusif. Setiap permintaan yang aktif selama waktu yang disorot akan ditampilkan.

Menyembunyikan URL data

URL Data adalah file kecil yang disematkan ke dokumen lain. Setiap permintaan yang Anda lihat di tabel Permintaan yang dimulai dengan data: adalah URL data.

Untuk menyembunyikan permintaan ini, di panel tindakan Filters, pilih More filters > check_box Hide data URLs.

Status bar di bagian bawah menampilkan jumlah permintaan yang ditampilkan dari total permintaan.

Menyembunyikan URL ekstensi

Untuk berfokus pada kode yang Anda tulis, Anda dapat memfilter permintaan yang tidak relevan yang dikirim oleh ekstensi yang mungkin telah Anda instal di Chrome. Permintaan ekstensi memiliki URL yang diawali dengan chrome-extension://.

Untuk menyembunyikan permintaan ekstensi, di panel tindakan Filter, pilih Filter lainnya > check_box Sembunyikan URL ekstensi.

Status bar di bagian bawah menampilkan jumlah permintaan yang ditampilkan dari total permintaan.

Hanya tampilkan permintaan berisi cookie respons yang diblokir

Untuk memfilter semua kecuali permintaan dengan cookie respons yang diblokir karena alasan apa pun, di panel tindakan Filters, pilih More filters > check_box Blocked response cookies. Coba di halaman demo ini.

Status bar di bagian bawah menampilkan jumlah permintaan yang ditampilkan dari total permintaan.

Untuk mengetahui alasan cookie respons diblokir, pilih permintaan, buka tab Cookie, dan arahkan kursor ke ikon informasi info.

Selain itu, panel Jaringan menampilkan ikon peringatan peringatan di samping permintaan dengan cookie yang diblokir karena tanda atau konfigurasi Chrome. Arahkan kursor ke ikon tersebut untuk melihat tooltip dengan petunjuk, lalu klik untuk membuka panel Masalah guna mengetahui informasi selengkapnya.

Hanya tampilkan permintaan yang diblokir

Untuk memfilter semua kecuali permintaan yang diblokir, di panel tindakan Filter, pilih Filter lainnya > check_box Permintaan yang diblokir. Untuk mengujinya, Anda dapat menggunakan tab Pemblokiran permintaan jaringan di panel samping.

Tabel Permintaan menandai permintaan yang diblokir dengan warna merah. Status bar di bagian bawah menampilkan jumlah permintaan yang ditampilkan dari total permintaan.

Hanya tampilkan permintaan pihak ketiga

Untuk memfilter semua kecuali permintaan dengan origin yang berbeda dari origin halaman, di panel tindakan Filters, pilih More filters > check_box 3rd-party requests. Coba di halaman demo ini.

Status bar di bagian bawah menampilkan jumlah permintaan yang ditampilkan dari total permintaan.

Mengurutkan permintaan

Secara default, permintaan dalam tabel Permintaan diurutkan berdasarkan waktu inisiasi, tetapi Anda dapat mengurutkan tabel menggunakan kriteria lain.

Mengurutkan menurut kolom

Klik header kolom mana pun di tabel Permintaan untuk mengurutkan permintaan berdasarkan kolom tersebut.

Urutkan berdasarkan fase aktivitas

Untuk mengubah cara Waterfall mengurutkan permintaan, klik kanan header tabel Permintaan, arahkan kursor ke Waterfall, lalu pilih salah satu opsi berikut:

• Waktu Mulai. Permintaan pertama yang dimulai ada di bagian atas.
• Response Time. Permintaan pertama yang mulai mendownload ada di bagian atas.
• End Time. Permintaan pertama yang sudah selesai ada di bagian atas.
• Total Duration. Permintaan dengan penyiapan koneksi dan permintaan / respons terpendek ada di bagian atas.
• Latensi. Permintaan yang menunggu waktu tersingkat untuk mendapatkan respons ada di bagian atas.

Deskripsi ini mengasumsikan bahwa setiap opsi diberi peringkat dari yang terpendek ke yang terpanjang. Mengklik header kolom Waterfall akan membalik urutannya.

Dalam contoh ini, Waterfall diurutkan berdasarkan total durasi. Bagian yang lebih terang di setiap batang adalah waktu yang dihabiskan untuk menunggu. Bagian yang lebih gelap adalah waktu yang dihabiskan untuk mendownload byte.

Menganalisis permintaan

Selama DevTools terbuka, DevTools akan mencatat semua permintaan di panel Jaringan. Gunakan panel Jaringan untuk menganalisis permintaan.

Melihat log permintaan

Gunakan tabel Requests untuk melihat log semua permintaan yang dibuat saat DevTools terbuka. Mengklik atau mengarahkan kursor ke permintaan akan memperlihatkan informasi selengkapnya tentang permintaan tersebut.

Tabel Permintaan menampilkan kolom berikut secara default:

• Nama. Nama file resource, atau ID untuk resource tersebut.

• Status. Kolom ini dapat menampilkan nilai berikut:

  

  • Kode status HTTP, misalnya, 200 atau 404.
  • CORS error untuk permintaan gagal karena Cross-Origin Resource Sharing (CORS).
  • (blocked:origin) untuk permintaan dengan header yang salah dikonfigurasi. Arahkan kursor ke nilai status ini untuk melihat tooltip dengan petunjuk tentang masalah yang terjadi.
  • (failed) diikuti dengan pesan error.

• Jenis. Jenis MIME dari resource yang diminta.

• Pemrakarsa. Objek atau proses berikut dapat memulai permintaan:

  • Parser. Parser HTML Chrome.
  • Pengalihan. Pengalihan HTTP.
  • Skrip. Fungsi JavaScript.
  • Lainnya. Beberapa proses atau tindakan lain, seperti membuka halaman menggunakan link atau memasukkan URL di kolom URL.

• Size. Ukuran gabungan header respons ditambah isi respons, sebagaimana dikirimkan oleh server.

• Time. Durasi total, dari mulai permintaan sampai penerimaan byte terakhir dalam respons.

• Waterfall. Pengelompokan visual aktivitas setiap permintaan.

Menambah atau menghapus kolom

Klik kanan header tabel Permintaan dan pilih opsi untuk menyembunyikan atau menampilkannya. Opsi yang ditampilkan memiliki tanda centang di sampingnya.

Anda dapat menambahkan atau menghapus kolom tambahan berikut: Jalur, URL, Metode, Protokol, Skema, Domain, Alamat jarak jauh, Ruang alamat jarak jauh, Ruang alamat inisiator, Cookie, Menetapkan cookie, Prioritas, ID Koneksi, Memiliki penggantian, dan Waterfall.

Menambahkan kolom kustom

Untuk menambahkan kolom kustom ke tabel Permintaan:

1. Klik kanan header tabel Requests, lalu pilih Response Headers > Manage Header Columns.
2. Di jendela dialog, klik Add custom header, masukkan namanya, lalu klik Add.

Mengelompokkan permintaan menurut frame inline

Jika frame inline di halaman memulai banyak permintaan, Anda bisa membuat log permintaan lebih mudah dengan mengelompokkannya.

Untuk mengelompokkan permintaan berdasarkan iframe, buka Setelan di dalam panel Jaringan lalu centang check_box Kelompokkan menurut frame.

Untuk melihat permintaan yang dimulai oleh frame inline, luaskan permintaan tersebut di log permintaan.

Melihat waktu permintaan dalam kaitannya satu sama lain

Gunakan Waterfall untuk melihat waktu permintaan yang saling terkait. Secara default, Waterfall diatur berdasarkan waktu mulai permintaan. Jadi, permintaan yang ada di sisi kiri dimulai lebih awal daripada permintaan yang ada di sisi kanan.

Lihat Mengurutkan berdasarkan fase aktivitas untuk melihat berbagai cara mengurutkan Waterfall.

Menganalisis pesan koneksi WebSocket

Untuk melihat pesan koneksi WebSocket:

1. Di kolom Name pada tabel Requests, klik URL koneksi WebSocket.
2. Klik tab Pesan. Tabel menampilkan 100 pesan terakhir.

Untuk memuat ulang tabel, klik ulang nama koneksi WebSocket di kolom Name pada tabel Requests.

Tabel berisi tiga kolom:

• Data. Payload pesan. Jika berformat teks biasa, pesan akan ditampilkan di sini. Untuk opcode biner, kolom ini menampilkan nama dan kode opcode. Opcode berikut didukung: Frame Lanjutan, Frame Biner, Frame Tutup Koneksi, Frame Ping, dan Frame Pong.
• Durasi. Panjang payload pesan, dalam byte.
• Time. Waktu ketika pesan itu diterima atau dikirim.

Pesan diberi kode warna sesuai dengan jenisnya:

• Pesan teks keluar berwarna hijau terang.
• Pesan teks masuk berwarna putih.
• Opcode WebSocket berwarna kuning muda.
• Error berwarna merah muda.

Menganalisis peristiwa dalam aliran data

Untuk melihat peristiwa yang di-streaming server melalui Fetch API, EventSource API, dan XHR:

1. Rekam permintaan jaringan di halaman yang melakukan streaming peristiwa. Misalnya, buka halaman demo ini dan klik salah satu dari tiga tombol.
2. Di Network, pilih permintaan, lalu buka tab EventStream.

Untuk memfilter peristiwa, tentukan ekspresi reguler di panel filter di bagian atas tab EventStream.

Untuk menghapus daftar peristiwa yang direkam, klik blokir Hapus.

Melihat pratinjau isi respons

Untuk melihat pratinjau isi respons:

1. Klik URL permintaan, di bagian kolom Nama pada tabel Permintaan.
2. Klik tab Preview.

Tab ini sangat berguna untuk melihat gambar.

Melihat isi respons

Untuk melihat isi respons ke permintaan:

1. Klik URL permintaan, di kolom Name pada tabel Requests.
2. Klik tab Response.

Melihat header HTTP

Untuk melihat data header HTTP permintaan:

1. Klik permintaan di tabel Permintaan.
2. Buka tab Header dan scroll ke bawah ke bagian Umum, Header Respons, Header Permintaan, dan, secara opsional, Header Petunjuk Awal.

Di bagian General, DevTools menampilkan pesan status yang dapat dibaca manusia di samping kode status HTTP yang diterima.

Di bagian Header Respons, Anda dapat mengarahkan kursor ke nilai header dan mengklik tombol edit Edit untuk mengganti header respons secara lokal.

Melihat sumber header HTTP

Secara default, tab Header menampilkan nama header berdasarkan abjad. Untuk melihat nama header HTTP sesuai urutan penerimaannya:

1. Buka tab Header untuk permintaan yang Anda minati. Lihat Melihat header HTTP.
2. Klik lihat sumber, di samping bagian Header Permintaan atau Header Respons.

Peringatan header sementara

Terkadang tab Header menampilkan pesan peringatan Provisional headers are shown.... Alasannya mungkin adalah salah satu dari berikut ini:

• Permintaan tidak dikirim melalui jaringan, tetapi disajikan dari cache lokal, yang tidak menyimpan header permintaan asli. Dalam hal ini, Anda dapat menonaktifkan penyimpanan dalam cache untuk melihat header permintaan lengkap.

• Resource jaringan tidak valid. Misalnya, jalankan fetch("https://jec.fish.com/unknown-url/") di Konsol.

DevTools juga hanya dapat menampilkan header sementara karena alasan keamanan.

Melihat payload permintaan

Untuk melihat payload permintaan, yaitu parameter string kueri dan data formulir, pilih permintaan dari tabel Permintaan, lalu buka tab Payload.

Melihat sumber payload

Secara default, DevTools menampilkan payload dalam bentuk yang dapat dibaca manusia.

Untuk melihat sumber parameter string kueri dan data formulir, di tab Payload, klik lihat sumber di samping bagian Parameter String Kueri atau Data Formulir.

Melihat argumen URL yang didekode dari parameter string kueri

Guna mengaktifkan/menonaktifkan encoding URL untuk argumen, pada tab Payload, klik lihat yang didekode atau lihat URL yang dienkode.

Lihat cookie

Untuk melihat cookie yang dikirim dalam header HTTP permintaan:

1. Klik URL permintaan, di kolom Name pada tabel Requests.
2. Klik tab Cookies.

Untuk deskripsi setiap kolom, lihat Kolom.

Untuk mengubah cookie, lihat Melihat, mengedit, dan menghapus cookie.

Melihat perincian waktu permintaan

Untuk melihat perincian waktu permintaan:

1. Klik URL permintaan, di kolom Name pada tabel Requests.
2. Klik tab Timing.

Lihat Melihat pratinjau perincian waktu untuk cara yang lebih cepat mengakses data ini.

Lihat Penjelasan tahap perincian waktu untuk mengetahui informasi selengkapnya tentang setiap tahap yang Anda lihat di tab Waktu.

Melihat pratinjau perincian waktu

Untuk melihat pratinjau perincian waktu permintaan, arahkan kursor ke entri permintaan di kolom Waterfall pada tabel Permintaan.

Lihat Melihat perincian waktu permintaan untuk mengetahui cara mengakses data ini tanpa perlu mengarahkan kursor.

Penjelasan fase perincian waktu

Berikut informasi selengkapnya tentang setiap fase yang mungkin Anda lihat di tab Waktu:

• Mengantrekan. Browser mengantrekan permintaan sebelum koneksi dimulai dan saat:
  • Ada permintaan prioritas yang lebih tinggi.
  • Sudah ada enam koneksi TCP yang terbuka untuk origin ini, yang merupakan batasnya. Hanya berlaku untuk HTTP/1.0 dan HTTP/1.1.
  • Browser secara singkat mengalokasikan ruang di cache disk.
• Terhenti. Permintaan dapat terhenti setelah koneksi dimulai karena salah satu alasan yang dijelaskan di Antrean.
• DNS Lookup. Browser me-resolve alamat IP permintaan.
• Koneksi awal. Browser sedang membuat koneksi, termasuk handshake atau percobaan ulang TCP dan menegosiasikan SSL.
• Negosiasi proxy. Browser menegosiasikan permintaan dengan server proxy.
• Permintaan dikirim. Permintaan sedang dikirim.
• Persiapan ServiceWorker. Browser sedang memulai pekerja layanan.
• Permintaan ke ServiceWorker. Permintaan dikirim ke pekerja layanan.
• Menunggu (TTFB). Browser menunggu byte pertama respons. TTFB adalah singkatan dari {i>Time To First Byte<i}. Waktu ini mencakup 1 round trip latensi dan waktu yang diperlukan server untuk menyiapkan respons.
• Download Konten. Browser menerima respons, baik langsung dari jaringan maupun dari pekerja layanan. Nilai ini adalah jumlah total waktu yang dihabiskan untuk membaca isi respons. Nilai yang lebih besar dari yang diharapkan dapat menunjukkan jaringan yang lambat, atau bahwa browser sedang sibuk melakukan pekerjaan lain yang menunda respons dibaca.

Melihat inisiator dan dependensi

Untuk melihat inisiator dan dependensi permintaan, tahan Shift dan arahkan kursor ke permintaan di tabel Permintaan. DevTools mewarnai inisiator dengan warna hijau, dan dependensi dengan warna merah.

Saat tabel Permintaan diurutkan secara kronologis, permintaan hijau pertama di atas permintaan yang Anda arahkan kursor adalah inisiator dependensi. Jika ada permintaan hijau lain di atasnya, permintaan yang lebih tinggi adalah inisiator dari inisiator tersebut. Dan seterusnya.

Melihat peristiwa pemuatan

DevTools menampilkan waktu peristiwa DOMContentLoaded dan load di beberapa tempat pada panel Jaringan. Peristiwa DOMContentLoaded berwarna biru, dan peristiwa load berwarna merah.

Melihat jumlah total permintaan

Jumlah total permintaan dicantumkan di status bar di bagian bawah panel Jaringan.

Perhatian: Perhatian: Jumlah ini hanya melacak permintaan yang telah dicatat dalam log sejak DevTools dibuka. Jika permintaan lain terjadi sebelum DevTools dibuka, permintaan tersebut tidak akan dihitung.

Melihat ukuran total resource yang ditransfer dan dimuat

DevTools mencantumkan ukuran total resource yang ditransfer dan dimuat (tidak dikompresi) di status bar di bagian bawah panel Jaringan.

Perhatian: Perhatian: Jumlah ini hanya melacak permintaan yang tercatat sejak DevTools dibuka. Jika permintaan lain terjadi sebelum DevTools dibuka, permintaan tersebut tidak akan dihitung.

Lihat Melihat ukuran resource yang tidak terkompresi untuk mengetahui ukuran resource setelah browser membuka kompresinya.

Melihat pelacakan tumpukan yang menyebabkan permintaan

Saat pernyataan JavaScript menyebabkan resource diminta, arahkan kursor ke kolom Initiator untuk melihat pelacakan tumpukan yang mengarah ke permintaan.

Melihat ukuran resource yang tidak terkompresi

Periksa Setelan > Baris permintaan besar, lalu lihat nilai bawah kolom Ukuran.

Dalam contoh ini, ukuran terkompresi dokumen www.google.com yang dikirim melalui jaringan adalah 43.8 KB, sedangkan ukuran yang tidak terkompresi adalah 136 KB.

Mengekspor data permintaan

Anda dapat mengekspor atau menyalin daftar permintaan, dengan filter yang diterapkan, dalam beberapa cara yang dijelaskan berikutnya.

Menyimpan semua permintaan jaringan ke file HAR

HAR (Arsip HTTP) adalah format file yang digunakan oleh beberapa fitur sesi HTTP untuk mengekspor data yang direkam. Formatnya adalah objek JSON dengan kumpulan kolom tertentu.

Untuk mengurangi kemungkinan kebocoran informasi sensitif yang tidak disengaja, secara default Anda dapat mengekspor log jaringan "yang dibersihkan" dalam format HAR yang mengecualikan informasi sensitif seperti header Cookie, Set-Cookie, dan Authorization. Jika diperlukan, Anda juga dapat mengekspor log dengan data sensitif.

Untuk menyimpan semua permintaan jaringan ke file HAR, pilih salah satu dari dua cara berikut:

• Klik kanan permintaan apa pun di tabel Permintaan, lalu pilih Salin > Simpan semua [tercantum] sebagai HAR (dibersihkan) atau Simpan semua [tercantum] sebagai HAR (dengan data sensitif).

  

• Klik download Ekspor HAR (dibersihkan)... di panel tindakan di bagian atas panel Jaringan.

  Untuk mengekspor dengan data sensitif, pertama-tama aktifkan setelan Setelan > Preferensi > Jaringan > check_box Izinkan untuk membuat HAR dengan data sensitif, lalu klik lama tombol download Ekspor dan pilih Ekspor HAR (dengan data sensitif).

  

Setelah memiliki file HAR, Anda dapat mengimpornya kembali ke DevTools untuk analisis dengan dua cara:

• Tarik lalu lepas file HAR ke dalam tabel Permintaan.
• Klik upload Impor HAR pada panel tindakan di bagian atas panel Jaringan.

Catatan: Panel Jaringan membaca dan menampilkan pemicu untuk permintaan yang diimpor dari file HAR.

Menyalin permintaan, kumpulan permintaan yang difilter, atau semuanya ke papan klip

Di kolom Name pada tabel Requests, klik kanan permintaan, arahkan kursor ke Copy, lalu pilih salah satu opsi berikut.

Untuk menyalin satu permintaan, responsnya, atau pelacakan tumpukan:

• Salin URL. Salin URL permintaan ke papan klip.
• Salin sebagai cURL. Salin permintaan sebagai perintah cURL.
• Salin sebagai PowerShell. Salin permintaan sebagai perintah PowerShell.
• Salin sebagai ambil. Salin permintaan sebagai panggilan pengambilan.
• Salin sebagai pengambilan (Node.js). Salin permintaan sebagai panggilan pengambilan Node.js.
• Salin respons. Salin isi respons ke papan klip.
• Salin pelacakan tumpukan. Salin pelacakan tumpukan permintaan ke papan klip.

Untuk menyalin semua permintaan:

• Salin semua URL. Salin URL semua permintaan ke papan klip.
• Salin semua sebagai cURL. Salin semua permintaan sebagai rangkaian perintah cURL.
• Salin semua sebagai PowerShell. Salin semua permintaan sebagai rangkaian perintah PowerShell.
• Salin semua sebagai diambil. Menyalin semua permintaan sebagai rantai panggilan pengambilan.
• Salin semua sebagai pengambilan (Node.js). Menyalin semua permintaan sebagai rantai panggilan pengambilan Node.js.
• Salin semua sebagai HAR (dibersihkan). Menyalin semua permintaan sebagai data HAR tanpa data sensitif seperti header Cookie, Set-Cookie, dan Authorization.
• Salin semua sebagai HAR (berisi data sensitif). Salin semua permintaan sebagai data HAR dengan data sensitif.

Untuk menyalin kumpulan permintaan yang difilter, terapkan filter ke log jaringan, klik kanan permintaan, lalu pilih:

• Salin semua URL yang tercantum. Salin URL semua permintaan yang difilter ke papan klip.
• Salin semua yang tercantum sebagai cURL. Salin semua permintaan yang difilter sebagai rangkaian perintah cURL.
• Salin semua yang tercantum sebagai PowerShell. Salin semua permintaan yang difilter sebagai rangkaian perintah PowerShell.
• Salin semua yang tercantum sebagai ambil. Menyalin semua permintaan yang difilter sebagai rantai panggilan pengambilan.
• Salin semua yang tercantum sebagai pengambilan (Node.js). Salin semua permintaan yang difilter sebagai rangkaian panggilan pengambilan Node.js.
• Salin semua yang tercantum sebagai HAR (dibersihkan). Salin semua permintaan yang difilter sebagai data HAR tanpa data sensitif seperti header Cookie, Set-Cookie, dan Authorization.
• Salin semua yang tercantum sebagai HAR (berisi data sensitif). Salin semua permintaan yang difilter sebagai data HAR dengan data sensitif.

Mengubah tata letak panel Jaringan

Luaskan atau ciutkan bagian dari UI panel Jaringan untuk berfokus pada hal yang penting bagi Anda.

Menyembunyikan panel tindakan Filter

Secara default, DevTools menampilkan Panel filter di bagian atas panel Jaringan. Klik filter_alt Filter untuk menyembunyikannya.

Menggunakan baris permintaan besar

Gunakan baris besar jika Anda ingin lebih banyak spasi kosong di tabel permintaan jaringan. Beberapa kolom juga menyediakan lebih banyak informasi saat menggunakan baris besar. Misalnya, nilai bawah kolom Size adalah ukuran permintaan yang tidak dikompresi dan kolom Priority menunjukkan prioritas pengambilan awal (nilai bawah) dan akhir (nilai atas).

Buka Setelan , lalu klik Baris permintaan besar untuk melihat baris besar.

Menyembunyikan trek Ringkasan

Secara default, DevTools menampilkan jalur Ringkasan. Buka Setelan dan hapus centang pada kotak Tampilkan ringkasan untuk menyembunyikannya.