{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/responsive-debugging-workflow/","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\": \"Responsive debugging workflow\"\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, `Responsive bugs are hard to track down when you can only look at one viewport at a time. Polypane shows all your breakpoints side by side and syncs every interaction across them, so you can track down layout and media query issues in a single pass.`), mdx(\"h2\", {\n    \"id\": \"1-generate-panes-for-your-breakpoints\"\n  }, `1. Generate panes for your breakpoints`), mdx(\"p\", null, `Click the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/breakpoints/\"\n  }), `Breakpoints button`), ` in the top right of the screen (or press `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"b\",\n    mdxType: \"ShortCutDisplay\"\n  }), `) to create a pane for every width-based CSS media query breakpoint Polypane detects in your CSS. Panes are sorted smallest to largest so you can read the layout progression left to right.`), mdx(\"img\", {\n    src: breakpoints,\n    className: \"imgshadow\",\n    alt: \"The breakpoints button showing detected breakpoints.\"\n  }), mdx(\"p\", null, `If you want a broader overview rather than every individual breakpoint, right-click the Breakpoints button and choose \"Simplified\" to get one representative pane per size range.`), mdx(\"p\", null, `To test the boundaries where a breakpoint switches on or off, right-click the Breakpoints button and use \"Breakpoint Edges\". This creates panes at the breakpoint width and one pixel either side, which makes it easy to catch styles that apply at the wrong size.`), mdx(\"h2\", {\n    \"id\": \"2-reproduce-the-bug-in-all-panes-at-once\"\n  }, `2. Reproduce the bug in all panes at once`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `Synced interactions`), ` means anything you do in one pane, scroll, click, hover, type, happens in every other pane at the same time. Navigate to the page with the issue and interact with it normally. You will immediately see which panes show the broken behaviour and which do not.`), mdx(\"p\", null, `If a bug only appears when a menu is open or a state is active, trigger that state once and all panes reflect it simultaneously.`), mdx(\"img\", {\n    src: syncedInteractions,\n    className: \"imgshadow\",\n    alt: \"Synced interactions control in the address bar.\"\n  }), mdx(\"h2\", {\n    \"id\": \"3-find-the-element-causing-the-problem\"\n  }, `3. Find the element causing the problem`), mdx(\"p\", null, `Hold `, mdx(ShortCutDisplay, {\n    altKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` and click the broken element in any pane to inspect it. The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), ` opens and highlights that element across every pane so you can compare how it renders at each size.`), mdx(\"p\", null, `The Styles tab shows all CSS rules applied to the element including which media queries are active, so you can see exactly where your styles change and whether the right rules are applying at each breakpoint.`), mdx(\"h2\", {\n    \"id\": \"4-enable-layout-debugging\"\n  }, `4. Enable layout debugging`), mdx(\"p\", null, `Press `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"d\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to toggle `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `layout debugging`), ` globally. This outlines every element on the page in a different colour, which makes it straightforward to see box model issues, unexpected wrapping, or collapsed containers that would otherwise be invisible.`), mdx(\"p\", null, `Elements causing a horizontal overflow are highlighted in red. For automatic horizontal overflow detection before layout debugging is needed, see `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/horizontal-overflow/\"\n  }), `Horizontal overflow`), `.`), mdx(\"img\", {\n    src: \"/doc-img/horizontaloverflowdebug.png\",\n    className: \"imgshadow\",\n    alt: \"Layout debugging outlines with a horizontal overflow element highlighted in red.\"\n  }), mdx(\"p\", null, `For individual panes, open `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `Debug tools`), ` and apply layout debugging to a single pane only. You can also use the Flex/Grid overlay from the Elements panel to visualise flex and grid containers directly on the page.`), mdx(\"h2\", {\n    \"id\": \"5-edit-styles-and-see-all-breakpoints-update\"\n  }, `5. Edit styles and see all breakpoints update`), mdx(\"p\", null, `Make changes in the Styles tab of the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), ` and every pane reflects the edit immediately. This lets you try a CSS fix and confirm it works at every breakpoint before writing it into your source code.`), mdx(\"img\", {\n    src: stylepanel,\n    className: \"imgshadow\",\n    alt: \"The Styles tab in the Elements panel showing CSS rules and media queries.\"\n  }), mdx(\"p\", null, `If you need to test a specific pseudo-state like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:hover`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:focus`), `, toggle it on in the Elements panel so it stays active while you edit.`), mdx(\"h2\", {\n    \"id\": \"6-check-emulated-conditions\"\n  }, `6. Check emulated conditions`), mdx(\"p\", null, `Some responsive bugs only appear under specific operating conditions. Use `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `Emulation settings`), ` on each pane to test combinations like:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Dark mode alongside light mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-motion`), ` to check whether animations are correctly disabled`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A different device pixel ratio to test high-density display styles`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Touch versus pointer input`)), mdx(\"p\", null, `Because emulation is per-pane, you can have the default and an emulated condition open side by side without switching anything on and off.`), mdx(\"img\", {\n    src: mediaEmulation,\n    className: \"imgshadow\",\n    alt: \"Emulation settings panel showing media feature options.\"\n  }), mdx(\"h2\", {\n    \"id\": \"7-capture-your-findings\"\n  }, `7. Capture your findings`), mdx(\"p\", null, `Use `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/making-screenshots/\"\n  }), `overview screenshots`), ` to capture all panes in one image. Any active debug overlays appear in the screenshot, so layout debugging outlines and overflow highlights are preserved. Attach these to bug reports or pull requests to give a clear before/after comparison.`), mdx(\"h2\", {\n    \"id\": \"see-also\"\n  }, `See also`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/breakpoints/\"\n  }), `Breakpoints`), ` to automatically generate panes from your CSS media queries`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `Synced interactions`), ` for how interactions are kept in sync across panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `Layout debugging`), ` for element outlines and overflow highlighting`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), ` to inspect and edit elements across all panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `Debug tools`), ` for per-pane overlays`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `Emulation`), ` for device and user preference simulation`)), mdx(\"h3\", {\n    \"id\": \"from-the-blog\"\n  }, `From the blog`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/blog/strategies-for-dealing-with-horizontal-overflows/\"\n  }), `How to find the cause of horizontal scrollbars`), `: strategies for tracking down elements that cause unwanted horizontal overflow`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/blog/device-testing-is-not-enough/\"\n  }), `Device testing is not enough`), `: why testing at specific device sizes misses a large portion of your users`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/blog/overlooked-breakpoints-in-responsive-design/\"\n  }), `Overlooked breakpoints in responsive design`), `: the viewport sizes that often get forgotten during testing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\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`), `: a deep dive into the layout concepts behind the most common positioning bugs`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"Responsive bugs are hard to track down when you can only look at one viewport at a time. Polypane shows all your breakpoints side by side…","frontmatter":{"title":"Responsive debugging workflow","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Team workflows","nextSlug":"/docs/team-workflows/","prevTitle":"Accessibility audit workflow","prevSlug":"/docs/accessibility-audit-workflow/","slug":"/docs/responsive-debugging-workflow/","date":null,"ogFileName":"responsive-debugging-workflow"}},"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/responsive-debugging-workflow/"}},"staticQueryHashes":["4164364741","425175329"]}