{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-4-unified-console-dom-tree-in-elements-panel/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 4: Unified Console, DOM tree in elements panel\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2020-11-09\",\n  \"type\": [\"announcement\"]\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 new unified Polypane console, a treeview in the elements panel, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-data`), ` and locale emulation, docked devtools for isolated panes, new and updated social media previews and debug tools, Chromium 87 and over 60 new features, improvements and fixes.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"unified-console\"\n  }, `Unified console`), mdx(\"p\", null, `Polypane now comes with a single place that shows the console messages from all panes. Messages are automatically deduplicated, color-coded and you can easily see which panes emitted which messages. You can log strings, arrays, objects, elements and even DOM objects (like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `window`), `), we support `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `log`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `info`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `debug`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `table`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `warn`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `error`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `dir`), ` and you can easily filter messages by type or by text.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `But the Polypane console doesn't just `, mdx(\"em\", {\n    parentName: \"strong\"\n  }, `show`), ` console messages.`), ` It's a fully functioning console that lets you send console commands to all panes at the same time.`), mdx(\"img\", {\n    \"alt\": \"Console panel\",\n    \"src\": \"/blogs/polypane-4/console-small.gif\",\n    \"className\": \"imgshadow\",\n    \"style\": {},\n    \"margin:\": \"\",\n    \"'2rem\": \"\",\n    \"auto',\": \"\",\n    \"display:\": \"\",\n    \"'block',\": \"\",\n    \"maxwidth:\": \"\",\n    \"'100%'\": \"\",\n    \"}}\": \"\"\n  }), mdx(\"p\", null, `There's syntax highlighting as you type, multiline commands, it remembers previous commands (easily go back to them using the arrow keys) and a whole host of convenience utilities: `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `$0`), ` through `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `$4`), ` are the last five elements selected in the Polypane elements panel, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `$()`), ` maps to `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `querySelector`), ` while `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `$$()`), ` is the same as `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `querySelectorAll`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `$_`), ` is the output of the previous command etc. Check the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/console/#console-commands\"\n  }), `console panel documentation`), ` for the full list.`), mdx(\"p\", null, `We've been using it ourselves for a while and it really changes how you work with multiple panes. The console works just like you expect it to and getting feedback across all panes for a single command really cuts back on debugging time.`), 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/ADvdTqFvLYk?&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(\"h2\", {\n    \"id\": \"dom-tree-in-element-inspector\"\n  }, `DOM Tree in Element inspector`), mdx(\"p\", null, `The unified element inspector in Polypane lets you easily inspect and edit elements across all panes. Since launching it April of this year we've made some big improvements to it and in Polypane 4 we're making another leap.`), mdx(\"p\", null, `A lot of you have been asking for a DOM tree view of the document, and after creating the view-source panel in our previous release, we went one step beyond and built the tree view for the Polypane element inspector as well.`), mdx(\"p\", null, `The new tree view gives you a great overview of your page, from the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `doctype`), ` to the most deeply nested elements, and makes it easier than ever to switch between elements.`), mdx(\"img\", {\n    alt: \"Tree view in elements panel\",\n    src: \"/blogs/polypane-4/treeview.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto'\n    }\n  }), mdx(\"p\", null, `It's still really easy to select child element and text nodes and edit them, and we've redesigned the bottom-aligned element inspector to make better use of the space.`), mdx(\"h2\", {\n    \"id\": \"docked-devtools-in-isolate-pane-mode\"\n  }, `Docked devtools in isolate pane mode`), mdx(\"p\", null, `We're also continuing to make improvements to our isolate pane mode, which gives you access to device and media query emulation.`), mdx(\"p\", null, `Devtools for isolated panes are now docked automatically in the Panel where you can easily access them and switch between them. If you prefer them undocked, that option is still available too.`), mdx(\"h3\", {\n    \"id\": \"updates-to-the-devtools-extension-manager\"\n  }, `Updates to the devtools extension manager`), mdx(\"p\", null, `From the devtools panel you can also easily open the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browser-extensions/\"\n  }), `browser extension manager`), ` where you can install your favorite developer tool extensions like the React.js or Vue.js devtools. Updated in this version of Polypane, we show the icon and version number of each extension.`), mdx(\"h2\", {\n    \"id\": \"new-emulation-options-prefers-reduced-data-orientation-and-locale\"\n  }, `New emulation options: prefers-reduced-data, orientation and locale`), mdx(\"img\", {\n    alt: \"Redesigned emulation options\",\n    src: \"/blogs/polypane-4/emulation.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1em 0 1rem 1rem',\n      float: 'right'\n    }\n  }), mdx(\"p\", null, `We redesigned the emulation panel to make changing and experimenting with different emulation options easier. Because `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` is removing the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `no-preference`), ` option, all our media feature settings can be toggles, making it easy to see at a glance which option is on and which is not.`), mdx(\"h3\", {\n    \"id\": \"prefers-reduced-data\"\n  }, `prefers-reduced-data`), mdx(\"p\", null, `The `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-data`), ` media feature is currently trialing in Chromium 87 and can be used to serve up lighter versions of backgrounds, fonts and other elements loaded through CSS (or not loaded because of CSS, like with hidden elements) to preserve data for people that are on slow connections or have data caps.`), mdx(\"p\", null, `We think this feature can have a big impact on websites and are excited to make testing it as easy as clicking a single toggle.`), mdx(\"h3\", {\n    \"id\": \"orientation\"\n  }, `Orientation`), mdx(\"p\", null, `Polypane now automatically sends orientation change events when you rotate a pane. If your app depends on these JS events, you can now very easily test them inside Polypane.`), mdx(\"p\", null, `This is different from the CSS `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `orientation`), ` media feature, which has always worked in Polpane. This feature adds the JS events and matching window.screenOrientation values.`), mdx(\"h3\", {\n    \"id\": \"locale\"\n  }, `Locale`), mdx(\"p\", null, `Locale lets you request pages with any locale other than your default locale, and this influences for example the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Intl`), ` api.`), mdx(\"p\", null, `We've preloaded all the locales we know (and quite a few we don't know) so selecting the one you want to test with, whether that's `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `en-US`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `nl-NL`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `az-Cyrl-AZ`), ` is easy.`), mdx(\"h2\", {\n    \"id\": \"redesigned-getting-started-page\"\n  }, `Redesigned \"getting started\" page`), mdx(\"p\", null, `Polypane is a tool with a lot of features and a lot of depth, and we haven't been doing the best job in explaining the basics. With our redesigned \"getting started\" page this changes.`), mdx(\"p\", null, `We gave it a fresh new design with support for both both light and dark modes, It has two dozen new tips, the latest news, easy links to documentation, blogs and support and will tell you when there's a new version of Polypane available.`), mdx(\"p\", null, `It also gives you a checklist of seven things to get familiar with as your first use Polypane. As you use Polypane, these items will automatically be checked and if you need help, there's explanations on how to do each of the things with links to documentation.`), mdx(\"p\", null, `We hope this helps people get familiar with managing panes in Polypane as fast as possible, so they can explore all the features Polypane has to offer.`), mdx(\"img\", {\n    alt: \"New getting started page\",\n    src: \"/blogs/polypane-4/gettingstarted.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"overlays-are-now-debug-tools-and-new-disable-css-debug-tool\"\n  }, `Overlays are now Debug tools, and new Disable CSS Debug tool`), mdx(\"p\", null, `We've renamed the \"Overlays\" to Debug tools to make them easier to understand and find and along with it, have updated the icon to something less abstract.`), mdx(\"p\", null, `We've also added a new `, mdx(\"del\", {\n    parentName: \"p\"\n  }, `Overl`), `... Debug tool, \"Disable CSS\". As you can probably guess, this disables `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `all`), ` CSS on a page, both linked stylesheets and style attributes, giving you the raw HTML styling.`), mdx(\"img\", {\n    alt: \"New maximum with for columns\",\n    src: \"/blogs/polypane-4/disableoverlay.jpg\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem auto'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"new-and-updated-social-media-previews\"\n  }, `New and updated social media previews`), mdx(\"p\", null, `Since the beginning of 2020 Polypane has offered pixel perfect and up-to-date social media previews, updating them whenever the site designs changes. This takes a lot of research to make sure we use the same rendering logic and fallback values as the each service. It's a lot of effort but we feel it's worth it to be sure of how the elements render. If you can't depend on a preview you still have to check the real thing, wasting your time.`), mdx(\"p\", null, `So we keep track of changes. The first time this happened was back in January, two weeks after we launched out previews, when Google SERPs changed from the green breadcrumb under the title to a grey breadcrumb above the title.`), mdx(\"p\", null, `If your current web development tool still renders SERPS like this:`), mdx(\"img\", {\n    alt: \"Outdated Google SERP preview\",\n    src: \"/blogs/polypane-4/serp-old.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem auto'\n    }\n  }), mdx(\"p\", null, `Instead of like this:`), mdx(\"img\", {\n    alt: \"Polypane's Google SERP preview\",\n    src: \"/blogs/polypane-4/serp-poly.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem auto'\n    }\n  }), mdx(\"p\", null, `Then they're `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `at least`), ` 10 months out of date.`), mdx(\"p\", null, `As for Polypane, it definitely wasn't the preview we expected to have to change first, but we `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/polypane/status/1222162334237499396\"\n  }), `swiftly updated`), ` even as their experiment was still running.`), mdx(\"h3\", {\n    \"id\": \"linkedin-update\"\n  }, `LinkedIn update`), mdx(\"p\", null, `This month LinkedIn launched their new design, updating the colors, margins, amount of text they display and adding a \"X min read\" indicator.`), mdx(\"p\", null, `We've updated our LinkedIn design so you can be sure that if it renders the way you want in Polypane, it renders the way you want on LinkedIn.`), mdx(\"img\", {\n    alt: \"LinkedIn preview\",\n    src: \"/blogs/polypane-4/linkedin.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem auto'\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"telegram-web\"\n  }, `Telegram (web)`), mdx(\"p\", null, `We got many requests to add Telegram so we reverse-engineered their previews and made an identical copy in Polypane. Telegram's previews work similar to those of Slack and Discord, but they impose more limits on the description length (if you follow Polypane's meta info suggestions you'll be fine!) and have smaller image previews.`), mdx(\"img\", {\n    alt: \"Telegram preview\",\n    src: \"/blogs/polypane-4/telegram.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem auto'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"new-ruler-options\"\n  }, `New ruler options`), mdx(\"p\", null, `Fluid columns and grids can now be given a maximum width so you can easily copy over the grid system a designer made in Sketch, Figma or XD and overlay it on your site as you work.`), mdx(\"p\", null, `Additionally, you can now toggle the visibility of guides, grids, columns and rows without removing their settings so they're easier to use and you don't have to re-apply them every time you want to use them.`), mdx(\"img\", {\n    alt: \"New maximum with for columns\",\n    src: \"/blogs/polypane-4/columns.jpg\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem auto'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"chromium-87\"\n  }, `Chromium 87`), mdx(\"p\", null, `Polypane now runs Chromium 87, slightly ahead of the official Chromium release. Chromium 87 brings a host of improvements to Polypane (like the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-data`), ` emulation and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `sameSite`), ` support for cookies among other things) and has some nice performance improvements as well. This is a bit of an experiment for us so we're keen to hear your input. Let us know if you like Polypane being a little ahead of the official Chrome!`), mdx(\"h2\", {\n    \"id\": \"improved-support-for-linux-systems\"\n  }, `Improved support for Linux systems`), mdx(\"p\", null, `Previous versions of Polypane used native code for some functionality but starting with Polypane 4 we have no native code anymore. This means that Polypane will run on far more versions of Linux. If you had trouble running Polypane in the past, or you're running Polypane in a VM, then this release will let you run it natively.`), mdx(\"h2\", {\n    \"id\": \"other-updates\"\n  }, `Other updates`), mdx(\"p\", null, `With over 60 changes in total this announcement is long enough. As always all the documentation has been updated for the new release, and you can find the full changelog below.`), mdx(\"p\", null, `Some other updates I wanted to highlight:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `We added new presets for iPhone 12.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `A whole bunch of UI tweaks like a new layout for the bottom-aligned meta panel.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Performance improvements around CRA and Webpack sites with lots of injected CSS.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Scrolling performance and hover syncing improvements.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `And a number of bug fixes around pane size handling and custom homepages.`)), mdx(\"p\", null, `It's a big release, we hope you like it.`), mdx(\"h3\", {\n    \"id\": \"getting-polypane-4\"\n  }, `Getting Polypane 4`), mdx(\"p\", null, `Polypane will automatically update on Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` and if you're on Mac and Windows but don't want to wait on the update popup, you can find\nyour download there as well.`), mdx(\"p\", null, `If you don't have Polypane yet there is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Get it here`), `.`), mdx(\"h3\", {\n    \"id\": \"full-changelog\"\n  }, `Full Changelog`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Polypane unified console panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Element inspector now has a tree view`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Docked devtools for isolate pane mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Disable CSS debug tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Telegram (web) meta preview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Prefers-reduced-data emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Locale emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for screen orientation events`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Redesigned getting started page`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Redesigned emulation options popover`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Chromium 87`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` iPhone 12 presets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Tabs scroll into view when added`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for setting the sameSite value for cookies`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Right-click new tab button to choose layout and set default layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Right-click between panes to add new pane there`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Tabs are colored by favicon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Meta panel is colored by favicon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Overlays are now called \"Debug tools\" and has a new icon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` \"Simplified breakpoints\" now uses mobile-first logic`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Linkedin Card redesign`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Column and Row overlays now support max size`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Ruler overlays can now be turned off individually`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Scroll sync performance for pages with many links is improved`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New Element inspector horizontal view layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New Meta panel horizontal view layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New Storage panel horizontal view layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta name and properties are now cast to lowercase for consistency`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel strips whitespace for the class attribute`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Box model rendering in dark mode now has appropriate colors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Google Fonts to latest available fonts and variable fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Sync hover styles for uncomputed shorthand styles`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Devtools manager shows icon and version of extension`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Hide the scrollbar when the pane area is not focused`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Naming consistency in main menu improved`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Reload menu now shows shortcuts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Update iOS and Device lab workspace presets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` CSS Frameworks workspace presets now get calculated height`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Favicon testing is now more efficient`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Collapse box model now has a chevron icon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Overflow detection now re-runs on pane resize`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Accessibility panel upgraded to axe-core 4.0.2`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Accessibility panel HTML code is syntax highlighted`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Store last used inspect element type in isolate pane mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` individual pane zoom can now go up to 2`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Always show pane emulation options for discoverability`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Panel rendering performance`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Tab out of filled-in css rule in elements panel to apply it`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Polypane becoming very slow with invalid HTML`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` New panes in horizontal and vertical layout are now consistently sized`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Disable discretionary ligatures in Slack and Discord previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` iPhone 11 viewport size`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Remove ligatures in Accessibility panel code examples`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Remove newlines in Accessibility panel code examples`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` There is no longer uneditable CSS in devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where Live CSS wasn't applied to isolate panes on app launch`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent dragging app on mac when trying to select text`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Meta data refresh no longer triggers an Accessibility test`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Bug where pane presets overwrote default workspaces`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Address bar now also gets focused when user has a custom homepage`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent Debug tools and Emulation popovers from overflowing the viewport`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent pane icons clipping popovers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent tabs overwriting each other when a user has a custom homepage`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where clicking the ruler options scrolled the pane area`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Search params are correctly restored on url load`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Alignment of copy icon for element.style`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Replace Sharp with Jimp for cross-platform compatibility`)), mdx(\"h3\", {\n    \"id\": \"401-changelog\"\n  }, `4.0.1 changelog`), mdx(\"p\", null, `4.0.1 fixes a number of performance issues and bugs, as well as improvements for the elements, console and outline panel`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Link overview in Outline panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Header overview in Outline panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Landmark overview in Outline panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `cmd/ctrl + shift + l`), ` shortcut to open side browser and focus its address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Tailwind CSS 2.0 2xl breakpoint added to workspace`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Element panel style values now grow to fit content`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Element panel support color picker for custom properties and other color-like properties`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Toggle between viewport size and device size is now more explicit`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Treeview performance for long pages increased by order of magnitude`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Synced hover styles no longer show up in elements panel and treeview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better combining of similar Console messages`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel supports HTML4 style of charset`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Mac UI alignment fixes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Now correctly syncs clicks on elements that get removed from the DOM as a result of the click`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Support trailing `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `;`), ` when adding new styles.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` External CSS Files that give a 404 are no longer loaded`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element panel no longer changes 'px' to 'x' when using arrow keys`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue with auto updating failing due to double download`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Getting started page no longer shows overlapping tips`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Breakpoints quickswitcher in focus mode now works again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Mac users can now drag Polypane with devtools open`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Docked devtools in isolate pane mode now accept mouse input`)), mdx(\"h3\", {\n    \"id\": \"402-changelog\"\n  }, `4.0.2 changelog`), mdx(\"p\", null, `4.0.2 adds automated link checking, fixes a number of interaction bugs and improves rendering speed.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Link overview now checks for broken links and links with issues.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live onboarding chat support + live chat support through help menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Middle click on history items or address bar suggestions to open them in a new tab.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live reload indicators are now also visible on tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Page load times improved by smarter loading of Polypane debug styles.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Slack card rendering now supports labels and article published time`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Reference image now retina-screen aware, so no longer resizes panes on Mac (Thanks Yahya!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Polypane is now smarter about focusing the address bar, only focusses it when manually adding a new tab.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Easier selection of elements in the element panel (Thanks Alex!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Element tooltip now shows accessible name and role when available`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Element inspector now prevent clicks on underlying elements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` More CSS Custom properties now have color pickers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Outline panel now defaults to headers overview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Outline panel header is now always visible.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Dark theme refinements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Polypane scrollbar now adapts to dark theme`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Speed improvement for SCSS in Live CSS panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Keyboard syncing now more reliable (Thanks Alex!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` More resilient handling of (potentially broken) external stylesheets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Telegram Web image sizing more accurate`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Minimum pane size updates from 100x100 to 50x50 (Thanks Joel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where element highlighting wasn't visible for partically covered elements (Thanks Lori!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Text in element tooltip now always left-aligned.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Opening new tabs in Isolate pane mode no longer also opens a popup window`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Right-click on history items no longer opens new tab`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Tab bar had a focus ring`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Parent styles being removed after hover`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Switching between panel tabs lost which inner tab was focused`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where the address bar was spell-checked`)), mdx(\"h3\", {\n    \"id\": \"403-changelog\"\n  }, `4.0.3 changelog`), mdx(\"p\", null, `4.0.3 adds Big sur and M1 support for Polypane and many performance improvements.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Universal Mac binary`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Big Sur style icon for Mac (Thank you many people!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` View source is now automatically formatted by Prettier`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Unneeded Scrollbar emulation debug tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` File menu added for Mac users (Thanks John!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Retina support for rulers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Slack preview uses the correct favicon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Support for all discrete facebook widths`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Handoff/Browse panel renamed to just Browse`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated Google fonts database`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Load performance improvements for sites with stylesheets with 30K+ CSS selectors like Tailwind 2 dev version (Thanks Bjoern and Vivian!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Performance improvements for side panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Linux Icon sizes update`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Devtools button now opens devtools for first pane in Isolate pane mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Better CSS Breakpoint detection in 3rd party stylesheets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Live Chat support available during signup flow as well`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Wobbly reload icon on Mac`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Closing panel through close button always hide devtools too`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Browser layout resizing issue in isolate pane mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Warning on re-opening the window on Mac`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live CSS panel not clearing style when removing SCSS`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Devtools inner panel resizing issue (Thanks Alex!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent double load for Outline panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent double load for Element panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent new tabs from being opened when opening a new url from suggestions with arrow keys`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Guides were off by one`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":11,"tableOfContents":{"items":[{"url":"#unified-console","title":"Unified console"},{"url":"#dom-tree-in-element-inspector","title":"DOM Tree in Element inspector"},{"url":"#docked-devtools-in-isolate-pane-mode","title":"Docked devtools in isolate pane mode","items":[{"url":"#updates-to-the-devtools-extension-manager","title":"Updates to the devtools extension manager"}]},{"url":"#new-emulation-options-prefers-reduced-data-orientation-and-locale","title":"New emulation options: prefers-reduced-data, orientation and locale","items":[{"url":"#prefers-reduced-data","title":"prefers-reduced-data"},{"url":"#orientation","title":"Orientation"},{"url":"#locale","title":"Locale"}]},{"url":"#redesigned-getting-started-page","title":"Redesigned \"getting started\" page"},{"url":"#overlays-are-now-debug-tools-and-new-disable-css-debug-tool","title":"Overlays are now Debug tools, and new Disable CSS Debug tool"},{"url":"#new-and-updated-social-media-previews","title":"New and updated social media previews","items":[{"url":"#linkedin-update","title":"LinkedIn update"},{"url":"#telegram-web","title":"Telegram (web)"}]},{"url":"#new-ruler-options","title":"New ruler options"},{"url":"#chromium-87","title":"Chromium 87"},{"url":"#improved-support-for-linux-systems","title":"Improved support for Linux systems"},{"url":"#other-updates","title":"Other updates","items":[{"url":"#getting-polypane-4","title":"Getting Polypane 4"},{"url":"#full-changelog","title":"Full Changelog"},{"url":"#401-changelog","title":"4.0.1 changelog"},{"url":"#402-changelog","title":"4.0.2 changelog"},{"url":"#403-changelog","title":"4.0.3 changelog"}]}]},"excerpt":"A new unified Polypane console, a treeview in the elements panel,  prefers-reduced-data  and locale emulation, docked devtools for isolated panes, new and…","frontmatter":{"title":"Polypane 4: Unified Console, DOM tree in elements panel","cover":"/img/mail/icon.svg","date":"2020-11-09","updated":null},"fields":{"slug":"/blog/polypane-4-unified-console-dom-tree-in-elements-panel/","date":"2020-11-08T23:00:00.000Z","ogFileName":"polypane-4-unified-console-dom-tree-in-elements-panel"}}},"pageContext":{"slug":"/blog/polypane-4-unified-console-dom-tree-in-elements-panel/"}},"staticQueryHashes":["4164364741","425175329"]}