CINXE.COM

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="robots" content="noodp"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover"> <meta name="theme-color" content="hsl(203.6, 100%, 12%)"> <title> Network Tab | WebKit</title> <meta name="application-name" content="WebKit"> <link rel="stylesheet" type="text/css" href="https://webkit.org/wp-content/themes/webkit/style.css?2022100501" media="all"> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css"> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Mono,v2" type="text/css"> <meta name="supported-color-schemes" content="light dark"> <noscript> <img src="https://shynet.webkit.org/ingress/561b9e53-fb8c-4297-ae4d-bde05e8daa59/pixel.gif"> </noscript> <script defer src="https://shynet.webkit.org/ingress/561b9e53-fb8c-4297-ae4d-bde05e8daa59/script.js"></script> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://webkit.org/feed/"> <link rel="alternate" type="text/xml" title="RSS .92" href="https://webkit.org/feed/rss/"> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="https://webkit.org/feed/atom/"> <link rel="pingback" href="https://webkit.org/wp/xmlrpc.php"> <link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="/favicon.ico"> <meta name='robots' content='max-image-preview:large' /> <link rel='stylesheet' id='wp-block-library-css' href='https://webkit.org/wp/wp-includes/css/dist/block-library/style.min.css?ver=6.7' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://webkit.org/wp/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7" /> <link rel="canonical" href="https://webkit.org/web-inspector/network-tab/" /> <link rel='shortlink' href='https://webkit.org/?p=11370' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://webkit.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwebkit.org%2Fweb-inspector%2Fnetwork-tab%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://webkit.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwebkit.org%2Fweb-inspector%2Fnetwork-tab%2F&format=xml" />  <meta itemprop="name" content="Network Tab"> <meta itemprop="description" content="The Network Tab shows a table of every resource that has been requested since Web Inspector was opened."> <meta itemprop="image" content="https://webkit.org/wp-content/uploads/web-inspector_Network_Tab_Light.png">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image:src" content="https://webkit.org/wp-content/uploads/web-inspector_Network_Tab_Light.png"> <meta name="twitter:site" content="@webkit"> <meta name="twitter:title" content="Network Tab"> <meta name="twitter:description" content="The Network Tab shows a table of every resource that has been requested since Web Inspector was opened."> <meta name="twitter:creator" content="@dcrousso">  <meta property="og:title" content="Network Tab"> <meta property="og:type" content="article"> <meta property="og:url" content="https://webkit.org/web-inspector/network-tab/"> <meta property="og:image" content="https://webkit.org/wp-content/uploads/web-inspector_Network_Tab_Light.png"> <meta property="og:description" content="The Network Tab shows a table of every resource that has been requested since Web Inspector was opened."> <meta property="og:site_name" content="WebKit"> <meta property="article:published_time" content="2020-12-16T11:00:17-08:00"> <meta property="article:modified_time" content="2020-12-15T12:21:04-08:00"> <meta property="fb:admins" content="1085088865"> <style type="text/css">p > picture.inline, li > picture.inline { vertical-align: -1px; } .keyboard-shortcut > a code { padding: 0 0.8rem 0.2rem; color: inherit; box-shadow: inset 0px -2px 1px hsl(0, 0%, 0%, 0.15); } .keyboard-shortcut > a > code { font-family: 'SF Pro Text', 'Lucida Grande', -apple-system, system-ui, Helvetica } .keyboard-shortcut > a > strong { font-weight: initial; } @media (prefers-color-scheme: dark) { .keyboard-shortcut > a code { box-shadow: inset 0px -2px 1px hsl(0, 0%, 100%, 0.15); } }</style></head> <body class="web_inspector_page-template-default single single-web_inspector_page postid-11370">  <svg xmlns="http://www.w3.org/2000/svg"> <style> svg { display: block; width: 0; height: 0; } </style> <filter id="invertLightness" x="0" y="0" style="color-interpolation-filters: sRGB"> <feColorMatrix type="matrix" in="SourceGraphic" result="red" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1" /> <feColorMatrix type="matrix" in="SourceGraphic" result="green" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1" /> <feColorMatrix type="matrix" in="SourceGraphic" result="blue" values="0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1" /> <feBlend in="red" in2="green" mode="lighten" result="maxyellow" /> <feBlend in="maxyellow" in2="blue" mode="lighten" result="max" /> <feBlend in="red" in2="green" mode="darken" result="minyellow" /> <feBlend in="minyellow" in2="blue" mode="darken" result="min" /> <feComponentTransfer result="adjustment" in="min"> <feFuncR type="linear" intercept="1" slope="-1" /> <feFuncG type="linear" intercept="1" slope="-1" /> <feFuncB type="linear" intercept="1" slope="-1" /> </feComponentTransfer> <feComposite operator="arithmetic" in="SourceGraphic" in2="adjustment" k1="0" k2="1" k3="1" k4="-1" result="channelAdjustment" /> <feComposite operator="arithmetic" in="channelAdjustment" in2="max" k1="0" k2="1" k3="-1" k4="1" result="finalColors" /> <feComposite operator="in" in="finalColors" in2="SourceAlpha" /> </filter> </svg> <header aria-label="WebKit.org Header" id="header"> <div class="page-width"> <a href="/"><div id="logo" class="site-logo">WebKit</div></a> <nav id="site-nav" aria-label="Site Menu"> <div class="menu-main-menu-container"><input type="checkbox" id="menu-main-menu-toggle" class="menu-toggle" /><label for="menu-main-menu-toggle" class="label-toggle main-menu" data-open="Main Menu" data-close="Close Menu"></label><ul id="menu-main-menu" class="menu" role="menubar"><li id="menu-item-6091" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6091"><a href="https://webkit.org/downloads/" role="menuitem">Downloads</a></li> <li id="menu-item-4272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4272"><input type="checkbox" id="toggle-4272" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4272" aria-controls="sub-menu-for-4272" aria-expanded="true"><label for="toggle-4272" class="label-toggle">Feature Status</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4272"> <li id="menu-item-13052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13052"><a href="https://webkit.org/css-status/" role="menuitem">CSS Features</a></li> <li id="menu-item-14388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14388"><a href="https://webkit.org/standards-positions/" role="menuitem">Standards Positions</a></li> </ul> </li> <li id="menu-item-9988" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9988"><input type="checkbox" id="toggle-9988" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-9988" aria-controls="sub-menu-for-9988" aria-expanded="true"><label for="toggle-9988" class="label-toggle">Documentation</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-9988"> <li id="menu-item-9989" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9989"><a href="/web-inspector" role="menuitem">Web Inspector</a></li> <li id="menu-item-10868" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10868"><a href="https://webkit.org/tracking-prevention/" role="menuitem">Tracking Prevention</a></li> </ul> </li> <li id="menu-item-4282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4282"><input type="checkbox" id="toggle-4282" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4282" aria-controls="sub-menu-for-4282" aria-expanded="true"><label for="toggle-4282" class="label-toggle">Policies</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4282"> <li id="menu-item-10037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10037"><a href="https://webkit.org/project/" role="menuitem">Project Goals</a></li> <li id="menu-item-13077" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13077"><a href="https://webkit.org/bug-prioritization/" role="menuitem">Bug Prioritization</a></li> <li id="menu-item-13076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13076"><a href="https://webkit.org/bug-report-guidelines/" role="menuitem">Bug Report Guidelines</a></li> <li id="menu-item-13075" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13075"><a href="https://webkit.org/code-style-guidelines/" role="menuitem">Code Style Guidelines</a></li> <li id="menu-item-13074" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13074"><a href="https://webkit.org/commit-and-review-policy/" role="menuitem">Commit and Review Policy</a></li> <li id="menu-item-13073" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13073"><a href="https://webkit.org/feature-policy/" role="menuitem">Feature Policy</a></li> <li id="menu-item-13072" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13072"><a href="https://webkit.org/security-policy/" role="menuitem">Security Policy</a></li> <li id="menu-item-13071" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13071"><a href="https://webkit.org/tracking-prevention-policy/" role="menuitem">Tracking Prevention Policy</a></li> </ul> </li> <li id="menu-item-4274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4274"><input type="checkbox" id="toggle-4274" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4274" aria-controls="sub-menu-for-4274" aria-expanded="true"><label for="toggle-4274" class="label-toggle">Contribute</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4274"> <li id="menu-item-4277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4277"><a href="https://webkit.org/getting-started/" role="menuitem">Getting Started</a></li> <li id="menu-item-4284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4284"><a href="https://webkit.org/contributing-code/" role="menuitem">Contributing Code</a></li> <li id="menu-item-4281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4281"><a href="https://webkit.org/testing-contributions/" role="menuitem">Testing Contributions</a></li> <li id="menu-item-4273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4273"><a href="https://webkit.org/reporting-bugs/" role="menuitem">How to Report Bugs</a></li> <li id="menu-item-4278" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4278"><a href="https://github.com/WebKit/WebKit" role="menuitem">GitHub Repository</a></li> </ul> </li> <li id="menu-item-4270" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-has-children menu-item-4270"><input type="checkbox" id="toggle-4270" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4270" aria-controls="sub-menu-for-4270" aria-expanded="true"><label for="toggle-4270" class="label-toggle">Blog</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4270"> <li id="menu-item-13057" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13057"><a href="https://webkit.org/blog/category/news/" role="menuitem">News Posts</a></li> <li id="menu-item-13058" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13058"><a href="https://webkit.org/blog/category/css/" role="menuitem">CSS Posts</a></li> <li id="menu-item-13063" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13063"><a href="https://webkit.org/blog/category/contributing/" role="menuitem">Contributing Posts</a></li> <li id="menu-item-13062" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13062"><a href="https://webkit.org/blog/category/privacy/" role="menuitem">Privacy Posts</a></li> <li id="menu-item-13060" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13060"><a href="https://webkit.org/blog/category/performance/" role="menuitem">Performance Posts</a></li> <li id="menu-item-13061" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13061"><a href="https://webkit.org/blog/category/javascript/" role="menuitem">JavaScript Posts</a></li> <li id="menu-item-13056" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13056"><a href="https://webkit.org/blog/category/standards/" role="menuitem">Standards Posts</a></li> <li id="menu-item-13059" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13059"><a href="https://webkit.org/blog/category/web-inspector/" role="menuitem">Web Inspector Posts</a></li> <li id="menu-item-13055" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13055"><a href="https://webkit.org/blog/category/safari-technology-preview/" role="menuitem">Safari Technology Preview Posts</a></li> </ul> </li> <li><form action="/" method="get"><input type="search" name="s" class="search-input" value=""></form></li></ul></div></nav> </div> </header> <main id="content"> <div class="page-width"> <article class="page" id="post-11370"> <h1><a href="https://webkit.org/web-inspector/" class="landing-link">Web Inspector Reference</a><a href="https://webkit.org/web-inspector/network-tab/" rel="bookmark" title="Permanent Link: Network Tab">Network Tab</a></h1> <div class="bodycopy"> <p>The <strong>Network</strong> Tab shows a table of every resource that has been requested since Web Inspector was opened. In addition to CSS, JS, and HTML resources, the table also includes API-driven network requests such as XHR, <code>fetch</code>, <code>WebSocket</code>, <code>navigator.sendBeacon</code>, etc.</p> <picture title="Network Tab"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Dark.png 2x" class="wp-image-11377"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Light.png 2x" class="wp-image-11378"></picture> <p>By default, each resource in the table is sorted based on when the resource request began. Columns can be shown/hidden by right-clicking on the header of the table and checking/unchecking the desired column. In addition to the columns shown above (<strong>Name</strong>, <strong>Domain</strong>, <strong>Type</strong>, <strong>Transfer Size</strong>, <strong>Time</strong>, and the <strong>Waterfall</strong>), there are also columns that can be shown for <strong>MIME Type</strong>, <strong>Method</strong>, <strong>Scheme</strong>, <strong>Status</strong>, <strong>Protocol</strong>, <strong>Initiator</strong>, <strong>Priority</strong>, <strong>IP Address</strong>, <strong>Connection ID</strong>, and <strong>Resource Size</strong>.</p> <p>Resources in the table can be filtered either via the URL input or the resource type segmented controls found above the table. It’s also possible to keep the items currently in the table from being replaced during page navigations by checking <strong>Preserve Log</strong>.</p> <p>Statistics about the resources currently shown in the table are listed below the table:</p> <ul> <li><picture class="inline" title="Domain Count"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Domains_Dark.png 2x" class="wp-image-11381"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Domains_Light.png 2x" class="wp-image-11382"></picture> [<strong>Domain Count</strong>] is the number of unique domains that were communicated with.</li> <li><picture class="inline" title="Resource Count"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Resources_Dark.png 2x" class="wp-image-11395"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Resources_Light.png 2x" class="wp-image-11396"></picture> [<strong>Resource Count</strong>] is the number of resources that have been loaded.</li> <li><picture class="inline" title="Total Resource Size"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Total_Size_Dark.png 2x" class="wp-image-11405"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Total_Size_Light.png 2x" class="wp-image-11406"></picture> [<strong>Total Resource Size</strong>] is the total uncompressed bytes of all resources.</li> <li><picture class="inline" title="Total Transfer Size"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Transferred_Dark.png 2x" class="wp-image-11407"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Transferred_Light.png 2x" class="wp-image-11408"></picture> [<strong>Total Transfer Size</strong>] is the total bytes transferred over the network for all resources.</li> <li><picture class="inline" title="Redirect Count"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Redirects_Dark.png 2x" class="wp-image-11393"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Redirects_Light.png 2x" class="wp-image-11394"></picture> [<strong>Redirect Count</strong>] is a count of all redirects made for all resources.</li> <li><picture class="inline" title="Load Time"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Load_Time_Dark.png 2x" class="wp-image-11389"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Load_Time_Light.png 2x" class="wp-image-11390"></picture> [<strong>Load Time</strong>] is when the <code>"load"</code> event was fired.</li> </ul> <p>Selecting a resource in the table will show a more dedicated view about that resource, including a number of different panes, each focusing on a particular aspect of that resource.</p> <ul> <li id="preview-pane"> The <strong>Preview</strong> pane displays the contents of the resource as if it were viewed in the <a href="https://webkit.org/web-inspector/sources-tab/"><strong>Sources</strong> Tab</a>.</p> <picture title="Preview pane"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Preview_Pane_Dark.png 2x" class="wp-image-11391"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Preview_Pane_Light.png 2x" class="wp-image-11392"></picture> </li> <li id="headers-pane"> The <strong>Headers</strong> pane shows information about the request and response headers, including any redirects.</p> <picture title="Headers pane"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Headers_Pane_Dark.png 2x" class="wp-image-11383"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Headers_Pane_Light.png 2x" class="wp-image-11384"></picture> <p> Resources loaded from JavaScript will also have an <picture class="inline" title="Initiator Call Stack"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Initiator_Call_Stack_Dark.png 2x" class="wp-image-11387"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Initiator_Call_Stack_Light.png 2x" class="wp-image-11388"></picture> [<strong>Call Stack</strong>] next to the <strong>Initiator</strong> that will show a popover with a stack trace when clicked. </li> <li id="cookies-pane"> The <strong>Cookies</strong> pane parses and displays any request and response cookies in a table for easier readability.</p> <picture title="Cookies pane"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Cookies_Pane_Dark.png 2x" class="wp-image-11379"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Cookies_Pane_Light.png 2x" class="wp-image-11380"></picture> </li> <li id="sizes-pane"> The <strong>Sizes</strong> pane includes details about the sizes of the various payloads involved with the request.</p> <picture title="Sizes pane"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Sizes_Pane_Dark.png 2x" class="wp-image-11401"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Sizes_Pane_Light.png 2x" class="wp-image-11402"></picture> </li> <li id="timing-pane"> The <strong>Timing</strong> pane graphs a resource timing data of the selected resource, broken down into distinct phases.</p> <picture title="Timing pane"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Timing_Pane_Dark.png 2x" class="wp-image-11403"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Timing_Pane_Light.png 2x" class="wp-image-11404"></picture> <p> This information is also shown in a popover when clicking on the activity bars of any resource in the <strong>Waterfall</strong> column of the table. </li> <li id="security-pane"> The <strong>Security</strong> pane provides details about the security of the connection and certificate used to fetch the resource.</p> <picture title="Security pane"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Security_Pane_Dark.png 2x" class="wp-image-11397"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Security_Pane_Light.png 2x" class="wp-image-11398"></picture> </li> </ul> <h2><a name="sharing"></a>Sharing</h2> <p>To export data in the table into an HTTP Archive (HAR) file, click <picture class="inline" title="Export"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Export_Dark.png 2x" class="wp-image-10644"><img srcset="/wp-content/uploads/web-inspector_Export_Light.png 2x" class="wp-image-10645"></picture> <strong>Export</strong> or by press <span class="keyboard-shortcut"><a href="/web-inspector/keyboard-shortcuts/#content-browser"><code>⌘</code> <strong><code>S</code></strong></a></span>. To import previously exported HAR files, click <picture class="inline" title="Import"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Import_Dark.png 2x" class="wp-image-9788"><img srcset="/wp-content/uploads/web-inspector_Import_Light.png 2x" class="wp-image-9789"></picture> <strong>Import</strong> or drag-and-drop the files over Web Inspector. Imported HAR files are individually viewable by selecting that HAR file after clicking <picture class="inline" title="Select HAR"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Select_HAR_Dark.png 2x" class="wp-image-11399"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Select_HAR_Light.png 2x" class="wp-image-11400"></picture> [<strong>Select HAR</strong>].</p> <h2><a name="controlling-resource-caching"></a>Controlling Resource Caching</h2> <p>Caching can sometimes get in the way of developing websites as it can prevent changes made to resources from taking effect as the previously cached version is used instead. The <picture class="inline" title="Ignore Cache"><source media="(prefers-color-scheme: dark)" srcset="/wp-content/uploads/web-inspector_Network_Tab_Ignore_Cache_Dark.png 2x" class="wp-image-11385"><img srcset="/wp-content/uploads/web-inspector_Network_Tab_Ignore_Cache_Light.png 2x" class="wp-image-11386"></picture> [<strong>Ignore Cache</strong>] toggle controls whether WebKit will use these cached resources for any future resource requests so long as Web Inspector is open. This toggle is persistent across Web Inspector sessions.</p> </div> <div class="meta"> <hr> <p><img src="/wp-content/uploads/STP.png" width="51" height="51" class="icon"> Updated for <a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a>. Try it out for the latest Web Inspector features, including all of the above and more.</p> <hr> <p class="written">Written December 16, 2020 by <a href="https://twitter.com/brrian" target="_blank">Brian Burg</a>, <a href="https://twitter.com/dcrousso" target="_blank">Devin Rousso</a>, <a href="https://twitter.com/JosephPecoraro" target="_blank">Joseph Pecoraro</a>, and <a href="https://twitter.com/xeenon" target="_blank">Timothy Hatcher</a></p> <p class="updated">Last updated December 15, 2020 by Devin Rousso</p> </div> </article> </div> </main> <footer> <div class="page-width"> <nav id="footer-nav" aria-label="Footer menu"><div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-7617" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7617"><a rel="me" href="https://front-end.social/@webkit">@webkit@front-end.social</a></li> <li id="menu-item-5365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5365"><a href="https://webkit.org/sitemap/">Site Map</a></li> <li id="menu-item-4185" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4185"><a href="http://www.apple.com/legal/privacy/">Privacy Policy</a></li> <li id="menu-item-4287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4287"><a href="https://webkit.org/licensing-webkit/">Licensing WebKit</a></li> <li id="menu-item-4187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4187"><a href="https://webkit.org/terms-of-use/">WebKit and the WebKit logo are trademarks of Apple Inc.</a></li> </ul></div></nav> </div> </footer> <script type="text/javascript" src="https://webkit.org/wp-content/themes/webkit/scripts/global.js?ver=1.0" id="theme-global-js"></script> </body> </html>