Referensi fitur jaringan

Kayce Basques

Sofia Emelianova

Temukan cara baru untuk menganalisis bagaimana halaman Anda dimuat dalam referensi lengkap Chrome DevTools ini fitur analisis jaringan.

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 jaringan log di panel Jaringan. Panel berubah menjadi abu-abu yang menunjukkan bahwa DevTools tidak lagi mencatat permintaan.
• Tekan Command> + E (Mac) atau Control + E (Windows, Linux) saat panel Network berada dalam fokus.

Hapus 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 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 berada dalam fokus untuk mengambil screenshot.

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

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

Putar ulang permintaan XHR

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

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

Mengubah perilaku pemuatan

Emulasikan 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. Hal ini lebih akurat mengemulasikan pengalaman pengguna pertama kali, karena permintaan disajikan 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 Kondisi jaringan panel samping.

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

Menghapus cache browser secara manual

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

Emulasikan offline

Ada kelas baru aplikasi web, yang disebut Progressive Web App, yang dapat berfungsi secara offline dengan bantuan dari pekerja layanan. Saat Anda membangun jenis aplikasi ini, ada baiknya untuk dapat dengan cepat melakukan simulasi perangkat yang tidak memiliki koneksi data.

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

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

Emulasi koneksi jaringan yang lambat

Untuk mengemulasi 4G cepat, 4G lambat, atau 3G, pilih preset yang sesuai dari menu drop-down Throttling pada 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 yang lambat atau cepat, Anda juga dapat menambahkan profil throttling kustom:

1. Buka menu Throttling dan 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 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. Memulai koneksi baru, misalnya, menggunakan alat pengujian.
2. Di panel Jaringan, pilih Tanpa 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/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 Throttling jaringan.

Menghapus cookie browser secara manual

Untuk menghapus cookie browser secara manual kapan saja, klik kanan di mana saja di tabel Permintaan dan 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 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, tekan Control + F.

2. Di tab Penelusuran, masukkan kueri, lalu tekan Enter. Jika perlu, klik match_case atau regular_expression untuk mengaktifkan sensitivitas huruf besar/kecil atau ekspresi reguler.

3. Klik salah satu hasil penelusuran. Panel Jaringan menandai permintaan dan string yang cocok dengan warna kuning di tab Header, Paload, atau Response.

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.

Filter permintaan

Filter permintaan berdasarkan properti

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

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

Untuk membalikkan filter, centang kotak Invert di samping kotak Filter.

Anda dapat menggunakan beberapa properti secara bersamaan dengan memisahkan setiap properti menggunakan spasi. Sebagai misalnya, mime-type:image/gif larger-than:1K menampilkan semua GIF yang berukuran 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. Tampilkan 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. 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 akhiran nama domain dalam .com. DevTools menampilkan menu drop-down pelengkapan otomatis dengan semua domain yang yang Anda alami.
• has-overrides. Tampilkan permintaan yang telah menggantikan 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 dimilikinya temui.
• is. Gunakan is:running untuk menemukan resource WebSocket.
• larger-than. Menampilkan resource yang lebih besar dari ukuran yang ditentukan, dalam byte. Menetapkan nilai dari 1000 setara dengan menetapkan nilai 1k.
• method. Menampilkan resource yang diambil melalui jenis metode HTTP yang ditentukan. DevTools terisi menu drop-down pelengkapan otomatis dengan semua metode HTTP yang dijumpainya.
• mime-type. Menampilkan resource jenis MIME yang telah ditentukan. DevTools mengisi menu drop-down pelengkapan otomatis dengan semua jenis MIME yang dijumpainya.
• mixed-content. Tampilkan semua resource konten campuran (mixed-content:all) atau hanya resource yang ditampilkan (mixed-content:displayed).
• priority. Menampilkan resource yang tingkat prioritasnya cocok dengan nilai yang ditentukan.
• resource-type. Menampilkan resource jenis resource, misalnya gambar. DevTools mengisi pelengkapan otomatis dengan semua jenis resource yang dijumpainya.
• response-header-set-cookie. Tampilkan header Set-Cookie mentah di tab Masalah. Format cookie salah dengan header Set-Cookie yang salah akan ditandai di panel Jaringan.
• scheme. Menampilkan resource yang diambil melalui HTTP (scheme:http) yang tidak dilindungi atau HTTPS yang dilindungi (scheme:https).
• set-cookie-domain. Tampilkan resource yang memiliki header Set-Cookie dengan atribut Domain yang cocok dengan nilai yang ditentukan. DevTools mengisi pelengkapan otomatis dengan semua cookie domain yang dijumpainya.
• set-cookie-name. Tampilkan resource yang memiliki header Set-Cookie dengan nama yang cocok dengan nilai yang ditentukan. DevTools mengisi pelengkapan otomatis dengan semua nama cookie yang dimilikinya temui.
• set-cookie-value. Menampilkan resource yang memiliki header Set-Cookie dengan nilai yang cocok nilai yang ditentukan. DevTools mengisi pelengkapan otomatis dengan semua nilai cookie yang dimilikinya temui.
• 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 Semua, Ambil/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest, atau Other (jenis lain yang tidak tercantum di sini) di panel Jaringan.

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

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

Filter permintaan menurut waktu

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

Sembunyikan URL data

URL data adalah file kecil yang disematkan ke dokumen lain. Setiap permintaan yang Anda lihat dalam Tabel Requests 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 jumlah total.

Sembunyikan URL ekstensi

Untuk fokus 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 jumlah total.

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 jumlah total.

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

Selain itu, panel Jaringan akan menampilkan ikon peringatan peringatan di samping permintaan yang terpengaruh oleh penghentian cookie pihak ketiga atau dikecualikan dari permintaan. 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 semuanya kecuali permintaan yang diblokir, centang 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 jumlah total.

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 jumlah total.

Permintaan pengurutan

Secara default, permintaan di tabel Permintaan diurutkan menurut waktu inisiasi, tetapi Anda dapat mengurutkan tabel dengan menggunakan kriteria lain.

Urutkan menurut kolom

Klik header dari 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.
• Waktu Respons. Permintaan pertama yang mulai mendownload ada di bagian atas.
• Waktu Berakhir. Permintaan pertama yang selesai ada di bagian atas.
• Durasi Total. 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 terpendek ke terpanjang. Mengklik pada header kolom Waterfall akan membalikkan urutan.

Dalam contoh ini, Waterfall diurutkan berdasarkan total durasi. Bagian yang lebih terang dari setiap batang adalah waktu 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 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 menunjukkan informasi lebih lanjut tentang mereka.

Tabel Permintaan menampilkan kolom berikut secara default:

• Nama. Nama file, atau ID, resource.

• 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 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 lain, seperti bernavigasi ke halaman menggunakan link atau memasukkan URL di kolom URL.

• Size. Ukuran gabungan header respons ditambah isi respons, seperti yang dikirimkan oleh server tertentu.

• Time. Total durasi, dari awal permintaan hingga penerimaan byte terakhir di responsnya.

• 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, Setel cookie, Prioritas, ID Koneksi, Memiliki penggantian, dan Waterfall.

Tambahkan kolom kustom

Untuk menambahkan kolom kustom ke tabel Permintaan:

1. Klik kanan header tabel Requests, lalu pilih Response Headers > Kelola Kolom Header.
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 dan centang Kelompokkan menurut frame.

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

Melihat waktu permintaan dalam kaitannya satu sama lain

Gunakan Waterfall untuk melihat waktu permintaan dalam kaitannya dengan satu sama lain. Secara default, Waterfall diatur berdasarkan waktu mulai permintaan. Jadi, permintaan yang berada lebih jauh ke kiri dimulai lebih awal daripada yang ada di sebelah 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 bawah kolom Name pada Requests (Permintaan).

Tabel berisi tiga kolom:

• Data. Payload pesan. Jika berupa teks biasa, pesan tersebut akan ditampilkan di sini. Untuk biner {i>opcode<i}, kolom ini menampilkan nama dan kode {i>opcode<i}. Opcode berikut ini 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 terang.
• Pesan teks masuk berwarna putih.
• Opcode WebSocket berwarna kuning muda.
• Error berwarna merah terang.

Menganalisis peristiwa di stream

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

1. Mencatat permintaan jaringan di halaman yang melakukan streaming peristiwa. Misalnya, buka halaman demo ini dan klik salah satu dari tiga tombol tersebut.
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 sebagian besar berguna untuk melihat gambar.

Melihat isi respons

Untuk melihat isi respons terhadap permintaan:

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

Lihat 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 Umum, DevTools menampilkan pesan status yang dapat dibaca manusia di samping kode status HTTP yang diterima.

Di bagian Response Headers, Anda dapat mengarahkan kursor ke nilai header, lalu mengklik tombol edit 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 di urutan penerimaannya:

1. Buka tab Header untuk permintaan yang Anda minati. Baca 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 disajikan dari cache lokal, yang tidak menyimpan header permintaan asli. Dalam hal ini, Anda dapat menonaktifkan penyimpanan dalam cache untuk melihat header permintaan yang 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 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 view decoded atau lihat URL yang dienkode.

Lihat cookie

Untuk melihat cookie yang dikirim di header HTTP permintaan:

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

Untuk deskripsi setiap kolom, lihat Kolom.

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

Melihat perincian waktu permintaan

Untuk melihat perincian waktu permintaan:

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

Lihat Pratinjau perincian waktu untuk cara yang lebih cepat dalam mengakses data ini.

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

Melihat pratinjau perincian waktu

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

Lihat Melihat perincian waktu permintaan untuk mengetahui cara mengakses data ini yang tidak memerlukan di atas layar.

Penjelasan fase perincian waktu

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

• Mengantrekan. Browser mengantrekan permintaan sebelum koneksi dimulai dan saat:
  • Ada permintaan dengan prioritas yang lebih tinggi.
  • Sudah ada enam koneksi TCP yang terbuka untuk origin ini, yang merupakan batasnya. Berlaku untuk Hanya HTTP/1.0 dan HTTP/1.1.
  • Browser mengalokasikan ruang di cache disk secara singkat.
• Tertahan. Permintaan dapat terhenti setelah koneksi dimulai karena salah satu alasan yang dijelaskan dalam Antrean.
• Pencarian DNS. Browser me-resolve alamat IP permintaan.
• Koneksi awal. Browser sedang membuat koneksi, termasuk handshake TCP atau percobaan 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 respons. TTFB adalah singkatan dari {i>Time<i} Ke First Byte. Waktu ini mencakup 1 perjalanan latensi dua arah dan waktu yang dibutuhkan server untuk menyiapkan respons.
• Download Konten. Browser menerima respons, baik secara langsung dari jaringan atau dari pekerja layanan. Nilai ini adalah jumlah total waktu yang dihabiskan untuk membaca isi respons. Nilai yang lebih besar dari perkiraan dapat mengindikasikan jaringan yang lambat, atau bahwa browser sibuk melakukan pekerjaan lain yang menunda pembacaan respons.

Melihat inisiator dan dependensi

Untuk melihat inisiator dan dependensi permintaan, tahan Shift dan arahkan kursor ke permintaan di Tabel permintaan. DevTools inisiator berwarna hijau, dan dependensi berwarna merah.

Saat tabel Permintaan diurutkan secara kronologis, permintaan berwarna hijau pertama di atas permintaan yang yang Anda arahkan kursor adalah inisiator dependensi tersebut. Jika ada permintaan berwarna hijau lainnya di atas bahwa permintaan yang lebih tinggi tersebut adalah inisiator dari inisiator tersebut. 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 Ringkasan, di bagian bawah panel Jaringan.

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

Melihat ukuran total resource yang ditransfer dan dimuat

DevTools mencantumkan ukuran total resource yang ditransfer dan dimuat (tidak dikompresi) di panel Summary, di bagian bawah panel Network.

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

Baca Melihat ukuran resource yang tidak dikompresi untuk mengetahui ukuran resource setelah browser membuka kompresinya.

Melihat stack trace 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 dikompresi

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

Dalam contoh ini, ukuran terkompresi dari 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 fitur sesi HTTP untuk mengekspor data yang direkam. Formatnya adalah objek JSON dengan kumpulan kolom tertentu.

Anda dapat 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 telah terjadi sejak Anda membuka DevTools ke file HAR. Anda tidak dapat memfilter permintaan yang akan 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 Jaringan membaca dan menampilkan inisiator untuk permintaan yang diimpor dari file HAR.

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

Di kolom Nama pada tabel Permintaan, klik kanan permintaan, arahkan kursor ke Salin, dan pilih salah satu opsi berikut.

Untuk menyalin satu permintaan, responsnya, atau stack trace:

• 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 ambil.
• Salin sebagai pengambilan (Node.js). Salin permintaan sebagai panggilan pengambilan Node.js.
• Salin respons. Salin isi respons ke papan klip.
• Salin stack trace. 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. Menyalin semua permintaan sebagai rantai perintah PowerShell.
• Salin semua sebagai ambil. 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. Salin semua permintaan sebagai data HAR.

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 rantai panggilan pengambilan Node.js.
• Salin semua yang tercantum sebagai HAR. Salin semua permintaan yang difilter sebagai data HAR.

Mengubah tata letak panel Jaringan

Luaskan atau ciutkan bagian dari UI panel Jaringan 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 jika Anda menginginkan lebih banyak spasi kosong di tabel permintaan jaringan. Beberapa kolom juga memberikan lebih banyak informasi saat menggunakan baris besar. Misalnya, nilai terbawah Kolom Size adalah ukuran permintaan yang tidak dikompresi, dan kolom Prioritas menampilkan prioritas pengambilan awal (nilai terendah) dan terakhir (nilai teratas).

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

Sembunyikan trek Ringkasan

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