GoOgLe ChRoMe
Web
Web
Dasar-dasar Alat Pembaruan Studi kasus
Telusuri
SEMUA PRODUK
MORE_VERT
RUMAH CHROME DEVTOOLS MERCU SUAR KERANJANG JAHITAN LAPORAN PENGALAMAN PENGGUNA CHROME
Ikhtisar
Debug Progresif Web Apps
Pahami Masalah Keamanan
Jalankan Cuplikan Kode Dari Halaman Any
Referensi Pintas Keyboard
Referensi UI
Periksa dan Edit Halaman
Lihat dan Ubah CSS
Memeriksa dan Mengelola Penyimpanan , Caches , dan Resources
Simulasikan Perangkat Mobile dengan Mode Perangkat
Perangkat Android Debugging Jarak Jauh
Periksa dan Debug JavaScript
Menggunakan Konsol
Analisis Kinerja Runtime
Ukur Kinerja Jaringan
Memulai
Panduan Masalah Jaringan
Referensi
Loading Sumberdaya
Perbaiki Masalah Memori
Perluas DevTools Chrome
Konten
Rekam permintaan jaringan
Berhenti merekam permintaan jaringan
Permintaan yang jelas
Simpan permintaan di seluruh halaman
Tangkap tangkapan layar saat pemuatan halaman
Permintaan ulang XHR
Ubah perilaku pemuatan
Emulasikan pengunjung pertama kali dengan menonaktifkan cache browser
Hapus cache browser secara manual
Emulasikan secara offline
Emulasikan koneksi jaringan yang lambat
Hapus cookie browser secara manual
Ganti agen pengguna
Permintaan filter
Filter permintaan menurut properti
Filter permintaan menurut jenisnya
Filter permintaan berdasarkan waktu
Sembunyikan URL data
Urutkan permintaan
Urutkan menurut kolom
Urutkan berdasarkan fase aktivitas
Menganalisis permintaan
Lihat log permintaan
Lihat waktu permintaan terkait satu sama lain
Analisis frame dari Sambungan WebSocket
Lihat pratinjau tubuh respons
Lihat respon tubuh
Lihat header HTTP
Lihat parameter string kueri
Lihat kuki
Lihat rincian waktu permintaan
Lihat penggagas dan dependensi
Lihat acara muat
Lihat jumlah total permintaan
Lihat total ukuran download
Lihat jejak tumpukan yang menyebabkan permintaan
Ekspor data permintaan
Simpan permintaan sebagai HAR dengan konten
Salin satu atau lebih permintaan ke clipboard
Ubah tata letak panel Jaringan
Sembunyikan panel Filters
Gunakan baris permintaan besar
Sembunyikan panel Ikhtisar
Referensi Analisis Jaringan
Kayce Basques
Oleh Kayce Basque
Penulis Teknis di Google
Temukan cara baru untuk menganalisis bagaimana pemuatan laman Anda dalam referensi komprehensif fitur pengelolaan jaringan DevTools.
Catatan: Referensi ini didasarkan pada Chrome 58. Jika Anda menggunakan versi Chrome lainnya, UI dan fitur DevTools mungkin berbeda. Periksa chrome://helpuntuk melihat versi Chrome yang Anda jalankan.
Rekam permintaan jaringan
Secara default, DevTools mencatat semua permintaan jaringan di panel Jaringan, selama DevTools terbuka.
Panel Jaringan.
Gambar 1 . Panel Jaringan
Berhenti merekam permintaan jaringan
Untuk menghentikan permintaan rekaman:
Klik Berhenti merekam log jaringan Berhenti merekam log jaringan pada panel Jaringan. Ternyata abu-abu menunjukkan bahwa DevTools tidak lagi melakukan permintaan rekaman.
Tekan Command+ E(Mac) atau Control+ E(Windows, Linux) saat panel Jaringan sedang fokus.
Permintaan yang jelas
Klik Hapus Bersih pada panel Jaringan untuk menghapus semua permintaan dari tabel Permintaan.
Tombol Clear.
Gambar 2 . Jelas, digariskan dengan warna biru
Simpan permintaan di seluruh halaman
Untuk menyimpan permintaan di seluruh pemuatan halaman, periksa kotak centang Pertahankan log pada panel Jaringan. DevTools menyimpan semua permintaan sampai Anda menonaktifkan log Pertahankan .
Kotak centang Pertahankan Log.
Gambar 3 . Kotak centang Pertahankan Log, digarisbawahi dengan warna biru
Tangkap tangkapan layar saat pemuatan halaman
Tangkap tangkapan layar untuk menganalisis apa yang pengguna lihat saat menunggu laman dimuat.
Untuk mengaktifkan tangkapan layar, klik Tangkap tangkapan layar Tangkap tangkapan layar pada panel Jaringan. Ternyata biru saat diaktifkan.
Muat ulang halaman sementara panel Jaringan fokus untuk menangkap tangkapan layar.
Setelah ditangkap, Anda dapat berinteraksi dengan tangkapan layar dengan cara berikut:
Arahkan kursor ke tangkapan layar untuk melihat titik tangkapan tangkapan layar. Garis kuning muncul di panel Ikhtisar.
Klik thumbnail screenshot untuk memfilter permintaan yang terjadi setelah tangkapan layar diambil.
Klik dua kali thumbnail untuk memperbesarnya.
Melayang di atas tangkapan layar.
Gambar 4 . Melayang di atas tangkapan layar. Garis kuning dan vertikal di panel Ikhtisar dan Waterfall mewakili waktu pengambilan gambar.
Permintaan ulang XHR
Untuk memutar ulang permintaan XHR, klik kanan permintaan di tabel Requests dan pilih Replay XHR .
Memilih Replay XHR.
Gambar 5 . Memilih Replay XHR
Ubah perilaku pemuatan
Emulasikan pengunjung pertama kali dengan menonaktifkan cache browser
Untuk meniru bagaimana pengalaman pengguna pertama kali di situs Anda, centang kotak centang Nonaktifkan tembolok . DevTools menonaktifkan cache browser. Ini lebih akurat mengemulasi pengalaman pengguna pertama kali, karena permintaan dilayani dari cache browser saat kunjungan berulang.
Kotak centang Nonaktifkan Cache
Gambar 6 . Kotak centang Nonaktifkan Cache, digariskan dengan warna biru
Nonaktifkan tembolok peramban dari laci Ketentuan Kondisi Jaringan
Jika Anda ingin menonaktifkan cache saat bekerja di panel DevTools lainnya, gunakan laci Kondisi Jaringan.
Open the Network Conditions drawer.
Check or uncheck the Disable cache checkbox.
Manually clear the browser cache
To manually clear the browser cache at any time, right-click anywhere in the Requests table and select Clear Browser Cache.
Memilih Clear Browser Cache.
Figure 7. Selecting Clear Browser Cache
Emulate offline
There's a new class of web apps, called Progressive Web Apps, which can function offline with the help of service workers. When you're building this type of app, it's useful to be able to quickly simulate a device that has no data connection.
Check the Offline checkbox to simulate a completely offline network experience.
Kotak centang Offline
Gambar 8 . Kotak centang Offline, yang digariskan dengan warna biru
Emulasikan koneksi jaringan yang lambat
Emulasikan 2G, 3G, dan kecepatan koneksi lainnya dari menu Network Throttling .
Menu Network Throttling.
Gambar 9 . Menu Network Throttling, digariskan dengan warna biru
Anda dapat memilih dari berbagai preset, seperti Regular or Good 2G. Anda juga dapat menambahkan preset kustom Anda sendiri dengan membuka menu Network Throttling dan memilih Custom > Add .
DevTools menampilkan ikon peringatan di samping tab Network untuk mengingatkan Anda bahwa throttling diaktifkan.
Emulasikan koneksi jaringan yang lambat dari laci Kondisi Jaringan
Jika Anda ingin mencekik koneksi jaringan saat bekerja di panel DevTools lainnya, gunakan laci Kondisi Jaringan.
Buka laci Kondisi Jaringan .
Pilih kecepatan koneksi yang Anda inginkan dari menu Network Throttling .
Hapus cookie browser secara manual
Untuk menghapus cookie browser secara manual setiap saat, klik kanan di manapun dalam tabel Requests dan pilih Clear Browser Cookies .
Memilih Clear Browser Cookies.
Gambar 10 . Memilih Clear Browser Cookies
Ganti agen pengguna
Untuk mengganti pengguna secara manual:
Buka laci Kondisi Jaringan .
Hapus centang Pilih secara otomatis .
Pilih opsi agen pengguna dari menu, atau masukkan teks ubahsuaian di kotak teks.
Permintaan filter
Filter permintaan menurut properti
Gunakan kotak teks Filter untuk memfilter permintaan berdasarkan properti, seperti domain atau ukuran permintaan.
If you can't see the text box, the Filters pane is probably hidden. See Hide the Filters pane.
Kotak teks Filter.
Figure 11. The Filters text box, outlined in blue
You can use multiple properties simultaneously by separating each property with a space. For example, mime-type:image/gif larger-than:1K displays all GIFs that are larger than one kilobyte. These multi-property filters are equivalent to AND operations. OR operations are currently not supported.
Below is a complete list of supported properties.
domain. Only display resources from the specified domain. You can use a wildcard character (*) to include multiple domains. For example, *.com displays resources from all domain names ending in .com. DevTools populates the autocomplete dropdown menu with all of the domains it has encountered.
has-response-header. Show the resources that contain the specified HTTP response header. DevTools populates the autocomplete dropdown with all of the response headers that it has encountered.
is. Use is:running to find WebSocket resources.
larger-than. Show resources that are larger than the specified size, in bytes. Setting a value of 1000 is equivalent to setting a value of 1k.
method. Show resources that were retrieved over a specified HTTP method type. DevTools populates the dropdown with all of the HTTP methods it has encountered.
mime-type. Show resources of a specified MIME type. DevTools populates the dropdown with all MIME types it has encountered.
mixed-content. Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed (mixed-content:displayed).
scheme. Show resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).
set-cookie-domain. Show the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. DevTools populates the autocomplete with all of the cookie domains that it has encountered.
set-cookie-name. Show the resources that have a Set-Cookie header with a name that matches the specified value. DevTools populates the autocomplete with all of the cookie names that it has encountered.
set-cookie-value. Show the resources that have a Set-Cookie header with a value that matches the specified value. DevTools populates the autocomplete with all of the cookie values that it has encountered.
status-code. Only show resources whose HTTP status code match the specified code. DevTools populates the autocomplete dropdown menu with all of the status codes it has encountered.
Filter requests by type
To filter requests by request type, click the XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Manifest, or Other (any other type not listed here) buttons on the Network panel.
If you can't see these buttons, the Filters pane is probably hidden. See Hide the Filters pane.
To enable multiple type filters simultaneously, hold Command (Mac) or Control (Windows, Linux) and then click.
Menggunakan filter Jenis untuk menampilkan sumber daya JS, CSS, dan Doc [ument].
Figure 12. Using the Type filters to display JS, CSS, and Doc[ument] resources.
Filter requests by time
Click and drag left or right on the Overview pane to only display requests that were active during that time frame. The filter is inclusive. Any request that was active during the highlighted time is shown.
Menyaring setiap permintaan yang tidak aktif sekitar 2500ms.
Figure 13. Filtering out any requests that weren't active around 2500ms
Hide data URLs
Data URLs are small files embedded into other documents. Any request that you see in the Requests table that starts with data: is a data URL.
Check the Hide data URLs checkbox to hide these requests.
Kotak centang Sembunyikan Data URLs.
Figure 14. The Hide Data URLs checkbox
Sort requests
By default, the requests in the Requests table are sorted by initiation time, but you can sort the table using other criteria.
Sort by column
Click the header of any column in the Requests to sort requests by that column.
Sort by activity phase
To change how the Waterfall sorts requests, right-click the header of the Requests table, hover over Waterfall, and select one of the following options:
Start Time. The first request that was initiated is at the top.
Response Time. The first request that started downloading is at the top.
End Time. The first request that finished is at the top.
Total Duration. The request with the shortest connection setup and request / response is at the top.
Latency. The request that waited the shortest time for a response is at the top.
These descriptions assume that each respective option is ranked from shortest to longest. Clicking on the Waterfall column's header reverses the order.
Mengurutkan Air Terjun dengan durasi total.
Figure 15. Sorting the Waterfall by total duration. The lighter portion of each bar is time spent waiting. The darker portion is time spent downloading bytes.
Analyze requests
So long as DevTools is open, it logs all requests in the Network panel. Use the Network panel to analyze requests.
View a log of requests
Use the Requests table to view a log of all requests made while DevTools has been open. Clicking or hovering over requests reveals more information about them.
Tabel permintaan
Figure 16. The Requests table, outlined in blue
The Requests table displays the following columns by default:
Name. The filename of, or an identifier for, the resource.
Status. The HTTP status code.
Type. The MIME type of the requested resource.
Initiator. The following objects or processes can initiate requests:
Parser. Chrome's HTML parser.
Redirect. An HTTP redirect.
Script. A JavaScript function.
Other. Some other process or action, such as navigating to a page via a link or entering a URL in the address bar.
Size. The combined size of the response headers plus the response body, as delivered by the server.
Time. The total duration, from the start of the request to the receipt of the final byte in the response.
Waterfall. A visual breakdown of each request's activity.
Add or remove columns
Right-click the header of the Requests table and select an option to hide or show it. Currently displayed options have checkmarks next to them.
Menambahkan kolom ke tabel Requests.
Figure 17. Adding a column to the Requests table.
Add custom columns
To add a custom column to the Requests table, right-click the header of the Requests table and select Response Headers > Manage Header Columns.
Menambahkan kolom khusus ke tabel Requests.
Figure 18. Adding a custom column to the Requests table.
View the timing of requests in relation to one another
Use the Waterfall to view the timing of requests in relation to one another. By default, the Waterfall is organized by the start time of the requests. So, requests that are farther to the left started earlier than those that are farther to the right.
See Sort by activity phase to see the different ways that you can sort the Waterfall.
Kolom Waterfall dari panel Requests.
Figure 19. The Waterfall column of the Requests pane.
Analyze the frames of a WebSocket Connection
To view the frames of a WebSocket connection:
Click the URL of the WebSocket connection, under the Name column of the Requests table.
Click the Frames tab. The table shows the last 100 frames.
Untuk me-refresh tabel, klik ulang nama koneksi WebSocket di bawah kolom Name pada tabel Requests.
Tab Frames.
Gambar 20 . Tab Frames, digariskan dengan warna biru
Tabel berisi tiga kolom:
Data . Muatan pesan Jika pesan itu berupa teks biasa, itu akan ditampilkan di sini. Untuk opcode biner, kolom ini menampilkan nama dan kode opcode. Opcode berikut didukung: Frame Lanjutan, Frame Biner, Frame Sambungan Dekat, Bingkai Ping, dan Bingkai Pong.
Panjang . Panjang muatan pesan, dalam satuan byte.
Waktu . Saat pesan diterima atau dikirim
Pesan diberi kode warna menurut jenisnya:
Pesan teks keluar berwarna hijau muda.
Pesan teks masuk berwarna putih.
Opcode WebSocket berwarna kuning muda.
Kesalahan ringan-red.
Lihat pratinjau tubuh respons
Untuk melihat pratinjau tubuh respons:
Klik URL permintaan, di bawah kolom Name pada tabel Requests.
Klik tab Preview .
Tab ini sangat berguna untuk melihat gambar.
Tab pratinjau
Gambar 21 . Tab Pratinjau, yang digariskan dengan warna biru
Lihat respon tubuh
Untuk melihat respon tubuh terhadap permintaan:
Klik URL permintaan, di bawah kolom Name pada tabel Requests.
Klik tab Header .
Tab Respon.
Gambar 22 . Tab Respon, digariskan dengan warna biru
Lihat header HTTP
Untuk melihat data header HTTP tentang permintaan:
Klik pada URL permintaan, di bawah kolom Name pada tabel Requests.
Klik tab Header .
Tab judul
Gambar 23 . Tab Header, digariskan dengan warna biru
Lihat sumber header HTTP
By default, the Headers tab shows header names alphabetically. To view the HTTP header names in the order they were received:
Open the Headers tab for the request you're interested in. See View HTTP headers.
Click view source, next to the Request Header or Response Header section.
View query string parameters
To view the query string parameters of a URL in a human-readable format:
Open the Headers tab for the request you're interested in. See View HTTP headers.
Go to the Query String Parameters section.
Bagian Parameter Query String.
Figure 24. The Query String Parameters section, outlined in blue
View query string parameters source
To view the query string parameter source of a request:
Go to the Query String Parameters section. See View query string parameters.
Click view source.
View URL-encoded query string parameters
To view query string parameters in a human-readable format, but with encodings preserved:
Go to the Query String Parameters section. See View query string parameters.
Click view URL encoded.
View cookies
To view the cookies sent in a request's HTTP header:
Click the URL of the request, under the Name column of the Requests table.
Click the Cookies tab.
See Fields for a description of each of the columns.
Tab cookie
Figure 25. The Cookies tab, outlined in blue
View the timing breakdown of a request
To view the timing breakdown of a request:
Click the URL of the request, under the Name column of the Requests table.
Click the Timing tab.
See Preview a timing breakdown for a faster way to access this data.
See Timing breakdown phases explained for more information about each of the phases that you may see in the Timing tab.
Tab waktu
Figure 26. The Timing tab, outlined in blue
Here's more information about each of the phases.
See View timing breakdown for another way to access this view.
Preview a timing breakdown
To view a preview of the timing breakdown of a request, hover over the request's entry in the Waterfall column of the Requests table.
See View the timing breakdown of a request for a way to access this data that does not require hovering.
Meninjau rincian waktu permintaan.
Figure 27. Previewing the timing breakdown of a request
Timing breakdown phases explained
Here's more information about each of the phases you may see in the Timing tab:
Queueing. The browser queues requests when:
There are higher priority requests.
There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
The browser is briefly allocating space in the disk cache
Stalled. The request could be stalled for any of the reasons described in Queueing.
DNS Lookup. The browser is resolving the request's IP address.
Proxy negotiation. The browser is negotiating the request with a proxy server.
Request sent. The request is being sent.
ServiceWorker Preparation. The browser is starting up the service worker.
Request to ServiceWorker. The request is being sent to the service worker.
Waiting (TTFB). The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.
Content Download. The browser is receiving the response.
Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
Reading Push. The browser is reading the local data previously received.
View initiators and dependencies
To view the initiators and dependencies of a request, hold Shift and hover over the request in the Requests table. DevTools colors initiators green, and dependencies red.
Melihat penggagas dan dependensi permintaan.
Figure 28. Viewing the initiators and dependencies of a request
When the Requests table is ordered chronologically, the first green request above the request that you're hovering over is the initiator of the dependency. If there's another green request above that, that higher request is the initiator of the initiator. And so on.
View load events
DevTools displays the timing of the DOMContentLoaded and load events in multiple places on the Network panel. The DOMContentLoaded event is colored blue, and the load event is red.
Lokasi acara DOMContentLoaded and load pada panel Network.
Figure 29. The locations of the DOMContentLoaded and load events in the Network panel
View the total number of requests
The total number of requests is listed in the Summary pane, at the bottom of the Network panel.
Caution: This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.
Jumlah permintaan sejak DevTools dibuka
Figure 30. The total number of requests since DevTools was opened
View the total download size
The total download size of requests is listed in the Summary pane, at the bottom of the Network panel.
Caution: This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.
Total ukuran download permintaan
Figure 31. The total download size of requests
View the stack trace that caused a request
When a JavaScript statement causes a resource to be requested, hover over the Initiator column to view the stack trace leading up to the request.
Tumpukan jejak mengarah ke permintaan sumber daya
Figure 32. The stack trace leading up to a resource request
Export requests data
Save a request as HAR with content
To save a request in the HAR format with content:
Right-click the row containing the request in the Requests table.
Pilih Save as HAR dengan Content .
Memilih Save As HAR With Content.
Gambar 33 . Memilih Save As HAR With Content
Salin satu atau lebih permintaan ke clipboard
Di bawah kolom Name pada tabel Requests, klik kanan sebuah request, arahkan kursor ke Copy , lalu pilih salah satu dari pilihan berikut:
Salin Alamat Tautan . Salin URL permintaan ke clipboard.
Copy Response . Salin respon body ke clipboard.
Salin sebagai kursor . Salin permintaan tersebut sebagai perintah cURL.
Salin Semua sebagai Curl . Salin semua permintaan sebagai rangkaian perintah cURL.
Salin Semua sebagai HAR . Salin semua permintaan sebagai data HAR.
Memilih Copy Response.
Gambar 34 . Memilih Copy Response
Ubah tata letak panel Jaringan
Memperluas atau menciutkan bagian dari UI panel jaringan untuk berfokus pada hal yang penting bagi Anda.
Sembunyikan panel Filters
Secara default, DevTools menunjukkan panel Filters . Klik Filter Menyaring untuk menyembunyikannya.
Tombol Sembunyikan Penyaring
Gambar 35 . Sembunyikan Filter, digariskan dengan warna biru
Gunakan baris permintaan besar
Secara default, DevTools menggunakan baris kecil di panel Requests . Klik Gunakan baris permintaan besar Gunakan baris permintaan besar untuk menggunakan baris besar.
Tombol Large Request Rows
Gambar 36 . Baris Permintaan Besar, digarisbawahi dengan warna biru
Contoh baris permintaan kecil di panel Permintaan.
Gambar 37 . Contoh baris permintaan kecil di panel Permintaan
Contoh baris permintaan besar di panel Permintaan.
Gambar 38 . Contoh baris permintaan besar di panel Permintaan
Sembunyikan panel Ikhtisar
Secara default, DevTools menampilkan panel Ikhtisar . Klik Sembunyikan ikhtisar Sembunyikan ikhtisar untuk menyembunyikannya.
Tombol Sembunyikan Sekilas
Gambar 39 . Sembunyikan Ikhtisar, digariskan dengan warna biru
Kecuali jika dinyatakan lain, isi dari halaman ini dilisensikan di bawah Lisensi Creative Commons Attribution 3.0 , dan contoh kode dilisensikan di bawah Lisensi Apache 2.0 . Untuk detailnya, lihat Kebijakan Situs kami . Java adalah merek dagang terdaftar dari Oracle dan / atau afiliasinya.
Terakhir hh 14 November 2017.
Kromium Blog
Kabar terbaru di blog Chromium.
GitHub
Bawalah contoh kode kami dan proyek open-source lainnya.
Kericau
Terhubung dengan @ChromiumDev di Twitter.
Video
Lihat video kami.
peristiwa
Acara
Menghadiri acara pengembang dan mendapatkan hacking.
Topik kunci
Bangunan untuk Miliaran
Dokumen Ekstensi Chrome
Program Umpan Balik Pengembang
Aplikasi Web Progresif
Lebih banyak pelatihan
Instruktur Led Training
Pelatihan PWA untuk Agensi
Kursus Web di Udacity
Menyumbang
Mengajukan sebuah masalah
Lihat sumber halaman
Sumber daya
Menerjemahkan
Android
Chrome
Firebase
Google Cloud Platform
Semua Produk
BAHASA INDONESIA
Persyaratan Privasi
Daftar ke buletin Google Developers
BERLANGGANAN
Tidak ada komentar:
Posting Komentar
Terimakasih sudah berkunjung :D
Sukses selalu dan Salam Hormat :)
*)