safari network request payload

• Vancouver, BC
• Be a Patreon

Support Jun

• StackOverflow
• Custom Social Profile Link

How to inspect request and response headers on Safari?

January 03, 2019  1 minute read  

Learn how to inspect request and response headers on Safari.

1. Enable Developer Mode

On Safari, first, you have to enable Develop Menu.

• Click Safari button on top left corner.
• Open up Safari preferences.
• Select Advanced tab.
• Check ‘Show Develop menu in menu bar’.

2. Open up Safari Web Inspector

You can open by Safari Web Inspector by selecting Develop menu and click Show Web Inspector button.

3. Open up Network tab

With web inspector opened,

• Navigate to Network tab and you can see the files requested over network.
• Select one of the requested items and go to its Headers item.
• You can see the following image showing Summary, Request and Response sections.

4. Refresh the page

• Refresh the page by using the refresh button next to the address bar.
• Network Request and Response Headers will be listed.

Mac Shorcuts / Hotkeys

You would be more productive if you know the shorcuts to the above steps. When you are familiar with the shortcut keys, you can speed up and use your time on developing and solving problems.

Shortcuts or hotkeys to inspect network requests and responses on Safari:

With this, you can inspect your network requests and responses on Safari.

Support Jun on Amazon Canada

If you are preparing for Software Engineer interviews, I suggest Elements of Programming Interviews in Java for algorithm practice. Good luck!

You can also support me by following me on Medium or Twitter .

Feel free to contact me if you have any questions.

You May Also Like

Add aws lambda layers to a lambda function using aws sam.

December 06, 2019  1 minute read  

Learn how to attach a Lambda Layer to a Lambda Function using AWS SAM (Serverless Application Model) and AWS console.

Create AWS Lambda Layers Using AWS SAM

December 05, 2019  3 minute read  

Learn how to create a Lambda Layer using AWS SAM (Serverless Application Model) and CloudFormation in YAML to reuse code, write zero redundant code and reduce Lambda deployment size.

Best Exchange Rate and Cheapest International Wire Transfer Service

November 21, 2019  5 minute read  

Ever feel that it costs quite a bit to send money overseas. Check out this service and save money on your next international wire transfer.

Upgrade AWS SAM CLI using Homebrew

October 18, 2019  1 minute read  

Learn how to upgrade your AWS SAM CLI using Homebrew.

• Web Browser
• Google Chrome Browser
• Mozilla Firefox Browser
• Microsoft Edge Browser
• Apple Safari Browser
• Tor Browser
• Opera Browser
• DuckDuckGo Browser
• Brave Browser

Network Tab in Apple Safari Browser

The Safari network tab acts as a valuable developer tool designed to help web architects, designers, and people eager to uncover the complexities of loading a web web page and interacting with servers It’s a thing that is required in the Safari Developer Tools Suite, a number of applications in order to facilitate debugging and enhancing net pages for

In the Network Tab, the Internet page benefits from a function that monitors local activity and is thoroughly analyzed for a set period of time. This function provides useful insights on many things, such as retrieved content, the time needed to complete each useful input, the overall performance of the web page and this data store that is critical to tracking optimal website performance, finding capacity issues and enjoying passive customers.

Overview of Network Tab:

The Network tab in Safari serves the primary purpose of managing network requests from the web browser. While Safari does not categorize its Network Tabs into specific categories, the information it provides can be broken down into several main sections:

• Requests: In this section, you will find a detailed list of all network requests initiated by the network. Each request is presented as a row in the tab, providing important information such as the request method (e.g., GET, POST), URL of the object, status code, and size
• Period: Time lets you carefully allocate the time needed for each network request to complete. This partitioning includes various factors such as DNS resolution time, connection establishment, and duration of request and response. These moments prove invaluable in identifying complications in packaging.
• Title: Headers as shown in this section specify the request and response headers associated with each network request. This feature is especially handy when troubleshooting headers, such as those with Cross-Origin Resource Sharing (CORS).
• Example View: The Preview tab allows users to directly browse the content of specific objects, including HTML, CSS, JavaScript, or JSON, right in the Network tab. This functionality proves to be very helpful in managing the content of the response quickly.
• Founded by: The initiator column provides insight into what triggers a particular web request. This trigger can be a user action, such as clicking on a link or button, or from the execution of the script that initiated the request.

The Network tab in Safari offers a whole lot of precious functions for internet builders and architects. Let’s take a more in-depth look at a number of its key roles

• Real-time monitoring: The Network tab gives an in-flight view of community hobbies. As the net page loads, it presents the requests which have been submitted and the corresponding responses. This characteristic helps loads in identifying issues and optimizing performance in real-time.
• Filtering and Sorting: This tool lets you customise and configure network requests primarily based on criteria inclusive of request type, reputation code, domain, and greater. This function simplifies the process of figuring out precise requests that require your interest.
• Ask questions about: For each community request, you’ll have get admission to to special information, along with request reaction headers, timeouts, and reaction content material. This stage of detail is essential for trouble solving and product improvement.
• Initiator Series: The Initiator Chain function enables you recognize the foundation reason of a selected community request. It is particularly useful to know where sudden or undesirable requests have happened.
• Throttle and Performance Analysis: Safari’s Network tab allows you to simulate exclusive community situations to see how your network performs below distinctive conditions, consisting of gradual 3G or speedy 4G, an vital ability so as to flex to one-of-a-kind network connections They’ve been watching them meet
• HAR exports: You have the capability to export community facts in HAR (HTTP Archive) format, that’s the default format for writing HTTP offerings. This function proves beneficial for sharing net records with friends or other analytics using external tools.

The Safari Network tab gives many treasured benefits for web developers and architects:

• Increased productiveness: One of its fundamental benefits is its potential to reveal network requests and uptime. This characteristic lets in you to become aware of bottlenecks and first-class song resource loads, in the long run ensuing in faster web page load instances and an advanced person experience
• Debugging functions: The Network tab goes beyond page-degree facts, supplying specified insights into community requests, header chains, and trigger chains. This depth makes it an vital tool for troubleshooting community connectivity, inputs, and server connectivity.
• Troubleshooting CORS Problems: Where networks request assets from distinctive assets, CORS-associated demanding situations may get up. Network Tab involves the rescue through enabling you to discover and remedy those problems by means of scrutinizing the request reaction headers.
• Improves the consumer experience: After all, optimizing the community without delay affects the overall person revel in. By leveraging the power of the Network Tab, you may ensure that your web pages load faster and less complicated, reducing bounce prices and growing consumer engagement

When to Use?

The Network Tab in Safari acts as a multitasking tool with many applications. Here are guidelines on when and how to use them effectively:

Correct page loading:

• Use the Network Tab to test the loading of your websites.
• Identify any slow drivers, redundant files, or unnecessary requests.
• Make necessary optimizations to enhance the user experience and to ensure fast and smooth loading time.

Troubleshooting network issues:

• When your web browser encounters network-related errors such as failed requests or unexpected actions, the Network tab becomes your troubleshooting partner.
• Analyze the request header, response status, and timer to identify and resolve the underlying problem.

Testing on networks:

• Use throttling features to simulate network conditions.
• This allows you to measure the performance of your web page under different network speeds, assuring that it performs well for users with different levels of connectivity.

CORS information search:

• Where your network starts making requests for a particular zone and runs into CORS (Cross-Origin Resource Sharing) problems, go to the Network Tab.
• Here, you can monitor request and response headers, gaining insights to help understand and resolve cross-origin issues.

Third party content management:

• If your web application relies on external resources such as APIs or external scripts, carefully monitor their loading behavior using the Network tab.
• Ensure that these items load properly and do not cause performance issues that could hamper the overall performance of your website.

Steps to use Network Tab in Safari:

Here are the steps to use the Network Tab in Safari with images and pictures:

Step 1: Open Safari Developer Tools

First, go to Safari Developer Tools on your Mac to start things off. Here’s how you can do it:

• Launch Safari on your Mac.
• Go to the Safari menu, which can be found in the top left corner of your screen.
• Select “Preferences”/”Settings…” from the drop down menu.
• Go to the “Advanced” tab in the Preferences window.
• Look for the “Show Develop menu in the menu bar” option and make sure it is enabled. This is necessary to get developer tools.

Step 2: Open the website you want to manage

Now, it’s time to determine which network you want to monitor using the Network Tab. Make sure the web page loads completely before proceeding to the next step.

Step 3: Go to the Network Tab

Let’s go to the Network Tab. Follow these steps:

• Click on the “Develop” menu in the Safari menu bar at the top of your screen.
• A dropdown menu will appear. Select “Connect Web Inspector”/”Show Web Inspector” from this menu.

Step 4: Go to the Network Tab

Once you’re done with the Web Inspector, you’re almost there. Here’s what happens next:

• In the Web Inspector screen that appears, note the navigation tabs at the top.
• Click on the one labeled “Network” to go to the Network Tab.

Step 5: Monitor Network Activity

Now that you are in the Network Tab, you will see network requests and other useful information. This is where you can start viewing web activity while the web browser is running.

Step 6: Analyze Requests and Resources

This is where the real magic happens. You can explore network requests in more detail:

• Click on individual web requests to see the subject, time, and content previews of the requests and responses.
• Use filtering and sorting options to focus on specific requests or business issues.

Example Showing Usage

Let’s use a actual-international scenario to illustrate a way to efficiently use Safari’s Network tab. Imagine you are an internet developer tasked with enhancing the capability of a internet site. Large photo documents are thought to be responsible for slower web page loads. Here is how you could use the Network Tab to diagnose and remedy this trouble:

Step 1: Get Safari Developer Tools

As noted earlier, visit Safari Developer Tools and launch the Network Tab.

Step 2: Load the Website

Go to the specific website you need to search. For this demonstration, we can use the GFG internet site.

Step 3: Monitor Network Requests

Notice how the Network Tab populates network requests as the website masses. These requests will consist of diverse elements consisting of HTML, CSS, JavaScript, and pics.

Step 4: Determine photograph file sizes

Use the Network Tab to manage requests by way of length, that specialize in those large picture files that make contributions to sluggish page load times

Step 5: Optimize Image Loading

Once you have got identified these big image documents, paintings on growing their weight. You can do that by means of clicking on pictures, using responsive graphics strategies, or applying lazy-weighting to the photographs at the lowest of the preview location of ​​the internet page

Step 6: Confirm the performance development

Reload the web browser and take a look at the Network Tab once more. You ought to observe a lower in photograph loading time and an overall development in internet browser loading velocity.

In this situation, Safari’s Network tab played a key role in solving the overall performance challenges related to picture loading. This empowered you to enforce features that considerably advanced the overall performance of the website.

In precis, Safari’s Network tab stands as a versatile and powerful device, presenting precious insights into web web page loading and community connectivity. Whether your goal is to enhance internet site overall performance, edit network problems, or look for CORS data, the community tab is an important partner for web developers and architects Through its potential to implement the steps mentioned on this manual in addition you may assure a web web page that performs well and offers an extraordinary consumer experience.

Similar Reads

• Geeks Premier League
• Web Browsers
• Apple Safari
• Geeks Premier League 2023

Please Login to comment...

• How to Underline in Discord
• How to Block Someone on Discord
• How to Report Someone on Discord
• How to add Bots to Discord Servers
• GeeksforGeeks Practice - Leading Online Coding Platform

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Welcome to Panopto Support

Welcome to the panopto forums, how to capture network logs from safari web browser, who can use this feature, overview .

This article will go over how to capture network logging from the Safari web browser. This process is best suited for users who have ongoing issues with Panopto in Safari and who want to obtain their network logs for future reference and troubleshooting with Panopto's Support team. Prerequisites 

• Safari browser

1. Accessing Network Logs 

2. Capture Console Logs 

3.  Send Logs from the Viewer 

Raymond Camden

Tip: viewing network requests with the safari debugger.

I'm not a heavy Safari user, but I use the heck out of the web tools when testing PhoneGap/Cordova apps. Sometime recently (I believe), the UI changed a bit in terms of the Network request panel and I couldn't see my requests anymore. I finally figured out the issue and I thought I'd share. To be clear, when I say I figured it out, I mean I found the right post on StackOverflow and all credit goes to user enyo . I'm just writing this up and sharing pretty pictures.

Ok, so what exactly is the issue? I noticed recently that when I go to my debug tools, select Timelines, click Network Requests and record, nothing seemed to show up in the detail panel, specifically:

I would click things in my app that I knew were firing XHR calls and nothing would show up in the detail. Turns out, the issue is due to timeline UI:

See that section I highlighted above? Look on the far right and see a darker gray "thingy" you can grab on top. Being that this is Apple they probably don't call it a thingy. What isn't obvious (well to me anyway) is that you can click and drag to select a portion of the time line. If you find the timeline moving too quick, just hit stop recording.

What you will discover is that the Network panel will only show items within a selected timeframe! So that makes sense I suppose, but I wish that by default you could select nothing and have everything show up.

Ok - but once you know that you may run into another problem. For me, my timeline was zoomed in such that every inch or so of screen space was about one tenth of a second. Note the timestamps in the screen shot above. I wasn't sure how to zoom, but on the StackOverflow link I shared above, they mentioned that if you scroll up and down it will zoom. I confirmed that scrolling down let me "zoom out" rather high:

I then selected from time zero to day 92000 or so, and frankly, if that isn't enough, then I don't know what is. ;)

I asked Apple's Safari evangelist ( Jonathan Davis ) if there was some way to always show all items and he said not yet. The zoom level, however, will stick, so in theory you don't have to keep zooming out. It also appears as if the selected range also persists. That means the only thing you need to do is hit the Recording button.

p.s. As a quick note, the UI for recording versus non-recording may be a bit weird. When you are not recording , the UI shows a red flight, which typically means that something is recording:

Support this Content!

If you like this content, please consider supporting me. You can become a Patron , visit my Amazon wishlist , or buy me a coffee ! Any support helps!

Want to get a copy of every new post? Use the form below to sign up for my newsletter.

Webmentions

View in English

Web development tools

Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions. Access these tools by enabling the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Unable to see Request Payload in Chrome Network tab

I'm using Windows 10. When I open up my Chrome devtools, go to an XHR request, and click on the Headers, I only see these three things:

Any ideas why I'm not seeing a Request Payload anywhere? I'm on Chrome Version 65.0.3325.162 (Official Build) (64-bit). For what it's worth, here's my Request Headers (with the URLs anonymized to "example"):

I'm wondering if the gzip, deflate for the Accept-Encoding is what's causing this. Or is this a Chrome bug?

Update : For what it's worth, I'm noticing that the "Type" of these problematic requests is json . Normally, elsewhere, in other Ajax-driven web apps, it's xhr . I guess that's the problem. So the question is, is this a Chrome bug or a Chrome feature?

• google-chrome
• google-chrome-devtools

2 Answers 2

if your form set enctype="multipart/form-data" , then Chrome will not catch the request payload.

Ah figured it out. This app is using Aurelia and this commit fixes the issue: https://github.com/aurelia/fetch-client/commit/03ae35f507464d5532e8b31011014b3040e594e3

Blobs obscure the JSON in Chrome dev tools, etc., and so we will stop using them for JSON.

That was the issue!

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged google-chrome google-chrome-devtools ..

• The Overflow Blog
• Where developers feel AI coding tools are working—and where they’re missing...
• Masked self-attention: How LLMs learn relationships between tokens
• Featured on Meta
• User activation: Learnings and opportunities
• Preventing unauthorized automated access to the network

Hot Network Questions

• I want a smooth orthogonalization process
• Is it common in modern classical music for timpani to play chromatic passages?
• In John 3:16, what is the significance of Jesus' distinction between the terms 'world' and 'everyone who believes' within the context?
• Is there a fast/clever way to return a logical vector if elements of a vector are in at least one interval?
• What is the meaning of "I apply my personality in a paste"?
• Do early termination fees hold up in court?
• How do I avoid getting depressed after receiving edits?
• How important exactly is the Base Attack Bonus?
• Which Lebanese politicians, in the 2023-24 violence cycle, had called upon Hezbollah not to persist in attacking Israel from Lebanese soil?
• Neil Tyson: gravity is the same every where on the geoid
• On a glassed landmass, how long would it take for plants to grow?
• Does the Rogue's Evasion cost a reaction?
• GetDataSourceItem<T>() does not exist in current context
• Rock-paper-scissors game as a beginner
• Can I breed fish in Minecraft?
• Why was Z moved to the end of the alphabet when Zeta was near the beginning?
• Purpose of sleeve on sledge hammer handle
• Is it possible to speed up this function?
• A military space Saga with a woman who is a brilliant tactician and strategist
• How similar were the MC6800 and MOS 6502?
• Does a passenger jet detect excessive weight in the tail after it's just landed?
• In John 8, why did the Jews call themselves "children of Abraham" not "children of Jacob" or something else?
• What is "illegal, immoral or improper" use in CPOL?
• Could you compress chocolate such that it has the same density and shape as a real copper coin?

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Remember language
• Português (do Brasil)

HTTP Messages

HTTP messages are how data is exchanged between a server and a client. There are two types of messages: requests sent by the client to trigger an action on the server, and responses , the answer from the server.

Web developers, or webmasters, rarely craft these textual HTTP messages themselves: software, a Web browser, proxy, or Web server, perform this action. They provide HTTP messages through config files (for proxies or servers), APIs (for browsers), or other interfaces.

HTTP requests, and responses, share similar structure and are composed of:

• A start-line describing the requests to be implemented, or its status of whether successful or a failure. This is always a single line.
• An optional set of HTTP headers specifying the request, or describing the body included in the message.
• A blank line indicating all meta-information for the request has been sent.
• An optional body containing data associated with the request (like content of an HTML form), or the document associated with a response. The presence of the body and its size is specified by the start-line and HTTP headers.

The start-line and HTTP headers of the HTTP message are collectively known as the head of the requests, and the part afterwards that contains its content is known as the body .

HTTP Requests

Request line.

Note: The start-line is called the "request-line" in requests.

HTTP requests are messages sent by the client to initiate an action on the server. Their request-line contains three elements:

• An HTTP method , a verb (like GET , PUT or POST ) or a noun (like HEAD or OPTIONS ), that describes the action to be performed. For example, GET indicates that a resource should be fetched or POST means that data is pushed to the server (creating or modifying a resource, or generating a temporary document to send back).
• POST / HTTP/1.1
• GET /background.png HTTP/1.0
• HEAD /test.html?query=alibaba HTTP/1.1
• OPTIONS /anypage.html HTTP/1.0
• A complete URL, known as the absolute form , is mostly used with GET when connected to a proxy. GET https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
• The authority component of a URL, consisting of the domain name and optionally the port (prefixed by a ':' ), is called the authority form . It is only used with CONNECT when setting up an HTTP tunnel. CONNECT developer.mozilla.org:80 HTTP/1.1
• The asterisk form , a simple asterisk ( '*' ) is used with OPTIONS , representing the server as a whole. OPTIONS * HTTP/1.1
• The HTTP version , which defines the structure of the remaining message, acting as an indicator of the expected version to use for the response.

HTTP headers from a request follow the same basic structure of an HTTP header: a case-insensitive string followed by a colon ( ':' ) and a value whose structure depends upon the header. The whole header, including the value, consists of one single line, which can be quite long.

Many different headers can appear in requests. They can be divided in several groups:

• General headers , like Via , apply to the message as a whole.
• Request headers , like User-Agent or Accept , modify the request by specifying it further (like Accept-Language ), by giving context (like Referer ), or by conditionally restricting it (like If-None-Match ).
• Representation headers like Content-Type that describe the original format of the message data and any encoding applied (only present if the message has a body).

The last part of a request is the body. Not all requests have one: requests with a GET HTTP method should only be used to request data and shouldn't contain a body.

Bodies can be broadly divided into two categories:

• Single-resource bodies, consisting of one single file, defined by the two headers: Content-Type and Content-Length .
• Multiple-resource bodies , consisting of a multipart body, each containing a different bit of information. This is typically associated with HTML Forms .

HTTP Responses

Status line.

Note: The start-line is called the "status line" in responses.

The start line of an HTTP response, called the status line , contains the following information:

• The protocol version , usually HTTP/1.1 , but can also be HTTP/1.0 .
• A status code , indicating success or failure of the request. Common status codes are 200 , 404 , or 302 .
• A status text . A brief, purely informational, textual description of the status code to help a human understand the HTTP message.

A typical status line looks like: HTTP/1.1 404 Not Found .

HTTP headers for responses follow the same structure as any other header: a case-insensitive string followed by a colon ( ':' ) and a value whose structure depends upon the type of the header. The whole header, including its value, presents as a single line.

Many different headers can appear in responses. These can be divided into several groups:

• General headers , like Via , apply to the whole message.
• Response headers , like Vary and Accept-Ranges , give additional information about the server which doesn't fit in the status line.

The last part of a response is the body. Not all responses have one: responses with a status code that sufficiently answers the request without the need to include content (like 201 Created or 204 No Content ) usually don't.

Bodies can be broadly divided into three categories:

• Single-resource bodies, consisting of a single file of known length, defined by the two headers: Content-Type and Content-Length .
• Single-resource bodies, consisting of a single file of unknown length, encoded by chunks with Transfer-Encoding set to chunked .
• Multiple-resource bodies , consisting of a multipart body, each containing a different section of information. These are relatively rare.

HTTP/2 Frames

HTTP/1.x messages have a few drawbacks for performance:

• Headers, unlike bodies, are uncompressed.
• Headers are often very similar from one message to the next one, yet still repeated across connections.
• Although HTTP/1.1 has pipelining , it's not activated by default in most browsers, and doesn't allow for multiplexing (i.e. sending requests concurrently). Several connections need opening on the same server to send requests concurrently; and warm TCP connections are more efficient than cold ones.

HTTP/2 introduces an extra step: it divides HTTP/1.x messages into frames which are embedded in a stream. Data and header frames are separated, which allows header compression. Several streams can be combined together, a process called multiplexing , allowing more efficient use of underlying TCP connections.

HTTP frames are now transparent to Web developers. This is an additional step in HTTP/2, between HTTP/1.1 messages and the underlying transport protocol. No changes are needed in the APIs used by Web developers to utilize HTTP frames; when available in both the browser and the server, HTTP/2 is switched on and used.

HTTP messages are the key in using HTTP; their structure is simple, and they are highly extensible. The HTTP/2 framing mechanism adds a new intermediate layer between the HTTP/1.x syntax and the underlying transport protocol, without fundamentally modifying it: building upon proven mechanisms.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome DevTools
• More panels

Network features reference

Discover new ways to analyze how your page loads in this comprehensive reference of Chrome DevTools network analysis features.

Record network requests

By default, DevTools records all network requests in the Network panel, so long as DevTools is open.

Stop recording network requests

To stop recording requests:

• Press Command > + E (Mac) or Control + E (Windows, Linux) while the Network panel is in focus.

Clear requests

Save requests across page loads

To save requests across page loads, check the Preserve log checkbox on the Network panel. DevTools saves all requests until you disable Preserve log .

Capture screenshots during page load

Capture screenshots to analyze what users see as they wait for your page to load.

Reload the page while the Network panel is in focus to capture screenshots.

Once captured, you can interact with screenshots in the following ways:

• Hover over a screenshot to view the point at which that screenshot was captured. A yellow line appears on the Overview pane.
• Click a screenshot's thumbnail to filter out any requests that occurred after the screenshot was captured.
• Double-click a thumbnail to zoom in on it.

Replay XHR request

To replay an XHR request, do one of the following in the Requests table:

• Select the request and press R .
• Right-click the request and select Replay XHR .

Change loading behavior

Emulate a first-time visitor by disabling the browser cache.

To emulate how a first-time user experiences your site, check the Disable cache checkbox. DevTools disables the browser cache. This more accurately emulates a first-time user's experience, because requests are served from the browser cache on repeat visits.

Disable the browser cache from the Network conditions drawer

If you want to disable the cache while working in other DevTools panels, use the Network conditions drawer.

• Check or clear 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 .

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.

To simulate a completely offline network experience, select Offline from the Network throttling drop-down menu next to the Disable cache checkbox.

DevTools displays a warning icon next to the Network tab to remind you that offline is enabled.

Emulate slow network connections

To emulate fast 4G, slow 4G, or 3G, select the corresponding preset from the Throttling drop-down menu in the action bar at the top.

DevTools displays a warning warning icon next to the Network panel to remind you that throttling is enabled.

Create custom throttling profiles

In addition to presets, such as slow or fast 4G, you can also add your own custom throttling profiles:

• Open the Throttling menu and select Custom > Add... .
• Set up a new throttling profile as described in settings Settings > Throttling .

Back on the Network panel, select your new profile from the Throttling drop-down menu.

Throttle WebSocket connections

In addition to HTTP requests, DevTools throttles WebSocket connections since version 99.

To observe WebSocket throttling:

• Initiate a new connection, for example, by using a test tool .
• On the Network panel, select No throttling and send a message through the connection.
• Create a very slow custom throttling profile , for example, 10 kbit/s . Such a slow profile will help you notice the difference.
• On the Network panel, select the profile and send another message.
• Toggle the WS filter, click your connection name, open the Messages tab, and check the time difference between sent and echoed messages with and without throttling. For example:

Emulate slow network connections from the Network conditions drawer

If you want to throttle the network connection while working in other DevTools panels, use the Network conditions drawer.

• Select a connection speed from the Network throttling menu.

Manually clear browser cookies

To manually clear browser cookies at any time, right-click anywhere in the Requests table and select Clear browser cookies .

Override HTTP response headers

See Override files and HTTP response headers locally .

Override the user agent

To manually override the user agent:

• Clear Select automatically .
• Choose a user agent option from the menu, or enter a custom one in the box.

Search requests

To search across request headers, payloads, and responses:

Press the following shortcut to open the Search tab on the right:

• On macOS, Command + F .
• On Windows or Linux, Control + F .

In the Search tab, enter your query and press Enter . Optionally click match_case or regular_expression to turn on case sensitivity or regular expressions respectively.

Click one of the search results. The Network panel highlights in yellow the request that matched. Additionally, the panel also opens the Headers or Response tab and highlights the string that matched there, if any.

To refresh search results, click refresh Refresh . To clear results, click block Clear .

For more information on all the ways you can search in DevTools, see Search: Find text across all loaded resources .

Filter requests

Filter requests by properties.

Use the Filter box to filter requests by properties, such as the domain or size of the request.

If you can't see the box, the Filters pane is probably hidden. See Hide the Filters pane .

To invert your filter, check the Invert checkbox next to the Filter box.

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 aren't supported.

Next is a complete list of supported properties.

• cookie-domain . Show the resources that set a specific cookie domain .
• cookie-name . Show the resources that set a specific cookie name .
• cookie-path . Show the resources that set a specific cookie path .
• cookie-value . Show the resources that set a specific cookie value .
• 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 shows a populates the autocomplete drop-down menu with all of the domains it has encountered.
• has-overrides . Show requests that have overridden content , headers , any overrides ( yes ), or no overrides ( no ). You can add the corresponding Has overrides column to the request table.
• has-response-header . Show the resources that contain the specified HTTP response header. DevTools populates the autocomplete drop-down 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 autocomplete drop-down with all of the HTTP methods it has encountered.
• mime-type . Show resources of a specified MIME type. DevTools populates the autocomplete drop-down with all MIME types it has encountered.
• mixed-content . Show all mixed content resources ( mixed-content:all ) or just the ones that are displayed ( mixed-content:displayed ).
• priority . Show resources whose priority level matches the specified value.
• resource-type . Show resources of a resource type, for example, image. DevTools populates the autocomplete drop-down with all resource types it has encountered.
• response-header-set-cookie . Show raw Set-Cookie headers in the Issues tab. Malformed cookies with incorrect Set-Cookie headers will be flagged in the Network panel.
• 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 drop-down menu with all of the status codes it has encountered.
• url . Show the resources that have a url matching the specified value.

Filter requests by type

To filter requests by request type, click the All , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket), Wasm (WebAssembly), 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.

Filter requests by time

Drag left or right on the Overview pane to display only the requests that were active during that timeframe. The filter is inclusive. Any request that was active during the highlighted time is shown.

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.

The status bar at the bottom displays the number of the shown requests out of the total.

Hide extension URLs

To focus on the code you author, you can filter out irrelevant requests sent by extensions you may have installed in Chrome. Extension requests have URLs that start with chrome-extension:// .

Show only the requests with blocked response cookies

Additionally, the Network panel shows a warning warning icon next to a request affected by the third-party cookie phaseout or exempted from it. Hover over the icon to see a tooltip with a clue and click it to go to the Issues panel for more information.

Show only blocked requests

The Requests table highlights blocked requests in red. The status bar at the bottom displays the number of the shown requests out of the total.

Show only third-party requests

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

In this example, the Waterfall is sorted 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.

The Requests table displays the following columns by default:

• Name . The filename of, or an identifier for, the resource.

Status . This column can show the following values:

• HTTP status code, for example, 200 or 404 .
• CORS error for requests failed due to Cross-Origin Resource Sharing (CORS).
• (blocked:origin) for requests with misconfigured headers. Hover over this status value to see a tooltip with a hint on what went wrong.
• (failed) followed by the error message.

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 using 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. The displayed options have check marks next to them.

You can add or remove the following additional columns: Path , URL , Method , Protocol , Scheme , Domain , Remote address , Remote address space , Initiator address space , Cookies , Set cookies , Priority , Connection ID , Has overrides , and Waterfall .

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 .
• In the dialog window, click Add custom header , enter its name, and click Add .

Group requests by inline frames

If inline frames on a page initiate a lot of requests, you can make the request log friendlier by grouping them.

To view a request initiated by an inline frame, expand it in the request log.

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 .

Analyze the messages of a WebSocket connection

To view the messages of a WebSocket connection:

• Under the Name column of the Requests table, click the URL of the WebSocket connection.
• Click the Messages tab. The table shows the last 100 messages.

To refresh the table, re-click the name of the WebSocket connection under the Name column of the Requests table.

The table contains three columns:

• Data . The message payload. If the message is plain text, it's displayed here. For binary opcodes, this column displays the opcode's name and code. The following opcodes are supported: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame.
• Length . The length of the message payload, in bytes.
• Time . The time when the message was received or sent.

Messages are color-coded according to their type:

• Outgoing text messages are light-green.
• Incoming text messages are white.
• WebSocket opcodes are light-yellow.
• Errors are light-red.

Analyze events in a stream

To view the events that servers stream through Fetch API , EventSource API , and XHR:

• Record network requests on a page that streams events. For example, open this demo page and click any of the three buttons.
• In Network , select a request and open the EventStream tab.

To filter events, specify a regular expression in the filter bar at the top of the EventStream tab.

To clear the list of captured events, click block Clear .

View a preview of a response body

To view a preview of a response body:

• Click the URL of the request, under the Name column of the Requests table.
• Click the Preview tab.

This tab is mostly useful for viewing images.

View a response body

To view the response body to a request:

• Click the Response tab.

View HTTP headers

To view HTTP header data of a request:

• Click a request in the Requests table.
• Open the Headers tab and scroll down to General , Response Headers , Request Headers , and, optionally, Early Hints Headers sections.

In the General section, DevTools shows you human-readable status message next to the received HTTP status code.

In the Response Headers section, you can hover over a header value and click the edit Edit button to override the response header locally .

View HTTP header source

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.

Provisional headers warning

Sometimes the Headers tab shows the Provisional headers are shown... warning message. This may be due to the following reasons:

DevTools can also display only provisional headers due to security reasons.

View request payload

To view the request's payload, that is, its query string parameters and form data, select a request from the Requests table and open the Payload tab.

View payload source

By default, DevTools shows the payload in a human-readable form.

To view the sources of query string parameters and form data, on the Payload tab, click view source next to the Query String Parameters or Form Data sections.

View URL-decoded arguments of query string parameters

To toggle URL-encoding for arguments, on the Payload tab, click view decoded or view URL-encoded .

View cookies

To view the cookies sent in a request's HTTP header:

• Click the Cookies tab.

For a description of each of the columns, see Fields .

To modify cookies, see View, edit, and delete cookies .

View the timing breakdown of a request

To view the timing breakdown of a request:

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

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.

Timing breakdown phases explained

Here's more information about each of the phases you may see in the Timing tab:

• 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 after connection start for any of the reasons described in Queueing .
• DNS Lookup . The browser is resolving the request's IP address.
• Initial connection . The browser is establishing a connection, including TCP handshakes or retries and negotiating an SSL.
• 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, either directly from the network or from a service worker. This value is the total amount of time spent reading the response body. Larger than expected values could indicate a slow network, or that the browser is busy performing other work which delays the response from being read.

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.

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.

View the total number of requests

The total number of requests is listed in the Summary pane, at the bottom of the Network panel.

View the total size of transferred and loaded resources

DevTools lists the total size of transferred and loaded (uncompressed) resources in the Summary pane, at the bottom of the Network panel.

See View the uncompressed size of a resource to see how large resources are after the browser uncompresses them.

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.

View the uncompressed size of a resource

In this example, the compressed size of the www.google.com document that was sent over the network was 43.8 KB , whereas the uncompressed size was 136 KB .

Export requests data

Save all network requests to a har file.

HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. The format is a JSON object with a particular set of fields.

You can save all network requests to a HAR file in two ways:

Once you have a HAR file, you can import it back into DevTools for analysis in two ways:

• Drag-and-drop the HAR file into the Requests table.

Copy a request, a filtered set of requests, or all of them to the clipboard

Under the Name column of the Requests table, right-click a request, hover over Copy , and select one of the following options.

To copy a single request, its response, or stack trace:

• Copy URL . Copy the request's URL to the clipboard.
• Copy as cURL . Copy the request as a cURL command.
• Copy as PowerShell . Copy the request as a PowerShell command.
• Copy as fetch . Copy the request as a fetch call.
• Copy as fetch (Node.js) . Copy the request as a Node.js fetch call.
• Copy response . Copy the response body to the clipboard.
• Copy stack trace . Copy the request's stack track to the clipboard.

To copy all requests:

• Copy all URLs . Copy URLs of all requests to the clipboard.
• Copy all as cURL . Copy all requests as a chain of cURL commands.
• Copy all as PowerShell . Copy all requests as a chain of PowerShell commands.
• Copy all as fetch . Copy all requests as a chain of fetch calls.
• Copy all as fetch (Node.js) . Copy all requests as a chain of Node.js fetch calls.
• Copy all as HAR . Copy all requests as HAR data.

To copy a filtered set of requests, apply a filter to the network log, right-click a request, and select:

• Copy all listed URLs . Copy URLs of all filtered requests to the clipboard.
• Copy all listed as cURL . Copy all filtered requests as a chain of cURL commands.
• Copy all listed as PowerShell . Copy all filtered requests as a chain of PowerShell commands.
• Copy all listed as fetch . Copy all filtered requests as a chain of fetch calls.
• Copy all listed as fetch (Node.js) . Copy all filtered requests as a chain of Node.js fetch calls.
• Copy all listed as HAR . Copy all filtered requests as HAR data.

Change the layout of the Network panel

Expand or collapse sections of the Network panel UI to focus on what's important to you.

Hide the Filters pane

Use big request rows

Use big rows when you want more whitespace in your network requests table. Some columns also provide a little more information when using big rows. For example, the bottom value of the Size column is the uncompressed size of a request and the Priority column shows both the initial (bottom value) and final (top value) fetch priority.

Hide the Overview track

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-03-12 UTC.