{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/polypane-peek/","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\": \"Polypane Peek\"\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 fastest way to get the info for any element is by using Peek.`), mdx(\"video\", {\n    src: \"/blogs/polypane-6/polypane-peek.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"using-polypane-peek\"\n  }, `Using Polypane Peek`), mdx(\"p\", null, `Press and hold `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), ` (on Linux and Windows) or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `option`), ` (on macOS) and hover over an element to show the element dimensions and other quick info in a tooltip:`), mdx(\"img\", {\n    src: \"/doc-img/elementspanel/inspect.png\",\n    className: \"imgshadow\",\n    alt: \"Inspect overlay and tooltip.\"\n  }), mdx(\"p\", null, `From top to bottom:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Element name, along with id and classes. If an element has a grid of flex layout, the tooltip shows a small icon.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Dimensions and aspect ratio, followed by the color contrast and its WCAG rating`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Color, font and spacing info like border, margin and padding (depending on what applies to the element.)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Accessibility info like role, the accessible name and whether an element is focusable.`)), mdx(\"p\", null, `Depending on the type of element it also shows relevant info for that type of element, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), ` text and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `currentSRC`), ` for an image, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `href`), ` for a link and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `action`), ` for a form.`), mdx(\"p\", null, `This feature is especially useful to quickly find out which color or font is used, or how much padding or margin an element has on any side. Click on the highlighted element and it will open in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Element inspector`), ` where you can inspect or edit it further.`), mdx(\"h3\", {\n    \"id\": \"other-methods\"\n  }, `Other methods`), mdx(\"p\", null, `You can also inspect elements by clicking the Inspect button in the address bar, pressing cmd/ctrl + Shift + C or clicking the inspect button in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), `. You can also right-click an element and select \"Inspect element\".`), mdx(\"h3\", {\n    \"id\": \"inspecting-elements-with-pointer-eventsnone\"\n  }, `Inspecting elements with `, mdx(\"code\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"className\": \"language-text\"\n  }), `pointer-events:none;`)), mdx(\"p\", null, `To inspect elements that have `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `pointer-events: none`), ` applied, hold `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `shift`), ` during inspection.`), mdx(\"h3\", {\n    \"id\": \"grid-and-flex-layout-visualization\"\n  }, `Grid and Flex layout visualization`), mdx(\"p\", null, `Elements with a grid or flex layout have their grid or flex layout visualized so you can see the lines, gaps and areas.`), mdx(\"img\", {\n    src: flexoverlay,\n    className: \"imgshadow\",\n    alt: \"Flex visualisation\"\n  }), mdx(\"p\", null, `Elements inside the layouts are annotated using their real dimensions rather than the grid area or flex area they sit in, so you can quickly see their alignment and if they are stretched or not.`), mdx(\"h3\", {\n    \"id\": \"using-peek-with-the-chromium-devtools\"\n  }, `Using Peek with the Chromium Devtools`), mdx(\"p\", null, `You can switch between using Polypane's inspect tooltip or the Chromium devtools inspect tooltip by right-clicking the inspect button in the header and selecting \"Inspect Element (in devtools)\".`), mdx(\"h2\", {\n    \"id\": \"color-overlays\"\n  }, `Color overlays`), mdx(\"p\", null, `When inspecting an element the contents, padding, border and margins are all visualized on top of the element.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Margin`), `: `, mdx(InlineColor, {\n    color: \"rgb(246 178 107)\",\n    mdxType: \"InlineColor\"\n  })), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Border`), `: `, mdx(InlineColor, {\n    color: \"rgb(255 229 153)\",\n    mdxType: \"InlineColor\"\n  })), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Padding`), `: `, mdx(InlineColor, {\n    color: \"rgb(147 196 125)\",\n    mdxType: \"InlineColor\"\n  })), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Content`), `: `, mdx(InlineColor, {\n    color: \"rgb(111 168 220)\",\n    mdxType: \"InlineColor\"\n  }))), mdx(\"p\", null, `The colors are shown in the tooltip in front of each margin, padding and border declaration as a reference, and they follow the colors used in the box model view in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/#box-model/\"\n  }), `elements panel`), `.`), mdx(\"h2\", {\n    \"id\": \"setting-your-preferred-color-notation\"\n  }, `Setting your preferred color notation`), mdx(\"p\", null, `You can set your preferred color notation in the tooltip from the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browser-features/#change-the-color-notation\"\n  }), `global settings`), ` to use either `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hex`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `rgb`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hsl`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hwb`), ` notation. The default is `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `rgb`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"The fastest way to get the info for any element is by using Peek. Using Polypane Peek Press and hold  alt  (on Linux and Windows) or  option…","frontmatter":{"title":"Polypane Peek","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Intro to panel","nextSlug":"/docs/intro-to-panel/","prevTitle":"Pane sizes","prevSlug":"/docs/pane-sizes/","slug":"/docs/polypane-peek/","date":null,"ogFileName":"polypane-peek"}},"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/polypane-peek/"}},"staticQueryHashes":["4164364741","425175329"]}