Referensi fitur jaringan

Kayce Basques

Sofia Emelianova

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

Merekam permintaan jaringan

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

Berhenti merekam permintaan jaringan

Untuk menghentikan permintaan perekaman:

• Klik Berhenti merekam log jaringan di panel Jaringan. Tombol tersebut akan berubah menjadi abu-abu untuk menunjukkan 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 Network untuk menghapus semua permintaan dari tabel Requests.

Menyimpan permintaan di seluruh pemuatan halaman

Untuk menyimpan permintaan di seluruh pemuatan halaman, centang kotak Preserve log di panel Network. 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 dalam fokus 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 muncul di linimasa Ringkasan.
• Klik thumbnail screenshot untuk memfilter permintaan 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 dan tekan R.
• Klik kanan permintaan, lalu pilih Replay XHR.

Mengubah perilaku pemuatan

Meniru perilaku pengunjung kali pertama dengan menonaktifkan cache browser

Untuk meniru pengalaman pengguna saat pertama kali mengunjungi situs Anda, centang kotak Nonaktifkan cache. DevTools menonaktifkan cache browser. Hal ini meniru pengalaman pengguna pertama kali dengan lebih akurat, karena permintaan ditayangkan dari cache browser pada kunjungan berulang.

Menonaktifkan cache browser dari panel Kondisi jaringan

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

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, lalu pilih Clear browser cache.

Meniru offline

Ada class baru aplikasi web, yang disebut Progressive Web App, yang dapat berfungsi secara offline dengan bantuan pekerja layanan. Saat Anda membuat jenis aplikasi ini, akan berguna jika Anda dapat mensimulasikan perangkat yang tidak memiliki koneksi data dengan cepat.

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

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

Mengemulasi koneksi jaringan yang lambat

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

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

Membuat profil pembatasan kustom

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

1. Buka menu Throttling, lalu pilih Custom > Add....
2. Siapkan profil pembatasan baru seperti yang dijelaskan di setelan Setelan > Pembatasan.

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

   

DevTools menampilkan ikon peringatan di samping panel Network untuk mengingatkan Anda bahwa pembatasan kecepatan diaktifkan.

Membatasi koneksi WebSocket

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

Untuk mengamati pembatasan WebSocket:

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

Mengemulasi koneksi jaringan lambat dari panel Kondisi jaringan

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

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

Menghapus cookie browser secara manual

Untuk menghapus cookie browser secara manual kapan saja, klik kanan di mana saja di 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 Kondisi Jaringan.
2. Hapus Pilih otomatis.
3. Pilih opsi agen pengguna dari menu, atau masukkan opsi kustom di kotak.

Telusuri permintaan

Untuk menelusuri seluruh header permintaan, payload, dan respons:

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. Opsional, klik match_case atau regular_expression untuk mengaktifkan kepekaan huruf besar/kecil atau ekspresi reguler.

3. Klik salah satu hasil penelusuran. Panel Network menandai permintaan yang cocok dengan warna kuning. Selain itu, panel juga membuka tab Header atau Respons 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 mengetahui informasi selengkapnya tentang semua cara Anda dapat melakukan penelusuran di DevTools, lihat Penelusuran: Menemukan teks di semua resource yang dimuat.

Memfilter permintaan

Memfilter permintaan menurut properti

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

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

Untuk membalikkan filter, centang kotak Balikkan 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.

Berikut 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 nama domain yang diakhiri dengan .com. DevTools akan mengisi menu drop-down pelengkapan otomatis dengan semua domain yang telah ditemuinya.
• 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 telah ditemuinya.
• is. Gunakan is:running untuk menemukan referensi 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 drop-down pelengkapan otomatis dengan semua metode HTTP yang telah ditemuinya.
• mime-type. Menampilkan resource dengan jenis MIME tertentu. DevTools mengisi drop-down pelengkapan otomatis dengan semua jenis MIME yang telah ditemuinya.
• mixed-content. Tampilkan 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 drop-down pelengkapan otomatis dengan semua jenis resource yang telah ditemuinya.
• response-header-set-cookie. Menampilkan header Set-Cookie mentah di tab Masalah. Cookie yang salah format dengan header Set-Cookie yang salah akan ditandai di panel Jaringan.
• scheme. Tampilkan resource yang diambil melalui HTTP yang tidak dilindungi (scheme:http) 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 akan mengisi pelengkapan otomatis dengan semua domain cookie yang telah ditemuinya.
• 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 telah ditemuinya.
• set-cookie-value. Tampilkan resource yang memiliki header Set-Cookie dengan nilai yang cocok dengan nilai yang ditentukan. DevTools mengisi otomatis dengan semua nilai cookie yang telah ditemuinya.
• 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 telah ditemuinya.
• url. Tampilkan resource yang memiliki url yang cocok dengan nilai yang ditentukan.

Memfilter permintaan menurut jenis

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

Jika Anda tidak dapat melihat tombol ini, kolom 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 menampilkan hanya permintaan yang aktif selama jangka waktu tersebut. Filter bersifat inklusif. Setiap permintaan yang aktif selama waktu yang ditandai akan ditampilkan.

Menyembunyikan URL data

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

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

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

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 perpanjangan, di panel tindakan Filter, pilih Filter lainnya > check_box Sembunyikan URL perpanjangan.

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

Hanya tampilkan permintaan berisi cookie respons yang diblokir

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

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

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

Selain itu, panel Network menampilkan ikon peringatan warning di samping permintaan dengan cookie yang diblokir karena tanda atau konfigurasi Chrome. Arahkan kursor ke ikon untuk melihat tooltip dengan petunjuk dan klik ikon tersebut untuk membuka panel Masalah guna mendapatkan 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 jumlah.

Hanya tampilkan permintaan pihak ketiga

Untuk memfilter semua hal kecuali permintaan dengan asal yang berbeda dari asal halaman, di panel tindakan Filter, pilih Filter lainnya > check_box Permintaan pihak ketiga.

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

Urutkan permintaan

Secara default, permintaan dalam tabel Requests 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 menurut kolom tersebut.

Urutkan menurut 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 berada di bagian atas.
• Waktu Respons. Permintaan pertama yang mulai didownload berada di bagian atas.
• Waktu Berakhir. Permintaan pertama yang selesai berada di bagian atas.
• Durasi Total. Permintaan dengan penyiapan koneksi dan permintaan / respons terpendek berada di bagian atas.
• Latensi. Permintaan yang menunggu respons dalam waktu paling singkat berada di bagian atas.

Deskripsi ini mengasumsikan bahwa setiap opsi masing-masing diberi peringkat dari terpendek hingga terpanjang. Mengklik header kolom Waterfall akan membalikkan urutan.

Dalam contoh ini, Waterfall diurutkan berdasarkan total durasi. Bagian yang lebih terang dari 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 Network. Gunakan panel Jaringan untuk menganalisis permintaan.

Melihat log permintaan

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

Tabel Permintaan menampilkan kolom berikut secara default:

• Nama. Nama file, 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 dengan petunjuk tentang apa yang salah.
  • (failed) diikuti dengan pesan error.

• Jenis. Jenis MIME resource yang diminta.

• Pemrakarsa. Objek atau proses berikut dapat memulai permintaan:

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

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

• Time. Total durasi, dari awal permintaan hingga penerimaan byte terakhir dalam respons.

• Waterfall. Perincian visual aktivitas setiap permintaan.

Menambah atau menghapus kolom

Klik kanan header tabel Permintaan, lalu 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 inisiasi, Cookie, Setel 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 Tambahkan header kustom, masukkan namanya, lalu klik Tambahkan.

Mengelompokkan permintaan menurut frame inline

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

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

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

Melihat waktu permintaan dalam kaitannya satu sama lain

Gunakan Waterfall untuk melihat waktu permintaan dalam kaitannya satu sama lain. Secara default, Waterfall diatur berdasarkan waktu mulai permintaan. Jadi, permintaan yang lebih jauh di sebelah kiri dimulai lebih awal daripada permintaan yang lebih jauh di sebelah kanan.

Lihat Mengurutkan menurut fase aktivitas untuk melihat berbagai cara Anda dapat 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 Messages. Tabel ini menampilkan 100 pesan terakhir.

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

Tabel berisi tiga kolom:

• Data. Payload pesan. Jika pesan berupa teks biasa, pesan tersebut akan ditampilkan di sini. Untuk opcode biner, kolom ini menampilkan nama dan kode opcode. Opcodes berikut didukung: Frame Lanjutan, Frame Biner, Frame Penutup Koneksi, Frame Ping, dan Frame Pong.
• Panjang. 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.
• Kode operasi WebSocket berwarna kuning muda.
• Error berwarna merah muda.

Menganalisis peristiwa dalam aliran

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

1. Merekam permintaan jaringan di halaman yang melakukan streaming peristiwa.
2. Di Network, pilih permintaan dan buka tab EventStream.

Untuk memfilter peristiwa, tentukan ekspresi reguler di kolom 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 kolom Name pada tabel Requests.
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 kolom Name pada tabel Permintaan.
2. Klik tab Respons.

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, jika perlu, Header Petunjuk Awal.

Di bagian Umum, DevTools menampilkan pesan status yang mudah dibaca 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 menurut abjad. Untuk melihat nama header HTTP dalam urutan penerimaannya:

1. Buka tab Header untuk permintaan yang Anda inginkan. 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.... Berikut kemungkinan alasannya:

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

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

DevTools juga hanya dapat menampilkan header sementara karena alasan keamanan.

Melihat payload permintaan

Untuk melihat payload permintaan, yaitu parameter string kueri dan data formulirnya, pilih permintaan dari tabel Requests dan 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 yang didekode URL dari parameter string kueri

Untuk beralih antara pengodean URL untuk argumen, di tab Payload, klik lihat yang didekode atau lihat yang dienkode URL.

Melihat cookie

Untuk melihat cookie yang dikirim di header HTTP permintaan:

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

Untuk mengetahui 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 Waktu.

Lihat Melihat pratinjau perincian waktu untuk 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 pengaturan waktu

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

Lihat Melihat perincian waktu permintaan untuk mengetahui cara mengakses data ini yang tidak memerlukan pengarahan kursor.

Penjelasan fase perincian waktu

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

• Mengantre. Browser mengantrekan permintaan sebelum koneksi dimulai dan saat:
  • Ada permintaan dengan prioritas lebih tinggi. Prioritas permintaan ditentukan oleh faktor-faktor seperti jenis resource, serta lokasinya dalam dokumen. Untuk mengetahui informasi selengkapnya, baca bagian prioritas resource dalam panduan fetchpriority.
  • Sudah ada enam koneksi TCP yang terbuka untuk origin ini, yang merupakan batasnya. (Hanya berlaku untuk HTTP/1.0 dan HTTP/1.1.)
  • Browser mengalokasikan ruang secara singkat di cache disk.
• Tertunda. Permintaan dapat terhenti setelah koneksi dimulai karena salah satu alasan yang dijelaskan dalam Pengantrean.
• Pencarian DNS. Browser sedang menyelesaikan alamat IP permintaan.
• Koneksi awal. Browser sedang membuat koneksi, termasuk handshake atau percobaan ulang TCP dan menegosiasikan SSL.
• Negosiasi proxy. Browser sedang menegosiasikan permintaan dengan server proxy.
• Permintaan dikirim. Permintaan sedang dikirim.
• Persiapan ServiceWorker. Browser sedang memulai pekerja layanan.
• Permintaan ke ServiceWorker. Permintaan sedang dikirim ke pekerja layanan.
• Menunggu (TTFB). Browser sedang menunggu byte pertama respons. TTFB adalah singkatan dari Time To First Byte. Waktu ini mencakup 1 perjalanan pulang pergi latensi dan waktu yang dibutuhkan server untuk menyiapkan respons.
• Download Konten. Browser menerima respons, baik langsung dari jaringan maupun dari pekerja layanan. Nilai ini adalah total waktu yang dihabiskan untuk membaca isi respons. Nilai yang lebih besar dari yang diharapkan dapat menunjukkan jaringan yang lambat, atau browser sedang 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 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 kursornya adalah inisiator dependensi. Jika ada permintaan hijau lain di atasnya, permintaan yang lebih tinggi tersebut adalah inisiator dari inisiator. Dan seterusnya.

Melihat peristiwa pemuatan

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

Melihat jumlah total permintaan

Jumlah total permintaan tercantum di status bar di bagian bawah panel Network.

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

Melihat ukuran total resource yang ditransfer dan dimuat

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

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

Lihat Melihat ukuran resource yang tidak dikompresi untuk melihat seberapa besar ukuran resource setelah browser mendekompresinya.

Melihat stack trace yang menyebabkan permintaan

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

Melihat ukuran resource yang tidak dikompresi

Periksa Setelan > Baris permintaan besar, lalu lihat nilai paling bawah di 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

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 (HTTP Archive) adalah format file yang digunakan oleh beberapa alat sesi HTTP untuk mengekspor data yang diambil. 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 disanitasi" dalam format HAR yang tidak menyertakan 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 Requests, lalu pilih Copy > Save all [listed] as HAR (sanitized) atau Save all [listed] as HAR (with sensitive data).

  

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

  Untuk mengekspor dengan data sensitif, aktifkan settings Settings > Preferences > Network > check_box Allow to generate HAR with sensitive data terlebih dahulu, lalu klik tombol download Export dan pilih Export HAR (with sensitive data) dari menu drop-down.

  

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

• Tarik lalu lepas file HAR ke dalam tabel Requests.
• Klik upload Impor HAR di panel tindakan di bagian atas panel Network.

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

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

Di kolom Nama pada tabel Permintaan, klik kanan permintaan, arahkan kursor ke Salin, lalu 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 pengambilan.
• Salin sebagai pengambilan (Node.js). Salin permintaan sebagai panggilan pengambilan Node.js.
• Salin respons. Menyalin 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. Menyalin semua permintaan sebagai rangkaian perintah cURL.
• Salin semua sebagai PowerShell. Salin semua permintaan sebagai rangkaian perintah PowerShell.
• Salin semua sebagai ambil. Salin semua permintaan sebagai rangkaian panggilan pengambilan.
• Salin semua sebagai pengambilan (Node.js). Salin semua permintaan sebagai rangkaian panggilan pengambilan Node.js.
• Salin semua sebagai HAR (dibersihkan). Salin 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:

• Menyalin semua URL yang tercantum. Menyalin 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 rangkaian panggilan pengambilan.
• Salin semua yang tercantum sebagai pengambilan (Node.js). Menyalin 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). Menyalin semua permintaan yang difilter sebagai data HAR dengan data sensitif.

Mengubah tata letak panel Network

Luaskan atau ciutkan bagian UI panel Network 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 menginginkan lebih banyak ruang kosong dalam tabel permintaan jaringan. Beberapa kolom juga memberikan sedikit informasi tambahan saat menggunakan baris besar. Misalnya, nilai bawah kolom Ukuran adalah ukuran permintaan yang tidak dikompresi dan kolom Prioritas menampilkan prioritas pengambilan awal (nilai bawah) dan akhir (nilai atas).

Buka Setelan dan 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.