Referensi fitur jaringan

Kayce Basques

Sofia Emelianova

Temukan cara baru untuk menganalisis bagaimana halaman Anda dimuat 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 mencatat permintaan jaringan

Untuk berhenti mencatat permintaan:

• Klik Stop recording network log di panel Network. Warnanya abu-abu untuk menunjukkan bahwa DevTools tidak lagi merekam permintaan.
• Tekan Command> + E (Mac) atau Control + E (Windows, Linux) saat panel Network berada dalam fokus.

Hapus permintaan

Klik Clear di panel Network untuk menghapus semua permintaan dari tabel Requests.

Simpan permintaan di seluruh pemuatan halaman

Untuk menyimpan permintaan di seluruh pemuatan halaman, centang kotak Pertahankan log di panel Jaringan. DevTools menyimpan semua permintaan hingga Anda menonaktifkan Pertahankan 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 sedang difokuskan untuk mengambil screenshot.

Setelah diambil, Anda dapat berinteraksi dengan screenshot dengan cara berikut:

• Arahkan kursor ke screenshot untuk melihat titik saat screenshot tersebut diambil. Garis kuning akan muncul di panel Overview.
• Klik thumbnail screenshot untuk memfilter permintaan apa pun yang terjadi setelah screenshot diambil.
• Klik dua kali thumbnail untuk memperbesarnya.

Memutar ulang permintaan XHR

Untuk memutar ulang permintaan XHR, lakukan salah satu hal berikut di tabel Requests:

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

Mengubah perilaku pemuatan

Mengemulasi pengunjung kali pertama dengan menonaktifkan cache browser

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

Menonaktifkan 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 Network Conditions.
2. Centang atau hapus centang pada kotak Disable cache.

Menghapus cache browser secara manual

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

Emulasi secara offline

Terdapat 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 menyimulasikan dengan cepat perangkat yang tidak memiliki koneksi data.

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.

Emulasi koneksi jaringan yang lambat

Untuk mengemulasikan 3G lambat, 3G cepat, dan kecepatan koneksi lainnya, pilih opsi yang sesuai dari menu Throttling.

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

Membuat profil throttling kustom

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

1. Buka menu Throttling lalu pilih Custom > Add....
2. Siapkan profil throttling baru seperti yang dijelaskan di Setelan > Throttling.

3. Kembali ke panel Network, pilih profil baru dari menu drop-down Throttling.

   

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. Mulai koneksi baru, misalnya, dengan menggunakan alat pengujian.
2. Di panel Network, pilih No throttling, lalu kirim pesan melalui koneksi.
3. Buat profil throttling kustom yang sangat lambat, misalnya, 10 kbit/s. Profil yang lambat seperti itu akan membantu Anda melihat perbedaannya.
4. Di panel Jaringan, pilih profil, lalu kirim pesan lain.
5. Aktifkan filter WS, klik nama koneksi, buka tab Pesan, lalu periksa perbedaan waktu antara pesan terkirim dan yang digemakan dengan dan tanpa throttling. Contoh:

Mengemulasi koneksi jaringan yang lambat dari panel samping Kondisi jaringan

Jika Anda ingin membatasi koneksi jaringan saat bekerja di panel DevTools lain, gunakan panel samping Network conditions.

1. Klik ikon untuk membuka panel samping Network Conditions.
2. Pilih kecepatan koneksi dari menu Network throttling.

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 agen pengguna secara manual:

1. Klik ikon untuk membuka panel samping Network Conditions.
2. Hapus centang Pilih otomatis.
3. Pilih opsi agen pengguna dari menu, atau masukkan opsi khusus di kotak.

Filter permintaan

Filter permintaan berdasarkan properti

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

Jika Anda tidak dapat melihat kotak itu, 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 berukuran lebih dari satu kilobyte. Filter multi-properti ini setara dengan operasi AND. Operasi OR tidak didukung.

Berikutnya adalah daftar lengkap properti yang didukung.

• cookie-domain. Tampilkan resource yang menetapkan domain cookie tertentu.
• cookie-name. Menampilkan resource yang menetapkan nama cookie tertentu.
• cookie-path. Menampilkan resource yang menetapkan jalur cookie tertentu.
• cookie-value. Tampilkan 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 berakhiran .com. DevTools menampilkan pengisian menu drop-down pelengkapan otomatis dengan semua domain yang dijumpainya.
• has-overrides. Tampilkan permintaan yang telah mengganti content, headers, penggantian apa pun (yes), atau tanpa 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 dihadapinya.
• 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 tertentu. DevTools mengisi menu drop-down pelengkapan otomatis dengan semua metode HTTP yang dijumpainya.
• mime-type. Menampilkan resource dari jenis MIME yang 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. Menampilkan resource dari jenis resource, misalnya gambar. DevTools mengisi menu drop-down pelengkapan otomatis dengan semua jenis resource yang dijumpainya.
• response-header-set-cookie. Tampilkan header Set-Cookie mentah di tab Masalah. Cookie yang salah format dengan 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 ditemukannya.
• 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 ditemukannya.
• 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 dijumpainya.
• url. Menampilkan resource yang memiliki url yang cocok dengan nilai yang ditentukan.

Filter permintaan menurut jenis

Untuk memfilter permintaan berdasarkan jenis permintaan, klik tombol All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest, atau Other (jenis lain yang tidak tercantum di sini) pada panel Network.

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

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

Filter permintaan menurut waktu

Tarik ke kiri atau kanan di panel Overview untuk hanya menampilkan permintaan yang aktif selama jangka waktu tersebut. Filter inklusif. Setiap permintaan yang aktif selama waktu yang ditandai akan ditampilkan.

Sembunyikan URL data

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

Untuk menyembunyikan permintaan ini, centang Sembunyikan URL data.

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

Sembunyikan URL ekstensi

Untuk berfokus pada kode yang Anda tulis, Anda dapat memfilter permintaan 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, centang 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 semuanya kecuali permintaan dengan cookie respons yang diblokir karena alasan apa pun, centang Cookie respons yang diblokir. Coba di halaman demo ini.

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

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

Selain itu, panel Jaringan menampilkan ikon peringatan peringatan di sebelah permintaan yang terpengaruh oleh penghapusan cookie pihak ketiga atau dikecualikan dari permintaan tersebut. Arahkan kursor ke ikon untuk melihat tooltip dengan petunjuk lalu klik untuk membuka panel Masalah untuk mengetahui informasi selengkapnya.

Hanya tampilkan permintaan yang diblokir

Untuk memfilter semuanya kecuali permintaan yang diblokir, periksa Permintaan yang diblokir. Untuk mengujinya, Anda dapat menggunakan tab panel samping Pemblokiran permintaan jaringan.

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 semuanya kecuali permintaan dengan origin yang berbeda dari origin halaman, periksa permintaan pihak ketiga. Coba di halaman demo ini.

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

Permintaan pengurutan

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

Urutkan menurut kolom

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

Mengurutkan berdasarkan fase aktivitas

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

• Waktu Mulai. Permintaan pertama yang dimulai ada di bagian atas.
• Waktu Respons. Permintaan pertama yang memulai download ada di bagian atas.
• Waktu Berakhir. Permintaan pertama yang sudah selesai ada di bagian atas.
• Total Durasi. Permintaan dengan penyiapan koneksi terpendek dan permintaan / respons 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 urutan.

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 terbuka, DevTools akan mencatat semua permintaan di panel Jaringan. Gunakan panel Network untuk menganalisis permintaan.

Melihat log permintaan

Gunakan tabel Requests untuk melihat log semua permintaan yang dibuat saat DevTools telah terbuka. Mengklik atau mengarahkan kursor ke permintaan akan menampilkan informasi lebih lanjut tentang permintaan tersebut.

Tabel Permintaan menampilkan kolom berikut secara default:

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

• Status. Kolom ini dapat menampilkan nilai berikut:

  

  • Kode status HTTP, misalnya, 200 atau 404.
  • CORS error untuk permintaan yang 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 berisi petunjuk tentang masalah yang terjadi.
  • (failed) diikuti dengan pesan error.

• Jenis. Jenis MIME resource yang diminta.

• Inisiator. Objek atau proses berikut dapat memulai permintaan:

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

• Size. Ukuran gabungan header respons dan isi respons, seperti yang dikirim oleh server.

• Time. Durasi total, dari awal permintaan hingga penerimaan byte terakhir dalam respons.

• Waterfall. Perincian visual setiap aktivitas permintaan.

Menambahkan atau menghapus kolom

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

Anda dapat menambahkan atau menghapus kolom tambahan berikut: Path, URL, Method, Protocol, Scheme, Domain, Remote address, Remote address space, Initiator address space, Cookies, Set cookies, Priority, Connection ID, dan Has override.

Tambahkan 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 berdasarkan frame inline

Jika frame inline pada halaman memulai banyak permintaan, Anda dapat membuat log permintaan lebih ramah dengan mengelompokkannya.

Untuk mengelompokkan permintaan berdasarkan iframe, buka Settings di dalam panel Network, lalu centang Group by frame.

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

Melihat waktu permintaan yang saling terkait

Gunakan Waterfall untuk melihat waktu permintaan yang saling terkait. Secara default, Waterfall diatur berdasarkan waktu mulai permintaan. Jadi, permintaan yang letaknya paling kiri dimulai lebih awal daripada permintaan yang jauh ke kanan.

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

Menganalisis pesan koneksi WebSocket

Untuk melihat pesan koneksi WebSocket:

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

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

Tabel ini berisi tiga kolom:

• Data. Payload pesan. Jika berupa 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 saat pesan diterima atau dikirim.

Pesan diberi kode warna sesuai dengan jenisnya:

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

Menganalisis peristiwa dalam aliran data

Untuk melihat peristiwa yang mengalirkan server melalui Fetch API, EventSource API, dan XHR:

1. Mencatat permintaan jaringan di halaman yang mengalirkan peristiwa. Misalnya, buka halaman demo ini dan klik salah satu dari tiga tombol.
2. Di Jaringan, pilih permintaan dan buka tab EventStream.

Untuk memfilter peristiwa, tentukan ekspresi reguler dalam 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 bawah kolom Nama pada tabel Permintaan.
2. Klik tab Preview.

Tab ini sangat berguna untuk melihat gambar.

Melihat isi respons

Untuk melihat isi respons terhadap permintaan:

1. Klik URL permintaan, di bawah kolom Nama pada tabel Permintaan.
2. Klik tab Response.

Lihat header HTTP

Untuk menampilkan data header HTTP permintaan:

1. Klik permintaan di tabel Permintaan.
2. Buka tab Header dan scroll ke bawah ke bagian General, Response Headers, atau Request Headers.

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 untuk mengganti header respons secara lokal.

Lihat sumber header HTTP

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

1. Buka tab Header untuk permintaan yang Anda minati. Baca bagian Melihat header HTTP.
2. Klik view source, di samping bagian Request Header atau Response Header.

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 disalurkan dari cache lokal, yang tidak menyimpan header permintaan asli. Dalam hal ini, Anda dapat menonaktifkan penyimpanan 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.

Lihat payload permintaan

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

Lihat sumber payload

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

Untuk melihat sumber parameter string kueri dan data formulir, pada tab Payload, klik view source di samping bagian Query String Parameters atau Form Data.

Lihat argumen yang didekode URL dari parameter string kueri

Untuk mengaktifkan/menonaktifkan encoding URL untuk argumen, pada tab Payload, klik view decoded atau view URL- mengenkode.

Lihat cookie

Untuk melihat cookie yang dikirim dalam header HTTP permintaan:

1. Klik URL permintaan, di bawah kolom Nama pada tabel Permintaan.
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 bawah kolom Nama pada tabel Permintaan.
2. Klik tab Waktu.

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

Lihat Penjelasan fase perincian waktu untuk mengetahui informasi selengkapnya tentang setiap fase yang mungkin 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.

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

Penjelasan fase perincian waktu

Berikut informasi selengkapnya tentang setiap tahap yang dapat Anda lihat di tab Waktu:

• Mengantre. Browser akan mengantrekan permintaan sebelum koneksi dimulai dan saat:
  • Ada permintaan prioritas yang lebih tinggi.
  • Sudah ada enam koneksi TCP yang terbuka untuk asal 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 dalam Antrean.
• Pencarian DNS. Browser menyelesaikan masalah alamat IP permintaan.
• Koneksi awal. Browser sedang membuat koneksi, termasuk handshake TCP atau mencoba ulang 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 dari respons. TTFB adalah singkatan dari {i>Time To First Byte<i}. Waktu ini mencakup 1 kali round trip latensi dan waktu yang dibutuhkan server untuk menyiapkan respons.
• Download Konten. Browser menerima respons, baik secara 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 mengindikasikan jaringan yang lambat, atau browser sedang sibuk melakukan pekerjaan lain yang menunda pembacaan respons.

Melihat inisiator dan dependensi

Untuk melihat inisiator dan dependensi permintaan, tahan tombol Shift dan arahkan kursor ke permintaan dalam tabel Permintaan. DevTools inisiator warna hijau, dan dependensi berwarna 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 tersebut adalah inisiator inisiator. Dan seterusnya.

Lihat 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 tercantum di panel Summary di bagian bawah panel Network.

Perhatian: Perhatian: Angka ini hanya melacak permintaan yang telah dicatat 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 total ukuran resource yang ditransfer dan dimuat (tidak dikompresi) di panel Summary, di bagian bawah panel Network.

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

Lihat Melihat ukuran resource yang tidak dikompresi untuk mengetahui seberapa besar ukuran resource setelah browser membuka kompresinya.

Melihat pelacakan tumpukan yang menyebabkan permintaan

Saat pernyataan JavaScript menyebabkan resource diminta, arahkan kursor ke kolom Inisiator untuk melihat stack trace yang mengarah ke permintaan tersebut.

Melihat ukuran resource yang tidak dikompresi

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 dikompresi adalah 136 KB.

Mengekspor data permintaan

Menyimpan semua permintaan jaringan ke file HAR

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

Anda bisa menyimpan semua permintaan jaringan ke file HAR dengan dua cara:

• Klik kanan permintaan apa pun di tabel Requests, lalu pilih Save all as HAR with content.
• Klik Ekspor HAR pada panel tindakan di bagian atas panel Jaringan.

Catatan: DevTools mengekspor semua permintaan yang terjadi sejak Anda membuka DevTools ke file HAR. Anda tidak dapat memfilter permintaan untuk diekspor. Untuk menyimpan satu permintaan, lihat Menyalin satu atau beberapa permintaan ke papan klip.

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

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

Catatan: Panel Network membaca dan menampilkan inisiator untuk permintaan yang diimpor dari file HAR.

Menyalin satu atau beberapa permintaan ke papan klip

Di bawah kolom Name pada tabel Requests, klik kanan permintaan, arahkan kursor ke Copy, dan pilih salah satu opsi berikut:

• 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 pengambilan. Menyalin permintaan sebagai panggilan pengambilan.

• Salin sebagai pengambilan Node.js. Salin permintaan sebagai panggilan ambil Node.js.

  ---

• Salin respons. Salin isi respons ke papan klip.

  ---

• 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. Menyalin semua permintaan sebagai rantai perintah PowerShell.

• Salin semua sebagai pengambilan. Menyalin semua permintaan sebagai rantai panggilan pengambilan.

• Salin semua sebagai pengambilan Node.js. Salin semua permintaan sebagai rantai panggilan pengambilan Node.js.

• Salin semua sebagai HAR. Salin semua permintaan sebagai data HAR.

Mengubah tata letak panel Jaringan

Luaskan atau ciutkan bagian dari UI panel Network untuk fokus pada hal yang penting bagi Anda.

Menyembunyikan panel Filter

Secara default, DevTools menampilkan panel Filter. Klik Filter untuk menyembunyikannya.

Menggunakan baris permintaan besar

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

Buka Setelan dan klik Baris permintaan besar untuk melihat baris besar.

Sembunyikan trek Ringkasan

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