{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/debug-tools/","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\": \"Debug tools\"\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, `Debug tools give you instant, per-pane insight into your page's quality, layout, and user experience. They're built-in, so there are no browser extensions or separate auditing tools required.`), mdx(\"p\", null, `The debug tools range from visual simulators (color blindness, vision impairments, bright sunlight) to structural analyzers (contrast checker, layout debugging, heading structure) to development aids (disable CSS/JS, edit content in-place).`), mdx(\"p\", null, `This popup contains both debug tools and simulators in two separate tabs. To learn more about the simulators, read the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/simulators/\"\n  }), `Simulators documentation`), `.`), mdx(\"p\", null, `You can find the debug tools for each pane by clicking the pen-and-ruler icon above it. If a debug tool is active for the current pane, a blue dot will be displayed.`), mdx(\"p\", null, `When a debug tool is active, you can clear it with the \"X `, `[`, `debug tool]\" button at the top of the popup and reload it with the \"re-apply\" button`), mdx(\"p\", null, `There are over 40 different debug tools available split into different categories, ranging from color blindness simulators to text contrast checkers to disabling CSS and JS. Do you have an idea for a useful Debug tool? `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `Let us know`), `.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Polypane is filled with accessibility features. We wrote a full overview on our blog: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/find-and-fix-accessibility-issues-with-polypane/\"\n  }), `Find and fix accessibility issues with Polypane`), `.`)), mdx(\"h2\", {\n    \"id\": \"quick-mouse-interactions\"\n  }, `Quick Mouse interactions`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Clicking the debug tool icon with your primary mouse icon will open the debug tool popup.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Right-clicking the debug tool icon will reload the currently selected debug tool, useful for debug tools like the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#contrast-checker\"\n  }), `color contrast checker`), ` (after changes to the page) or the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#content-chaos-test\"\n  }), `chaos content debug`), ` tool to apply new random content.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Middle clicking the debug tool icon removes the current debug tool. Holding `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` while middle clicking will remove the debug tools from all panes.`)), mdx(\"p\", null, `Hold `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` while adding a debug tool will apply it to all panes.`), mdx(\"h2\", {\n    \"id\": \"overview-of-all-debug-tools\"\n  }, `Overview of all Debug tools`), mdx(\"p\", null, `Polypane has over 40 Debug tools (which you can find on this page) and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/simulators/\"\n  }), `Simulators`), ` (which have their own page).`), mdx(\"p\", null, `For more information on them inside Polypane you can hover the `, mdx(Info, {\n    width: \"16px\",\n    height: \"16px\",\n    mdxType: \"Info\"\n  }), ` icon to the right of each overlay in the popup.`), mdx(\"h3\", {\n    \"id\": \"debug-tools\"\n  }, `Debug tools`), mdx(\"p\", null, `The debug tools tab contains tools that give you insight into how your page is built. It is split into four different categories: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#layout\"\n  }), `Layout`), `, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#accessibility\"\n  }), `Accessibility`), `, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#content\"\n  }), `Content`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#disable-features\"\n  }), `Disable features`), `.`), mdx(\"h4\", {\n    \"id\": \"layout\"\n  }, `Layout`), mdx(\"p\", null, `Contains different tools to analyse the current layout of the page`), mdx(\"h5\", {\n    \"id\": \"layout-debugging\"\n  }, `Layout Debugging`), mdx(\"p\", null, `Quickly find out if elements are where you expect them to be. This debug tool is also available as `, mdx(ShortCutDisplay, {\n    letter: \"d\",\n    cmdKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` and you can read more about it on the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `Layout debugging`), ` page.`), mdx(\"p\", null, `Elements that cause a horizontal scroll bar/horizontal overflow are highlighted in red, making it easy to spot them. Read more about `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/strategies-for-dealing-with-horizontal-overflows/\"\n  }), `detecting horizontal overflows`), `.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/layoutdebugging.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"stacking-context-3d-view\"\n  }, `Stacking Context 3D view`), mdx(\"p\", null, `The 3D view shows the stacking context of your page in a 3D view. With every newly created stacking context or specified `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `z-index`), `, elements get pushed forwards.`), mdx(\"p\", null, `This is useful to see how elements are stacked on top of each other and how they relate to each other, as well as debugging issues around z-indexs and stacking contexts.`), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `Both the `, mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"/docs/debug-tools/#show-z-index\"\n  }), `Show z-index`), ` debug tool and the `, mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"/docs/elements-panel/#debug\"\n  }), `Debug tab`), ` in the Elements panel can further help you debug stacking context issues.`)), mdx(\"p\", null, `To rotate the 3D view, click and drag with your mouse. Interactign with the page works as normal.`), mdx(\"video\", {\n    src: threedview,\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      maxWidth: '100%'\n    }\n  }), mdx(\"h5\", {\n    \"id\": \"reachability\"\n  }, `Reachability`), mdx(\"p\", null, `Reachability overlays a color map to show how easy it is to reach parts of the screen. It's calibrated for the mobile device sizes in Polypane and comes in a `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `right hand`), ` and `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `left-hand`), ` version.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/reachability.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"unneeded-scrollbars\"\n  }, `Unneeded scrollbars`), mdx(\"p\", null, `Draws scrollbars on the page where they are shown on regular browsers on Windows and Linux (and Mac with an external mouse) but aren't needed.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/unneededscrollbars.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"show-z-index\"\n  }, `Show z-index`), mdx(\"p\", null, `Show the z-indices of all visible elements, including if their ancestors have z-indices.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/showzindex.png\",\n    \"alt\": null\n  }))), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `Both the `, mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"/docs/debug-tools/#stacking-context-3d-view\"\n  }), `Stacking Context 3D view`), ` debug tool and the `, mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"/docs/elements-panel/#debug\"\n  }), `Debug tab`), ` in the Elements panel can further help you debug stacking context issues.`)), mdx(\"h5\", {\n    \"id\": \"view-transition-debugging\"\n  }, `View transition debugging`), mdx(\"p\", null, `This debug tool slows down all view transitions so you can inspect them more closely, and highlights both the outgoing and incoming parts with different colored outlines.`), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `Currently only works for same-page view transitions.`)), mdx(\"h4\", {\n    \"id\": \"accessibility\"\n  }, `Accessibility`), mdx(\"p\", null, `These debug tools give you ways to assess the accessibility of a page.`), mdx(\"h5\", {\n    \"id\": \"contrast-checker\"\n  }, `Contrast checker`), mdx(\"p\", null, `Polypane will go through all your text and background color combinations and calculate the contrast ratio. Failing ones are highlighted everywhere they occur.`), mdx(\"p\", null, `Hover over any of the failing ratios that have an arrow to see a suggested alternative color. You can hover over that suggested alternative color to preview it, or click it to apply the new styling and copy the suggested color to your clipboard.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/contrastchecker.png\",\n    \"alt\": null\n  }))), mdx(\"p\", null, `Polypane uses a custom-made algorithm to determine the ratio that takes the text color, background colors, text shadow, opacities, filters and text-strokes into account when determining the contrast ratio. Text with image backgrounds can not be checked automatically, for that we recommend using the built-in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `color picker`), ` to check the contrast ratio of the colors in the image against the text color.`), mdx(\"p\", null, `Select AA or AAA to check against WCAG2 AA or WCAG2 AAA level contrast. The default is AA.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Make sure to check our free `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/color-contrast/\"\n  }), `Color Contrast Checker`), ` to test colors online against WCAG and APCA, get previews and suggestions.`)), mdx(\"h5\", {\n    \"id\": \"track-focus\"\n  }, `Track Focus`), mdx(\"p\", null, `Get a visual highlight of the current focused element that follows the focus as you tab from element to element.`), mdx(\"video\", {\n    src: trackfocus,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/#focus-order-tab-order\"\n  }), `focus order overlay`), ` shows you this information as well, but because the Track focus debug tool is dynamic it's better in handling things like focus traps and interactive pages.`), mdx(\"p\", null, `While tabbing through your page you will find the role and computed name of the focused element in the bottom right corner of the pane. These are what screen readers use to determine what to read out loud so it's important to check if they are correct.`), mdx(\"h5\", {\n    \"id\": \"target-size-cursor\"\n  }, `Target size cursor`), mdx(\"p\", null, `Replaces your cursor with a square so you can measure if clickable elements are large enough and far enough apart. There are three sizes:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `24 by 24 pixels: uses the dimensions and logic from WCAG 2.2 SC 2.5.8 (Level AA).`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `44 by 44 pixels: uses the dimensions from WCAG 2.1 SC 2.5.5 (Level AAA) and the Apple HIG.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `48 by 48 pixels: uses the same dimensions and logic that Google uses for their mobile friendly test.`)), mdx(\"p\", null, `24 by 24 pixels is the default.`), mdx(\"p\", null, `Elements that are too small and too close together (making tapping them hard) are detected and get a red area surrounding them indicating the space they need. Inline elements inside text content are exluded from this check, following the various specifications.`), mdx(\"video\", {\n    src: \"/blogs/polypane-6-3/targetsize.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `The target size debug tool has additional options visible in the top right corner of your pane.`), mdx(\"p\", null, `The \"Rescan target sizes\" button will let you rerun the test to see if the changes you made to the page have fixed the issues.`), mdx(\"p\", null, `Toggle the \"Check inline elements\" checkbox to also check clickable targets inside text content (like paragraphs). These are excluded from the WCAG 2.5.8 target size check, but you might still want to test them.`), mdx(\"p\", null, `If the target size UI overlaps with the element you want to check, you can toggle it's position with the ⬍ icon button.`), mdx(\"h4\", {\n    \"id\": \"detect-small-text\"\n  }, `Detect small text`), mdx(\"p\", null, `Detects elements that have small text: 12px for any content, and 16px for form elements (to prevent iOS from zooming in your page).`), mdx(\"p\", null, `When small text is found, hover over the warning to show an explanation and click the button to increase the font size to 12 or 16 pixels (depending on the type of element) so you can preview its effects.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/smalltext.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h5\", {\n    \"id\": \"text-spacing-wcag-1412\"\n  }, `Text Spacing (WCAG 1.4.12)`), mdx(\"p\", null, `Applies the minimum text spacing requirements from the WCAG criterion 1.4.12. Use this to check if any content is lost with these extra settings. Here are the changes it applies:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Line height (line spacing) to at least 1.5 times the font size;`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Spacing following paragraphs to at least 2 times the font size;`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Letter spacing (tracking) to at least 0.12 times the font size;`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Word spacing to at least 0.16 times the font size.`)), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/forcespacing.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"show-roles\"\n  }, `Show roles`), mdx(\"p\", null, `Highlights all elements that have a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `role`), ` attribute, showing both the role and the element it's applied to. This helps you verify that the used role is appropriate and applicable for a given element`), mdx(\"img\", {\n    src: \"/doc-img/overlays/roles.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h5\", {\n    \"id\": \"show-aria-attributes\"\n  }, `Show ARIA attributes`), mdx(\"p\", null, `Highlights all elements that have aria attributes and lists the attributes and their values.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/arias.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h5\", {\n    \"id\": \"apply-all-focus-styling\"\n  }, `Apply all focus styling`), mdx(\"p\", null, `Will apply the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `focus`), ` pseudo state to all focusable elements on the page so you can inspect their focus styles in one go.`), mdx(\"h5\", {\n    \"id\": \"apply-all-focus-visible-styling\"\n  }, `Apply all focus-visible styling`), mdx(\"p\", null, `Will apply both the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `focus-visible`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `focus`), ` pseudo state to all focusable elements on the page so you can inspect their focus styles in one go.`), mdx(\"h5\", {\n    \"id\": \"apply-all-hover-styling\"\n  }, `Apply all hover styling`), mdx(\"p\", null, `Will apply the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hover`), ` pseudo state to all interactive elements on the page so you can inspect their hover styles in one go.`), mdx(\"h5\", {\n    \"id\": \"a11ycss-smallthird-partysmall\"\n  }, `A11y.css `, mdx(\"small\", null, `third party`)), mdx(\"p\", null, `A11y.css will highlight any accessibility mistakes and possible risks on your page.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/a11y.png\",\n    \"alt\": null\n  }))), mdx(\"h4\", {\n    \"id\": \"content\"\n  }, `Content`), mdx(\"p\", null, `Asses the content itself and the way it influences the page.`), mdx(\"h5\", {\n    \"id\": \"edit-content\"\n  }, `Edit content`), mdx(\"p\", null, `Edit content makes the entire page editable so you can quickly try out new content and see how it looks.`), mdx(\"p\", null, `Polypane automatically turns on spell checking when you're in edit content mode.`), mdx(\"video\", {\n    src: \"/doc-img/overlays/edit-content.mp4\",\n    playsInline: true,\n    loop: true,\n    controls: true,\n    style: {\n      width: '100%'\n    }\n  }), mdx(\"h5\", {\n    \"id\": \"readability\"\n  }, `Readability`), mdx(\"p\", null, `The readability debug tool will calculate how difficult each sentence on your page is. Darker, redder sentences are harder to understand while lighter, greener sentences are easier to read. We calculate this using the Automated Readability Index (ARI), which works well for most western, European languages. For pages in Arabic it uses the Automatic Arabic Readability Index (AARI).`), mdx(\"p\", null, `If you know of Readability Index formulas for other languages, please `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `contact us`), `.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/readability.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"content-chaos-test\"\n  }, `Content chaos test`), mdx(\"p\", null, `Content chaos test will randomly increase or decrease text content so you can check how well your layout handles these situations. Can be used to check if you layout can handle different languages or longer and shorter content.`), mdx(\"p\", null, `This debug tool has three variant: Less, More and Both. Less only shortens text (to test for languages that need less characters per word), More only lengthens text (to test for languages that need more characters per word). Both is a combination of the two with less extremes.`), mdx(\"p\", null, `When active a warning icon is shown next to the pane title, and the entire pane has a red border.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/contentchaos.png\",\n    \"alt\": null\n  }))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Learn how to use this feature with our tutorial: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/how-to-check-your-site-in-different-languages-and-writing-modes/\"\n  }), `How to check your site in different languages and writing modes`), `.`)), mdx(\"h5\", {\n    \"id\": \"hostile-css\"\n  }, `Hostile CSS`), mdx(\"p\", null, `Hostile CSS will set ugly styles for all your default elements so you can see how well your component styles are isolated.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/hostilecss.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"placeholdifier-all-content-or-translatable-only\"\n  }, `Placeholdifier (All content or Translatable only)`), mdx(\"p\", null, `Placeholdifier replaces all your content (text, images and videos) with placeholders, so the (possible lorem ipsum/placeholder) content of a design doesn't distract from the design itself.`), mdx(\"p\", null, `Only placeholderifying content that is translatable (excluding elements with a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `translate=no`), ` attribute) is useful when you quickly want to verify that certain parts of the page retain the specific language where they otherwise might get translated by a browser extension or service.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/placeholdifier.png\",\n    \"alt\": null\n  }))), mdx(\"img\", {\n    src: placeholdifiertranslate,\n    className: \"imgshadow\",\n    alt: \"Placeholdifier with translate only\"\n  }), mdx(\"h5\", {\n    \"id\": \"audible-changes\"\n  }, `Audible changes`), mdx(\"p\", null, `With audible changes, Polypane will sounds a beep whenever the page changes. A nice way to figure out when your page is too busy, or making changes when it does not have to.`), mdx(\"video\", {\n    src: \"/doc-img/overlays/audible.mp4\",\n    playsInline: true,\n    loop: true,\n    controls: true,\n    style: {\n      width: '100%'\n    }\n  }), mdx(\"h4\", {\n    \"id\": \"disable-features\"\n  }, `Disable features`), mdx(\"p\", null, `Turn off different features to test the resilience of your page.`), mdx(\"h5\", {\n    \"id\": \"disable-css\"\n  }, `Disable CSS`), mdx(\"p\", null, `Disable CSS will remove all CSS from stylesheets and style attributes on your page. When active a warning icon is shown next to the pane title, and the entire pane has a red border.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/disable-css.jpg\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"disable-js\"\n  }, `Disable JS`), mdx(\"p\", null, `Disable JS will disable all JavaScript on a page. This will also prevent much of Polypane's tooling from running, so when this is active a warning icon is shown next to the pane title, and the entire pane has a red border.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/disable-js.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"disable-images\"\n  }, `Disable Images`), mdx(\"p\", null, `Disable Images will hide all images and background images on your page. You can use this to test your email rendering for email clients that block images\nor to check if your layout doesn't break when images are missing.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/doc-img/overlays/disable-images.png\",\n    \"alt\": null\n  }))), mdx(\"h5\", {\n    \"id\": \"hide-cursor\"\n  }, `Hide Cursor`), mdx(\"p\", null, `Hide the cursor in this pane to test keyboard accessibility without cheating.`), mdx(\"h3\", {\n    \"id\": \"simulators\"\n  }, `Simulators`), mdx(\"p\", null, `Polypane can simulate different types of impairments that lets you test your pages in different scenarios. The simulators are alxo available in the debug tools popup.`), mdx(\"p\", null, `Learn more about the simulators in our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/simulators/\"\n  }), `Simulators`), ` documentation.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":8,"excerpt":"Debug tools give you instant, per-pane insight into your page's quality, layout, and user experience. They're built-in, so there are no…","frontmatter":{"title":"Debug tools","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Device presets","nextSlug":"/docs/device-presets/","prevTitle":"Dark and light mode","prevSlug":"/docs/dark-and-light-mode/","slug":"/docs/debug-tools/","date":null,"ogFileName":"debug-tools"}},"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/debug-tools/"}},"staticQueryHashes":["4164364741","425175329"]}