{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/the-devtools-features-you-wish-you-had-available-in-polypane/","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\": \"The devtools features you wish you had, available in Polypane\",\n  \"cover\": \"/blogs/5mintest/cover.svg\",\n  \"date\": \"2024-11-20\",\n  \"type\": [\"tutorial\"]\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, `A while ago Adam Argyle of the Chrome Devtools team asked developers on X/Twitter a question:`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"what's missing from Chrome DevTools?\", mdx(\"br\", null), mdx(\"br\", null), \"let's make a tasty list of features and goodies that would make our lives easier, and I'll aggregate it and bring it to the mother ship for 2025 potential work.\"), \"\\u2014 Adam Argyle (@argyleink)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/argyleink/status/1835720953009160194?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, `Adam got a ton of responses with many good suggestions and ideas. After reading through all of them, I realized many suggested features are already available in Polypane. Here's an overview of those requests and how they're possible in Polypane today.`), mdx(\"h2\", {\n    \"id\": \"whats-polypane\"\n  }, `What's `, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"/\"\n  }), `Polypane`), `?`), mdx(\"p\", null, `Polypane is the web browser for devs who care. It's a stand-alone browser that shows sites in multiple fully synced `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `panes`), ` and helps you make your site more responsive, more accessible and faster.`), mdx(\"img\", {\n    src: app4,\n    className: \"imgshadow\",\n    alt: \"Polypane\"\n  }), mdx(\"p\", null, `It's chock-full of features that help you build and inspect your sites, whether that's for performance, accessibility or things like using the right meta tags. Be sure to check out the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/product-tour/\"\n  }), `product tour`), ` to learn more.`), mdx(\"p\", null, `For specific requests from web developers, read on:`), mdx(\"h2\", {\n    \"id\": \"built-in-contrast-checker\"\n  }, `Built-in contrast checker`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A kingdom for a contrast checker. Bonus points if it includes the newer color spaces. \", mdx(\"br\", null), mdx(\"br\", null), \"Rulers so we can quickly show alignment of items. \", mdx(\"br\", null), mdx(\"br\", null), \"Basically Visbug, but that my work can\\u2019t block because it\\u2019s an extension.\"), \"\\u2014 Caleb Williams (@calebwilliams12)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/calebwilliams12/status/1835754009740894567?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"And I\\u2019d prefer to be able to check the flattened contrast in a given spot on a page.\"), \"\\u2014 Caleb Williams (@calebwilliams12)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/calebwilliams12/status/1835795147176735171?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, `Polypane has a number of different built-in contrast checkers that can be used for different scenarios.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Want to check the contrast of a specific element?`)), mdx(\"p\", null, `The absolute quickest way to check the contrast of an element is to hover over it and hold down the `, mdx(ShortcutDisplay, {\n    altKey: true,\n    mdxType: \"ShortcutDisplay\"\n  }), ` key to trigger `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `Polypane Peek`), `.`), mdx(\"p\", null, `Polypane shows you the contrast ratio between the element and its `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `calculated`), ` background. That means it will take into account any semi-transparent backgrounds, shadows and more and use those to calculate the actual background. It also takes into account the font size and weight to determine which ratio's to use.`), mdx(\"img\", {\n    src: \"/doc-img/elementspanel/inspect.png\",\n    className: \"imgshadow\",\n    alt: \"Inspect overlay and tooltip.\"\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Want to check the contrast between any two items on the page (or actually, anywhere on your screen)?`)), mdx(\"p\", null, `Use `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `the built-in color picker`), `. Quickly check the contrast between any two colors and compare them to WCAG AA or AAA for large text, small text or non-text elements (like icons). You can also check with the in-development APCA algorithm here.`), mdx(\"p\", null, `When there isn't enough contrast, Polypane automatically calculates the closest color to the one you picked that `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `does`), ` have enough contrast.`), mdx(\"div\", {\n    style: {\n      \"position\": \"relative\",\n      \"width\": \"100%\",\n      \"paddingTop\": \"56.25%\"\n    }\n  }, mdx(\"a\", {\n    id: \"video\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"-100px\"\n    }\n  }), mdx(\"iframe\", {\n    src: \"https://www.youtube.com/embed/rldFPBecGIE?&autoplay=false&start=0\",\n    allow: \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: \"\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"0px\",\n      \"left\": \"0px\",\n      \"width\": \"100%\",\n      \"height\": \"100%\"\n    },\n    frameBorder: \"0\"\n  })), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Want to check your entire page in one go?`)), mdx(\"p\", null, `Use the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/#contrast-checker\"\n  }), `\"Color Contrast\" debug tool`), ` at AA or AAA level to go through all the elements on your page and highlight the ones that fail contrast. Like checking the contrast of a single element we will automatically calculare the correct text and background colors for you by combining backgrounds, text shadows and other CSS effects.`), mdx(\"img\", {\n    alt: \"CSS color contrast debug tool highlighting contrast issues\",\n    src: \"/blogs/a11y/image2.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `If an element fails contrast, Polypane will automatically suggest a color that `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `does`), ` have enough contrast inline, which you can preview by hovering over the suggestion and then click to apply and copy the color to your clipboard.`), mdx(\"video\", {\n    src: \"/blogs/polypane-5/copy-color.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '0 auto',\n      maxWidth: '100%'\n    }\n  }, \"Color overlay example\"), mdx(\"h2\", {\n    \"id\": \"html-validation\"\n  }, `HTML validation`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"So basically a \", mdx(\"a\", {\n    href: \"https://t.co/0d2Xho7pmM\"\n  }, \"https://t.co/0d2Xho7pmM\"), \" built into DevTools I guess?\"), \"\\u2014 Benjamin Aster (@Benjamin_Aster)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/Benjamin_Aster/status/1836057116592799876?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, `Polypane's `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/source-panel/\"\n  }), `Source panel`), ` automatically validates your HTML source and shows you issues inline as well as in a list:`), mdx(\"img\", {\n    src: htmlvalidation,\n    alt: \"html validation issues\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Because so much HTML is minified or unformatted, the Source panel also automatically formats your HTML with Prettier. This makes it easier to read and understand, and also makes it easier to spot issues.`), mdx(\"h2\", {\n    \"id\": \"pixel-perfect-image-overlay\"\n  }, `Pixel perfect image overlay`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"\\xABPixel perfect\\xBB image overlay\"), \"\\u2014 \\u0414\\u0430\\u043D\\u0438\\u0438\\u043B @grawl@mastodon.social (@GrawlCore)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/GrawlCore/status/1835834194120835343?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/reference-image/\"\n  }), `reference image feature`), ` in Polypane lets you overlay an image on top of any pane. You can adjust the opacity of the overlay, move it around to align it or highlight just the differences between your page and the image.`), mdx(\"video\", {\n    src: refimg,\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true\n  }), mdx(\"p\", null, `Along with that, there's also a split view and a side-by-side view, so however you want to compare your page to an image, you can do it in Polypane.`), mdx(\"video\", {\n    src: imageslider,\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true\n  }), mdx(\"h2\", {\n    \"id\": \"quickly-checking-alignment\"\n  }, `Quickly checking alignment`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A kingdom for a contrast checker. Bonus points if it includes the newer color spaces. \", mdx(\"br\", null), mdx(\"br\", null), \"Rulers so we can quickly show alignment of items. \", mdx(\"br\", null), mdx(\"br\", null), \"Basically Visbug, but that my work can\\u2019t block because it\\u2019s an extension.\"), \"\\u2014 Caleb Williams (@calebwilliams12)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/calebwilliams12/status/1835754009740894567?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, `In Polypane, turning on Rulers with `, mdx(ShortcutDisplay, {\n    cmdKey: true,\n    letter: \"g\",\n    mdxType: \"ShortcutDisplay\"\n  }), ` will `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/rulers-grids-and-guides/\"\n  }), `show rulers`), ` along your pane. You can click on the rulers to draw guides on top of your page, perfect to check the alignment of elements.`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/page-scrolling-rulers.mp4\",\n    controls: true,\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Beyond that you can overlay grids, rows and columns depending on what your design is built with, so you can be sure that the components on your site all align correctly.`), mdx(\"h2\", {\n    \"id\": \"better-insights-into-fonts\"\n  }, `Better insights into fonts`), mdx(\"blockquote\", {\n    className: \"twitter-tweet-0\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"There doesn't seem to be a way to identify which font is actually being rendered (i.e. Do I have the style-declared font loaded?). You know, other than just knowing what the font is supposed to look like.\"), \"\\u2014 Kevin Leedrum (@kevinleedrum)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/kevinleedrum/status/1836099430052958653?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"blockquote\", {\n    className: \"twitter-tweet-0\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"an easier way to see which font is being shown, maybe it highlights. Sometimes the fallbacks can look similar so it is sometimes not obvious to see quickly if something isn't working as expected.\"), \"\\u2014 Stacy Kvernmo (@stacykvernmo)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/stacykvernmo/status/1836134463832531086?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, `Figuring out if you're using the right font is as easy as holding down `, mdx(ShortcutDisplay, {\n    altKey: true,\n    mdxType: \"ShortcutDisplay\"\n  }), ` and reading the font line!`), mdx(\"img\", {\n    src: \"/doc-img/elementspanel/inspect.png\",\n    className: \"imgshadow\",\n    alt: \"Inspect overlay and tooltip.\"\n  }), mdx(\"p\", null, `Polypane checks which of the listed fonts in an elements font-family is actually being rendered and then shows it in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `Polypane Peek`), ` as well as right in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `the Elements panel`), `:`), mdx(\"img\", {\n    src: navigator,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"blockquote\", {\n    className: \"twitter-tweet-0\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"To be able to view @\\u200Bfont-face declarations.\"), \"\\u2014 Phloe_ (@phloe_)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/phloe_/status/1835776274578415974?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, `When inspecting an element with a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `font-family`), ` declaration in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `the Elements panel`), `, you can scroll down to the Font declarations to inspect and edit them:`), mdx(\"img\", {\n    src: fontface,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"remember-the-inspected-element\"\n  }, `Remember the inspected element`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A way to have dev tools auto-inspect/auto-select an element on page refresh.\"), \"\\u2014 Rik Schennink (@rikschennink)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/rikschennink/status/1836071634978922834?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Select element (the option to keep it highlighted ) just like in Firefox dev tools\"), \"\\u2014 Jorge Galarza (@jorsisu)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/jorsisu/status/1836154265431159158?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `The Elements panel`), ` in Polypane works like this: if you refresh the page and the element you were inspecting is still in the DOM, we automatically re-inspect it so you keep the context of what you're working on even if you needed to refresh the page.`), mdx(\"h2\", {\n    \"id\": \"accessibility-insights\"\n  }, `Accessibility insights`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A good out-of-the-box beginner experience for accessibility (aXe) checks.\", mdx(\"br\", null), mdx(\"br\", null), \"You can go through Lighthouse, but the UI isn't intuitive for simple \\\"scan the page, tell me what's wrong, and let me jump to elements + docs\\\" runs.\", mdx(\"br\", null), mdx(\"br\", null), \"I.e. I want the aXe devtools, but not spammed with ads.\"), \"\\u2014 Josh Goldberg \\uD83E\\uDD8B (@JoshuaKGoldberg)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/JoshuaKGoldberg/status/1835767156623163825?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A headings visualizer like the one in Web Developer Toolbar that shows h1-h6 headings, surfacing skipped levels and multiple h1s\"), \"\\u2014 Marcy Sutton Todd (@marcysutton)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/marcysutton/status/1835751823237583069?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"p\", null, `Polypane has two panels that give you this experience: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `the Outline panel`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/accessibility-panel/\"\n  }), `the Accessibility panel`), `. In the Accessibility panel you can quickly run an accessibility check for the current page and find the issues and which elements they appear on. From there it gives you suggestions and you can click to go straight to the Elements panel to remedy your issues.`), mdx(\"img\", {\n    src: a11ypanel,\n    alt: \"a11y panel showing issues\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `The outline panel shows you various outlines of your site: the Headers, Landmarks, Images, Links, Focus order as well as a full accessibility tree.`), mdx(\"p\", null, `All of these show you your structure, and then give feedback on issues it finds: what the issue is and how to fix it.`), mdx(\"p\", null, `There are dozens more accessibility features in Polypane. For all of them, check out our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/accessibility-overview/\"\n  }), `accessibility overview`), `.`), mdx(\"h2\", {\n    \"id\": \"inspecting-starting-style\"\n  }, `Inspecting `, mdx(\"code\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@starting-style`)), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"I used starting-style recently and found it unusual to not see it in the style panel in the dev tools\"), \"\\u2014 Adam Collier (@CollierAdam)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/CollierAdam/status/1835971019900584389?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Couldn\\u2019t find an easy way to play with starting-styles to tweak transition values. Checked out the animations panel but couldn\\u2019t make it work.\"), \"\\u2014 Agust\\xEDn D\\xEDaz (@HiroAgustin)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/HiroAgustin/status/1835731794236407940?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"p\", null, `Polypane was the first browser to land `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@starting-style`), ` inspection back in June of 2024. Inspect the element, go to the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@starting-style`), ` declaration and edit like any other CSS:`), mdx(\"video\", {\n    src: startingStyleVid,\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"persistent-user-styles\"\n  }, `Persistent user styles`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A way to make user styles and user scripts that persist even once devtools is closed.\"), \"\\u2014 Luke \\uD83E\\uDD8B @lukewarlow.dev (@luke_warlow)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/luke_warlow/status/1835785945049936355?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `The Snippets panel`), ` lets you add CSS (or JS) to your page either to all open panes, or to specific panes so you can compare your changes to the default page styles.`), mdx(\"p\", null, `The CSS stays active until you turn the snuppet off so it's ideal for testing out CSS while working on your page across reloads.`), mdx(\"video\", {\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true\n  }, mdx(\"source\", {\n    src: \"/doc-img/livecss/editor.mp4\"\n  })), mdx(\"h2\", {\n    \"id\": \"find-overflowing-elements\"\n  }, `Find overflowing elements`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"I might be mistaken but there's no \\\"this is the reason because this element is overflowing\\\" right?\"), \"\\u2014 \\uD83E\\uDDEA Pablopang.sveIte (@PaoloRicciuti)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/PaoloRicciuti/status/1835722122770985102?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), mdx(\"p\", null, `With Polypane's `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `layout debugging`), ` finding overflowing elements is as easy as pressing `, mdx(ShortcutDisplay, {\n    cmdKey: true,\n    letter: \"d\",\n    mdxType: \"ShortcutDisplay\"\n  }), ` to show all boxes on your page and highlight the elements that cause overflows.`), mdx(\"p\", null, `Overflowing elements are also logged to the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/console/\"\n  }), `Console`), ` so you can quickly inspect and edit them.`), mdx(\"img\", {\n    src: \"/doc-img/horizontaloverflowdebug.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"no-network\"\n  }, `No network`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"More prominently displaying that the network is turned off!!! Keyboard shortcuts for changing the network throttling settings.\"), \"\\u2014 Robert Balicki (\\uD83D\\uDC40 @IsographLabs) (@StatisticsFTW)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/StatisticsFTW/status/1836141645739200585?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, `Managing the network per tab is easy in Polypane:`), mdx(\"img\", {\n    src: networkEmulation,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `If you've turned off the network for a pane then it will get a red border and an exclamation icon above it to make you aware that it has no connection.`), mdx(\"img\", {\n    src: nonetwork,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"h2\", {\n    \"id\": \"atomic-css-style-editing\"\n  }, `Atomic CSS Style editing`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Better CSS panel UX for Tailwind CSS and other utility class frameworks\"), \"\\u2014 Karl Horky \\uD83E\\uDD8B @karlhorky.com (@karlhorky)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/karlhorky/status/1835917248696926663?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), mdx(\"p\", null, `The Class editor in the Elements panel Polypane works really well with atomic or utility CSS: You can quickly add and remove classes or toggle them on and off.`), mdx(\"img\", {\n    src: classeditor,\n    alt: \"The class list\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Adding classes can be done by typing into the field above the list, and Polypane automatically suggests classes for you to select.`), mdx(\"img\", {\n    src: addclasses,\n    alt: \"class list suggestions\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `We'll be building more specialised tooling for atomic CSS styles in 2025, so look out for that!`), mdx(\"h2\", {\n    \"id\": \"easily-toggling-dark-mode-and-other-preferences\"\n  }, `Easily toggling dark mode and other preferences`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Ability to add custom quick actions button. Such that I can add a button to easily switch between css prefer dark theme and light theme.\"), \"\\u2014 Simon Karman (@simon_karman)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/simon_karman/status/1836291269124886602?ref_src=twsrc%5Etfw\"\n  }, \"September 18, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"The device toolbar/responsive design mode should stay open even when devtools are closed.\", mdx(\"br\", null), mdx(\"br\", null), \"Also, easy toggles for switching between light/dark preferences. They should be front and center, not buried in a menu.\", mdx(\"br\", null), mdx(\"br\", null), \"These are the biggest pain points when I need to use Chrome.\"), \"\\u2014 Ryan Christian (@_rschristian)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/_rschristian/status/1835816536231252309?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Quick(er) switch back and forth between normal view and colorblind view\"), \"\\u2014 Knut Behrends (@sudo_f)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/sudo_f/status/1835746628843573529?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"img\", {\n    src: mediaEmulation,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem 0 2rem 1rem\",\n      \"maxWidth\": \"100%\",\n      \"cssFloat\": \"right\"\n    }\n  }), mdx(\"p\", null, `Polypane lets you toggle both `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `media features`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/#simulators\"\n  }), `simulators`), ` per pane through easy menus.`), mdx(\"p\", null, `Media features let you quickly toggle light/dark mode, forced colors, reduced motion and all the other media queries:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `prefers-color-scheme`), `: Switch between 'light' and 'dark' mode color schemes using prefers-color-scheme. Defaults to 'auto', which follows the browsers color scheme.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `prefers-reduced-motion`), `: Switch between 'no-preference' and 'reduce' options for the prefers reduced motion media feature.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `prefers-reduced-data`), `: Switch between 'no-preference' and 'reduce' options for the prefers reduced data media feature.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `prefers-reduced-transparency`), `: Switch between 'no-preference' and 'reduce' options for the prefers reduced transparency media feature.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `forced-colors`), `: Emulates the forced-colors mode when active. This overwrites all the styles on your page to either a light mode or dark mode theme, depending on what you picked for `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `prefers-color-scheme`), `.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `prefers-contrast`), `: Switch between 'no-preference', 'less', 'more' and 'custom' options for the prefers-contrast media feature.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `color-gamut`), `: Switch between 'off', 'srgb', 'p3' and 'rec2020' color gamut emulation.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Media type`), `: Switch between 'screen' and 'print' stylesheets.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Auto dark theme`), `: Toggle the Chromium automatic dark theme feature. Not strictly a media query, but it does change the way your site is rendered based on the user's settings.`)), mdx(\"p\", null, `And the Simulators in Polypane, 22 in total including 9 different color blindness simulators can be easily toggled on and off from the debug tools menu.`), mdx(\"img\", {\n    alt: \"All color blindness emulators side by side\",\n    src: \"/blogs/a11y/image8.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `Beyond color blindness, Polypane can also simulate other visual impairments like cataracts, glaucoma and macular degeneration.`), mdx(\"h2\", {\n    \"id\": \"debugging-offset-parents-and-stacking-context\"\n  }, `Debugging offset parents and stacking context`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"A stacking context debugger (This, but built-in: \", mdx(\"a\", {\n    href: \"https://t.co/wwZ1qgV0Cr\"\n  }, \"https://t.co/wwZ1qgV0Cr\"), \")\", mdx(\"br\", null), \"Hopefully less necessary thanks to top layer, but still would be helpful!\"), \"\\u2014 Nathan Albrecht (@albrechtnate)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/albrechtnate/status/1835792579067314339?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Show the closest position:relative ancestor for an absolute positioned element.\"), \"\\u2014 Senjor Egg (@senjoregg)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/senjoregg/status/1835836344230195340?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Some tool for debugging stacking context\"), \"\\u2014 Dominik Ja\\u0161ek (@jasek_dominik)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/jasek_dominik/status/1835916063801749516?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, `Offset parents and stacking contexts are difficult to debug, but with the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/#debug\"\n  }), `Debug tab`), ` in our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), ` you can easily see both the stacking context of an element and its offset parent, as well as CSS properties that often cause issues like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `z-index`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `position`), `.`), mdx(\"img\", {\n    src: debugpanel,\n    alt: \"The debug tab in the Elements panel\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `To learn more about offset parents and stacking contexts, read our article `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/\"\n  }), `Offset parent and stacking context: positioning elements in all three dimensions`), `.`), mdx(\"h2\", {\n    \"id\": \"quickly-disable-js\"\n  }, `Quickly disable JS`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"Quick disable javascript checkbox\"), \"\\u2014 \\u0414\\u0430\\u043D\\u0438\\u0438\\u043B @grawl@mastodon.social (@GrawlCore)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/GrawlCore/status/1835909947139166433?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, `Disabling JS for a pane can be done quickly through the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `Debug tools`), ` menu for each pane.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/disable-js.png\",\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `When JS is disabled we draw a red border and show a warning icon, so that you know something is different about this pane and you don't accidentally waste time figuring out why your JS doesn't work.`), mdx(\"h2\", {\n    \"id\": \"screenshots\"\n  }, `Screenshots`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"I'd like all the screenshot commands to be accessible without having to invoke cmd-P.\"), \"\\u2014 codeOfArmz (@codeofarmz)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/codeofarmz/status/1835749561362506166?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"p\", null, `In Polypane, `, mdx(ShortcutDisplay, {\n    cmdKey: true,\n    letter: \"p\",\n    mdxType: \"ShortcutDisplay\"\n  }), ` will create a screenshot of all visible panes in an easy overview.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/making-screenshots/\"\n  }), `Screenshotting`), ` individual panes is available by clicking the camera icon above a pane, where we have options to screenshot the viewport, a specific element or the full height of the page.`), mdx(\"p\", null, `When screenshotting an element you can choose to add padding around the element so your screenshot contains some of the context, and you can also add a delay before taking a screenshot so you can capture hover states or animations.`), mdx(\"video\", {\n    src: delay,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"responsive-design-mode\"\n  }, `Responsive design mode`), mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"The device toolbar/responsive design mode should stay open even when devtools are closed.\", mdx(\"br\", null), mdx(\"br\", null), \"Also, easy toggles for switching between light/dark preferences. They should be front and center, not buried in a menu.\", mdx(\"br\", null), mdx(\"br\", null), \"These are the biggest pain points when I need to use Chrome.\"), \"\\u2014 Ryan Christian (@_rschristian)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/_rschristian/status/1835816536231252309?ref_src=twsrc%5Etfw\"\n  }, \"September 16, 2024\")), ' ', mdx(\"blockquote\", {\n    className: \"twitter-tweet\",\n    \"data-conversation\": \"none\",\n    \"data-dnt\": \"true\"\n  }, mdx(\"p\", {\n    lang: \"en\",\n    dir: \"ltr\"\n  }, \"- a hotkey to open responsive view without devtools themselves\", mdx(\"br\", null), \"- a hotkey for every tab to open devtools right on that tab (at least console and network)\", mdx(\"br\", null), mdx(\"br\", null), \"using those in Firefox every day...\"), \"\\u2014 Lukas Trumm (@LukasTrumm)\", ' ', mdx(\"a\", {\n    href: \"https://twitter.com/LukasTrumm/status/1836094122848899521?ref_src=twsrc%5Etfw\"\n  }, \"September 17, 2024\")), ' ', mdx(\"p\", null, `This is what Polypane `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `does`), `.`), mdx(\"p\", null, `Polypane shows your site in multiple different viewports by default, so it's always in responsive design mode.`), mdx(\"p\", null, `There's a number of `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layouts/\"\n  }), `different layouts`), ` available letting you see different viewports side by side, focus on just one or have a regular browser pane. Each layout has a one-letter shortcut so you can quickly switch between them.`), mdx(\"h2\", {\n    \"id\": \"missing-anything-else\"\n  }, `Missing anything else?`), mdx(\"p\", null, `Are you missing any other features? Let us know! We're always looking to improve Polypane and make it the best browser for web developers.`), mdx(\"p\", null, `If the above has piqued your interest, click the link below to start a free trial of Polypane!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":6,"tableOfContents":{"items":[{"url":"#whats-polypane","title":"What's Polypane?"},{"url":"#built-in-contrast-checker","title":"Built-in contrast checker"},{"url":"#html-validation","title":"HTML validation"},{"url":"#pixel-perfect-image-overlay","title":"Pixel perfect image overlay"},{"url":"#quickly-checking-alignment","title":"Quickly checking alignment"},{"url":"#better-insights-into-fonts","title":"Better insights into fonts"},{"url":"#remember-the-inspected-element","title":"Remember the inspected element"},{"url":"#accessibility-insights","title":"Accessibility insights"},{"url":"#inspecting-starting-style","title":"Inspecting @starting-style"},{"url":"#persistent-user-styles","title":"Persistent user styles"},{"url":"#find-overflowing-elements","title":"Find overflowing elements"},{"url":"#no-network","title":"No network"},{"url":"#atomic-css-style-editing","title":"Atomic CSS Style editing"},{"url":"#easily-toggling-dark-mode-and-other-preferences","title":"Easily toggling dark mode and other preferences"},{"url":"#debugging-offset-parents-and-stacking-context","title":"Debugging offset parents and stacking context"},{"url":"#quickly-disable-js","title":"Quickly disable JS"},{"url":"#screenshots","title":"Screenshots"},{"url":"#responsive-design-mode","title":"Responsive design mode"},{"url":"#missing-anything-else","title":"Missing anything else?"}]},"excerpt":"A while ago Adam Argyle of the Chrome Devtools team asked developers on X/Twitter a question: Adam got a ton of responses with many good suggestions and ideas…","frontmatter":{"title":"The devtools features you wish you had, available in Polypane","cover":"/blogs/5mintest/cover.svg","date":"2024-11-20","updated":null},"fields":{"slug":"/blog/the-devtools-features-you-wish-you-had-available-in-polypane/","date":"2024-11-19T23:00:00.000Z","ogFileName":"the-devtools-features-you-wish-you-had-available-in-polypane"}}},"pageContext":{"slug":"/blog/the-devtools-features-you-wish-you-had-available-in-polypane/"}},"staticQueryHashes":["4164364741","425175329"]}