{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/intro-to-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\": \"Intro to 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 Polypane panel is where you can find a ton of information on your page as well as ways to inspect and edit the page.`), mdx(\"p\", null, `You can open it with `, mdx(ShortcutDisplay, {\n    shiftKey: true,\n    cmdKey: true,\n    letter: \"p\",\n    mdxType: \"ShortcutDisplay\"\n  }), `, by selecting \"Toggle Panel\" in the \"View\" menu or by clicking the Open Panel icon in the address bar.`), mdx(\"img\", {\n    src: panel,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"customizing-the-panel-location\"\n  }, `Customizing the Panel location`), mdx(\"p\", null, `Drag the side of the panel to resize, or click the panel icon in the top right of the panel to switch between having the panel on the right side, the bottom, the left side or detached in its on window. You can also right-click the side panel icon in the address bar to pick where the Panel should open.`), mdx(\"h3\", {\n    \"id\": \"customizing-the-panel-tabs\"\n  }, `Customizing the panel tabs`), mdx(\"p\", null, `The tabs in the panel are shown in a single row at the top of the panel. When there are more tabs than can fit in the row, the remaining tabs are available in the \"more\" dropdown at the end of the row.`), mdx(\"video\", {\n    src: paneltabs,\n    controls: true,\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\",\n      \"display\": \"block\"\n    }\n  }), mdx(\"p\", null, `Rearrange the tabs by dragging them to put the ones you use most at the start of the row.`), mdx(\"h3\", {\n    \"id\": \"available-tabs-in-the-panel\"\n  }, `Available tabs in the panel`), mdx(\"p\", null, `The panel has 12 tabs that each offer specific ways to inspect, analize and edit your pages, or provide additional tooling:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/console/\"\n  }), `Console`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `Outline`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `Browse`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/workspace-management/\"\n  }), `Workspaces`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/devtools-panel/\"\n  }), `Chromium Devtools`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `Snippets`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/accessibility-panel/\"\n  }), `Accessibility`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/network-panel/\"\n  }), `Network`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/storage-panel/\"\n  }), `Storage`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/source-panel/\"\n  }), `Source`))), mdx(\"p\", null, `These are shown at the top of the panel with overflowing tabs available in the \"more\" dropdown at the end, similar to how devtools in other browsers work.`), mdx(\"p\", null, `Tabs can be rearranged by dragging them so you can put the ones you use most at the start.`), mdx(\"h4\", {\n    \"id\": \"meta-information\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta information`)), mdx(\"p\", null, `The Meta information panel gives you insights into the non-visual aspects of your website like meta tags, resource files like robots.txt, and generates social media previews.`), mdx(\"h4\", {\n    \"id\": \"elements\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements`)), mdx(\"p\", null, `The elements panel lets you inspect and edit elements in all panes at once.`), mdx(\"h4\", {\n    \"id\": \"console\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/console/\"\n  }), `Console`)), mdx(\"p\", null, `The Polypane console lets you interact with all panes at once, sending commands and viewing console messages in all panes simultaneously.`), mdx(\"h4\", {\n    \"id\": \"outline\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `Outline`)), mdx(\"p\", null, `The Outline tab shows you various outlines of your page like a list of headings, links, images or landmarks, along with checks for valid structures, broken links and more.`), mdx(\"h4\", {\n    \"id\": \"browse-tab\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `Browse tab`)), mdx(\"p\", null, `The browse panel lets you show any other website opened alongside your workspace, letting you have your documentation or design system open without having to tab back and forth. It also gives you quick access to various handoff tools.`), mdx(\"h4\", {\n    \"id\": \"workspaces-tab\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/workspace-management/\"\n  }), `Workspaces tab`)), mdx(\"p\", null, `Manage and switch between your saved workspaces, use the default workspaces or export your workspace to share with your team or include it in your repository.`), mdx(\"h4\", {\n    \"id\": \"chromium-devtools\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/devtools-panel/\"\n  }), `Chromium Devtools`)), mdx(\"p\", null, `The devtools panel lets you use the Chromium devtools for individual panes and use devtools extensions.`), mdx(\"h4\", {\n    \"id\": \"snippets\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `Snippets`)), mdx(\"p\", null, `With the snippets functionality in Polypane you can quickly apply JavaScript or CSS snippets to all or specific panes to test out code, run checks or make quick fixes without needing to go to the devtools.`), mdx(\"h4\", {\n    \"id\": \"accessibility\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/accessibility-panel/\"\n  }), `Accessibility`)), mdx(\"p\", null, `Runs a full accessibility audit on the current page to quickly find any glaring issues.`), mdx(\"h4\", {\n    \"id\": \"network\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/network-panel/\"\n  }), `Network`)), mdx(\"p\", null, `The network panel lets you inspect which resources are loaded by the page. It shows network requests and responses, web vitals and loading information and helps you diagnose performance issues.`), mdx(\"h4\", {\n    \"id\": \"storage\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/storage-panel/\"\n  }), `Storage`)), mdx(\"p\", null, `The storage panel shows you the data saved in localStorage, sessionStorage and cookies. You can also edit their values in this panel.`), mdx(\"h4\", {\n    \"id\": \"source\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"/docs/source-panel/\"\n  }), `Source`)), mdx(\"p\", null, `Show the generated HTML source along with HTML validation.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"The Polypane panel is where you can find a ton of information on your page as well as ways to inspect and edit the page. You can open it…","frontmatter":{"title":"Intro to panel","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Pitching Polypane","nextSlug":"/docs/pitching-polypane/","prevTitle":"Polypane Peek","prevSlug":"/docs/polypane-peek/","slug":"/docs/intro-to-panel/","date":null,"ogFileName":"intro-to-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/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"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/intro-to-panel/"}},"staticQueryHashes":["4164364741","425175329"]}