Referensi fitur jaringan

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 Jaringan, selama DevTools terbuka.

Berhenti merekam permintaan jaringan

Untuk berhenti merekam permintaan:

• Klik Stop recording network log di panel Network. Ikon 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 Clear 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 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 Settings di dalam panel Network, lalu pilih Capture screenshots.

Muat ulang halaman saat panel Jaringan difokuskan 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 muncul di linimasa Ringkasan.
• Klik thumbnail screenshot untuk memfilter permintaan yang terjadi setelah screenshot diambil.
• Klik dua kali thumbnail untuk memperbesarnya.

Mengedit dan mengirim ulang permintaan

Anda dapat mengedit dan mengirim ulang permintaan jaringan yang dapat diambil dari tabel Requests:

1. Klik kanan permintaan, lalu pilih Edit and resend as fetch. DevTools membuka panel Console dengan permintaan yang diisi sebagai panggilan fetch(), yang mempertahankan parameter permintaan dan konteks eksekusi asli.
2. Atau, edit panggilan fetch() di Console, lalu tekan Enter untuk mengirim ulang permintaan.

Mengubah perilaku pemuatan

Meniru pengunjung kali pertama dengan menonaktifkan cache browser

Untuk mengemulasi pengalaman pengguna baru di situs Anda, centang kotak Nonaktifkan cache. DevTools menonaktifkan cache browser. Hal ini meniru secara lebih akurat pengalaman pengguna baru, karena permintaan ditayangkan dari cache browser pada kunjungan berulang.

Nonaktifkan cache browser dari panel Kondisi jaringan

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

1. Klik ikon untuk membuka panel samping Network Conditions.
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.

Mengemulasi offline

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

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 mode 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.

Jika Anda mengaktifkan Metrik kolom di panel Performa, salah satu opsi throttling di menu mungkin ditandai sebagai direkomendasikan berdasarkan data Chrome User Experience Report.

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

Membuat profil throttling kustom

Selain preset, seperti 4G 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 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. 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 seperti ini akan membantu Anda melihat perbedaannya.
4. Di panel Jaringan, pilih profil dan kirim pesan lain.
5. Alihkan filter WS, klik nama koneksi Anda, buka tab Pesan, 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 lainnya, gunakan panel samping Network conditions.

1. Klik ikon untuk membuka panel samping Network Conditions.
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, 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 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 Telusuri di sebelah kanan:

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

2. Di tab Search, masukkan kueri Anda, lalu tekan Enter. Jika ingin, klik match_case atau regular_expression untuk mengaktifkan sensitivitas 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 block Clear.

Untuk mengetahui informasi selengkapnya tentang semua cara yang dapat Anda lakukan untuk menelusuri di DevTools, lihat Penelusuran: Menemukan teks di semua resource yang dimuat.

Memfilter permintaan

Memfilter permintaan menurut properti

Gunakan kotak Filter untuk memfilter permintaan berdasarkan properti, seperti domain atau ukuran permintaan, atau masukkan string teks untuk mencocokkan URL, domain, nama host, atau port permintaan (misalnya, localhost atau example.com), termasuk permintaan situs yang sama.

Jika Anda tidak dapat melihat kotak tersebut, kemungkinan kolom Filter 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. 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. Menampilkan resource yang menetapkan domain cookie tertentu.
• cookie-name. Menampilkan 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 diakhiri dengan .com. DevTools menampilkan menu drop-down pelengkapan otomatis yang diisi dengan semua domain yang telah ditemuinya.
• has-overrides. Menampilkan 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 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 setara dengan menetapkan nilai 1k.
• method. Menampilkan resource yang diambil melalui jenis metode HTTP yang ditentukan. DevTools mengisi drop-down pelengkapan otomatis dengan semua metode HTTP yang telah ditemuinya.
• mime-type. Menampilkan resource dari jenis MIME yang ditentukan. DevTools mengisi drop-down pelengkapan otomatis dengan semua jenis MIME yang ditemukannya.
• 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 dari jenis resource, misalnya, gambar. DevTools mengisi drop-down pelengkapan otomatis dengan semua jenis resource yang ditemukannya.
• 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. Menampilkan 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 mengisi pelengkapan otomatis dengan semua domain cookie yang telah ditemukan.
• 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 telah ditemukan.
• 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 telah ditemukan.
• status-code. Hanya tampilkan resource yang kode status HTTP-nya cocok dengan kode yang ditentukan. DevTools mengisi menu drop-down pelengkapan otomatis dengan semua kode status yang telah ditemukannya.
• url. Menampilkan resource yang memiliki url yang cocok dengan nilai yang ditentukan.

Filter permintaan menurut jenis

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

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

Untuk menampilkan resource dari beberapa jenis 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 Filters, pilih More filters > check_box Hide data URLs.

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 yang tidak relevan yang dikirim oleh ekstensi yang mungkin telah Anda instal di Chrome. Permintaan ekstensi memiliki URL yang dimulai 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 semuanya kecuali permintaan dengan cookie respons yang diblokir karena alasan apa pun, di panel tindakan Filter, pilih Filter lainnya > check_box Cookie respons yang diblokir.

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

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 Issues guna mendapatkan informasi selengkapnya.

Hanya tampilkan permintaan yang diblokir

Untuk memfilter semuanya kecuali permintaan yang diblokir, di panel tindakan Filters, pilih More filters > check_box Blocked requests. Untuk mengujinya, Anda dapat menggunakan tab Pemblokiran permintaan jaringan di panel samping.

Tabel Requests 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, di panel tindakan Filters, pilih More filters > check_box 3rd-party requests.

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

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 berdasarkan kolom tersebut.

Mengurutkan menurut fase aktivitas

Untuk mengubah cara Waterfall mengurutkan permintaan, klik kanan header tabel Requests, 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.
• Total Durasi. Permintaan dengan penyiapan koneksi dan permintaan / respons terpendek berada di bagian atas.
• Latensi. Permintaan yang menunggu respons dalam waktu tersingkat berada di bagian atas.

Deskripsi ini mengasumsikan bahwa setiap opsi diurutkan dari yang 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 Jaringan. Gunakan panel Jaringan untuk menganalisis permintaan.

Melihat log permintaan

Gunakan tabel Permintaan untuk melihat log semua permintaan yang dibuat saat DevTools terbuka. 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 yang 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. Dalam hal ini, panel Jaringan menyediakan link ke baris yang sesuai dalam file sumber.
  • Early Hints. Respons HTTP 103 Early Hints.
  • Lainnya. Proses atau tindakan lain, seperti membuka halaman menggunakan link atau memasukkan URL di kolom alamat.

• 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:

• Permintaan #. Urutan absolut inisiasi permintaan, disematkan ke posisi pertama dalam tabel Permintaan secara default.
• Jalur. Bagian jalur URL.
• URL. URL lengkap permintaan.
• Metode. Metode HTTP permintaan (misalnya, GET, POST, PUT, DELETE).
• Protocol. Protokol permintaan (misalnya, h2 untuk HTTP/2, h3 untuk HTTP/3, dll.).
• Skema. Bagian skema URL.
• Domain. Bagian domain URL.
• Alamat jarak jauh. Alamat IP dan port jarak jauh permintaan.
• Ruang alamat jarak jauh. Ruang alamat jarak jauh permintaan. Public untuk IP publik, Private untuk IP pribadi.
• Ruang alamat inisiator. Ruang alamat inisiator permintaan. Sama seperti remote.
• Cookie. Jumlah cookie dalam permintaan.
• Setel cookie. Jumlah cookie dalam respons.
• Prioritas. Prioritas permintaan.
• ID Koneksi. ID koneksi permintaan dalam sesi klien, jika ada.
• Memiliki penggantian. Apakah permintaan memiliki penggantian (ya, tidak, konten, atau header).
• Terkait dengan Iklan. Benar atau salah.
• Sudah dimuat sebelumnya. Apakah permintaan dimulai menggunakan pramuat spekulatif.
• Pemblokiran render. Apakah permintaan memblokir rendering, berpotensi memblokir, atau tidak.
• Waterfall. Perincian visual aktivitas setiap permintaan.

Menambahkan kolom kustom

Untuk menambahkan kolom kustom ke tabel Permintaan:

1. Klik kanan header tabel Requests, lalu pilih Header Respons > 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 dapat membuat log permintaan lebih mudah dibaca 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 permintaan tersebut di log permintaan.

Melihat waktu permintaan dalam kaitannya satu sama lain

Gunakan Waterfall untuk melihat pengaturan waktu permintaan dalam kaitannya satu sama lain. Secara default, Waterfall diatur berdasarkan waktu mulai permintaan. Jadi, permintaan yang berada lebih jauh di sebelah kiri dimulai lebih awal daripada permintaan yang berada lebih jauh 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. Buka 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. Opcode berikut didukung: Frame Kelanjutan, Frame Biner, Frame Penutupan 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. Rekam permintaan jaringan di halaman yang melakukan streaming peristiwa.
2. Di Network, pilih permintaan dan buka tab EventStream.

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

Untuk menghapus daftar peristiwa yang diambil, klik block Clear.

Melihat pratinjau isi respons

Untuk melihat pratinjau isi respons:

1. Pilih permintaan di kolom Nama dalam tabel Permintaan.
2. Buka tab Preview.

Tab ini sangat berguna untuk melihat gambar.

Melihat isi respons

Untuk melihat isi respons terhadap permintaan:

1. Pilih permintaan di kolom Nama dalam tabel Permintaan.
2. Buka tab Respons.

Untuk respons biner atau terkompresi, pilih metode decoding (Base64, Hex, atau UTF-8) dari menu drop-down di bagian bawah tab Response.

Melihat header HTTP

Untuk melihat data header HTTP permintaan:

1. Pilih permintaan di kolom Nama dalam tabel Permintaan.
2. Buka tab Header, lalu scroll ke bawah ke bagian Umum, Header Respons, Header Permintaan, dan, jika perlu, Header Petunjuk Awal.

Di bagian General, 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 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 view source, 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 view source di samping bagian Query String Parameters atau Form Data.

Melihat kueri dan parameter formulir yang dienkode URL

Secara default, DevTools menampilkan parameter string kueri dan data formulir dalam bentuk yang didekode ke URL. Untuk beralih antara pengodean URL untuk argumen di tab Payload, klik Lihat yang dienkode URL atau Lihat yang didekode.

Melihat payload biner dan terkompresi

Untuk payload permintaan biner atau terkompresi, pilih metode decoding (Base64, Hex, atau UTF-8) dari menu drop-down di bagian bawah tab Payload.

Melihat cookie

Untuk melihat cookie yang dikirim di header HTTP permintaan:

1. Pilih permintaan di kolom Nama dalam tabel Permintaan.
2. Buka tab Cookies.

Untuk deskripsi setiap kolom, lihat Kolom.

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

Melihat sesi yang terikat perangkat

Tab Sesi terikat perangkat menampilkan informasi penundaan (refresh) yang terkait dengan permintaan yang dipilih untuk semua sesi terikat perangkat yang aktif di situs.

Untuk melihat informasi penundaan (refresh):

1. Pilih permintaan di kolom Nama dalam tabel Permintaan.
2. Buka tab Sesi terikat perangkat.

Tab Sesi terikat perangkat hanya ditampilkan untuk permintaan yang relevan dengan cookie. Tab ini mencantumkan semua sesi aktif yang terikat perangkat dan apakah sesi tersebut menunda permintaan (dan jika tidak, alasannya). Opsi penundaan yang mungkin tersedia adalah:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

Melihat perincian waktu permintaan

Untuk melihat perincian waktu permintaan:

1. Pilih permintaan di kolom Nama dalam tabel Permintaan.
2. Buka tab Waktu.

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

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

Melihat pratinjau perincian pengaturan 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 Timing:

• Mengantrekan. 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 di cache disk untuk sementara.
• Stalled. Permintaan dapat terhenti setelah koneksi dimulai karena alasan apa pun yang dijelaskan dalam Pengantrean.
• DNS Lookup. 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 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 bolak-balik 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 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 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 Requests 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 pengaturan waktu peristiwa DOMContentLoaded dan load di beberapa tempat di panel Jaringan. Acara DOMContentLoaded berwarna biru, dan acara load berwarna merah.

Melihat jumlah total permintaan

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

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.

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

Melihat stack trace yang menyebabkan permintaan

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

Melihat ukuran resource yang tidak dikompresi

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

Mengekspor data permintaan

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

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 dibersihkan" 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 Export HAR (sanitized)... di panel tindakan di bagian atas panel Network.

  Untuk mengekspor dengan data sensitif, pertama, aktifkan setelan Setelan > Preferensi > Jaringan > kotak centang Izinkan pembuatan HAR dengan data sensitif, lalu klik tombol download Ekspor dan pilih Ekspor HAR (dengan data sensitif) 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 tabel Requests.
• Klik upload Import HAR di panel tindakan di bagian atas panel Network.

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

Di bagian kolom Name pada tabel Requests, klik kanan permintaan, arahkan kursor ke Copy, 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.
• Copy as PowerShell. Salin permintaan sebagai perintah PowerShell.
• Copy as fetch. Salin permintaan sebagai panggilan pengambilan.
• Copy as fetch (Node.js). Salin permintaan sebagai panggilan pengambilan Node.js.
• Copy as preload element. Salin permintaan sebagai tag HTML <link rel="preload">.
• Salin respons. Menyalin isi respons ke papan klip.
• Salin stack trace. Salin rekaman aktivitas stack 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. Menyalin semua permintaan sebagai rangkaian perintah PowerShell.
• Salin semua sebagai pengambilan. Salin semua permintaan sebagai rangkaian panggilan pengambilan.
• Salin semua sebagai pengambilan data (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. Menyalin semua permintaan yang difilter sebagai rangkaian perintah cURL.
• Salin semua yang tercantum sebagai PowerShell. Menyalin semua permintaan yang difilter sebagai rangkaian perintah PowerShell.
• Salin semua yang tercantum sebagai pengambilan. Menyalin semua permintaan yang difilter sebagai rantai panggilan pengambilan.
• Salin semua yang tercantum sebagai pengambilan (Node.js). Menyalin semua permintaan yang difilter sebagai rantai 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 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 menginginkan lebih banyak spasi kosong di tabel permintaan jaringan. Beberapa kolom juga memberikan sedikit 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.

Menyembunyikan trek Ringkasan

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