{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/network-panel/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Network panel\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `The \"Network\" tab in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `panel`), ` gives you insight into all the resources that are loaded for the current page, including their status, size and load time, as well as general loading and web vitals information.`), mdx(\"video\", {\n    src: networkvideo,\n    controls: true,\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\",\n      \"display\": \"block\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"load-info\"\n  }, `Load info`), mdx(\"p\", null, `The top of the network panel shows you a bar splitting out general info on the page load like total size, requests, cached files and number of origins that are connected to. When these differ per pane, we show the range of values across the panes, and you can hover over the info to see the values for each pane.`), mdx(\"img\", {\n    src: networkoverview,\n    className: \"imgshadow\",\n    alt: \"Network summary\"\n  }), mdx(\"p\", null, `The timeline show you the domContentLoaded (DCL) and load events. When the timing differs here, we exend both bars with a lighter version so you can clearly see the range of timings across the panes. Hover over the bars to see the exact timings for each pane.`), mdx(\"p\", null, `As you interact with the page and web vitals information is measured (see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/web-vitals/\"\n  }), `Web Vitals`), `), we also show the TTFB, FCP and LCP timings. Each dot represents a pane, and you can over over each bar to see the exact timings.`), mdx(\"h2\", {\n    \"id\": \"origins-overview\"\n  }, `Origins overview`), mdx(\"p\", null, `The network panel splits the requests across the origins they come from, so you can see at a glance what origins this page connects to, which protocol they use and how many requests each origin has.`), mdx(\"img\", {\n    src: networkstats,\n    className: \"imgshadow\",\n    alt: \"origins with stats\"\n  }), mdx(\"p\", null, `The current origin is always shown at the top and expanded, making its resource stats available:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Active`), `: requests that are currently being loaded`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Stalled`), `: requests that are taking a long time to load, due to a slow server response or a slow network connection`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Completed`), ` The total number of requests that have completed loading, including cached resources`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Max concurrent`), `: The maximum number of concurrent request connections to this origin, which can indicate if the browser or server is limiting connections to this origin`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Avg duration`), `: The average time it takes for a request from this origin to load, which can indicate if the server is slow or if there are network issues`)), mdx(\"h3\", {\n    \"id\": \"protocol\"\n  }, `Protocol`), mdx(\"p\", null, `For each origin we show the protocol: `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `HTTP/1.x`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `HTTP/2`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `HTTP/3`), `, as well as if the origin is local (from your own machine).`), mdx(\"p\", null, `Servers using `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `HTTP/1.x`), ` can be a bottleneck for performance.`), mdx(\"h3\", {\n    \"id\": \"bottleneck-detection\"\n  }, `Bottleneck detection`), mdx(\"p\", null, `When Polypane detects that there are many more requests waiting to be processed compared to the measured maximum number of concurrent connections, which can indicate that the server is limiting connections to this origin, we show a warning icon in the network panel for that origin, as well as in the address bar, to make you aware that the server is responsible for load performance issues.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `When Polypane detects a bottlenecked local server, it will automatically ask you for permission to add it to a connection whitelist. This lets Polypane open more connections to that server to improve loading across many panes.`)), mdx(\"h2\", {\n    \"id\": \"resource-overview\"\n  }, `Resource overview`), mdx(\"p\", null, `As resources are loaded they are added to the list, first as active requests and when they are completed, you can click them open to see the full overview of request and response headers.`), mdx(\"img\", {\n    src: networkrequests,\n    className: \"imgshadow\",\n    alt: \"origins with request table\"\n  }), mdx(\"p\", null, `For each origin you can click open the requests to get a detailed overview of all the resources that are loaded from this origin, including their status, type, url, initiator, size and duration.`), mdx(\"p\", null, `After each URL, we show how often this resource is loaded across panes. The initiator can be hovered to get a stack trace where available.`), mdx(\"p\", null, `The size and duration are also shown as bars to make it easy to compare the resources, and detect issues with the loading order of resources. Hover over the \"size\" or \"duration\" header to highlight the bars.`), mdx(\"p\", null, `The duration bar is split into a darker and lighter part, showing the minimium and maximum load time across panes, and are shown in a waterfall by default so you can easily see if resources are loaded in parallel or if there are bottlenecks in the loading order.`), mdx(\"h3\", {\n    \"id\": \"sorting\"\n  }, `Sorting`), mdx(\"p\", null, `You can sort the table by any of the columns. Sorting by duration will collapse the waterfall-style bars so you can instead compare the load time of each resource.`), mdx(\"p\", null, `Clicking the \"url\" header will initially sort by load order again, and clicking it again will sort alphabetically.`), mdx(\"h3\", {\n    \"id\": \"request-and-response-headers\"\n  }, `Request and response headers`), mdx(\"img\", {\n    src: networkheaders,\n    className: \"imgshadow\",\n    alt: \"Request headers\"\n  }), mdx(\"p\", null, `Clicking on a URL will open the overview of request and response headers for that resource. These are split into three categories:`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `General`), `:`), mdx(\"p\", null, `Lists the full URL for easy copying (as well as an 'open in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `Browse panel`), `') icon), the Method and the Referrer Policy`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Response headers`), `:`), mdx(\"p\", null, `Lists all response headers the server returns.  When different panes have different values for the same header, headers are split out per pane so you can compare them.`), mdx(\"p\", null, `Headers with JSON in them, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `report-to`), `, are automatically formatted so they're easy to read.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Request headers`), `:`), mdx(\"p\", null, `Lists all request headers, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `User-Agent`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `referer`), `. When different panes have different values for the same header, headers are split out per pane so you can compare them.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"The \"Network\" tab in the  panel  gives you insight into all the resources that are loaded for the current page, including their status, size…","frontmatter":{"title":"Network panel","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Polypane and local servers","nextSlug":"/docs/other-tools/","prevTitle":"Showing multiple URLs","prevSlug":"/docs/showing-multiple-urls/","slug":"/docs/network-panel/","date":null,"ogFileName":"network-panel"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/network-panel/"}},"staticQueryHashes":["4164364741","425175329"]}