{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-24-1-new-measure-tool-xml-viewer-and-find-by-css-selector/","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 24.1: New Measure tool, XML viewer and Find by CSS selector\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2025-05-19\",\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 measure overlay lets you drag out a rectangle on the page and measure arbitrary parts of the page and screenshot the selected area. The XML viewer lets you inspect and filter XML files like RSS or OPML files and the Find by CSS selector has a new inspection option.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"new-measure-overlay\"\n  }, `New: Measure overlay`), mdx(\"p\", null, `A measure overlay has been on my wish-list for a very long time, and I'm happy to finally have it in Polypane.`), mdx(\"p\", null, `When you have `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/rulers-grids-and-guides/\"\n  }), `rulers`), ` visible (which, starting in this release, can be set per tab!) you can now activate the measure overlay and then drag out a rectangle on the page to measure parts of the page.`), mdx(\"p\", null, `The rectangle shows the width and height of the selected area and the distance to the edges of the page.`), mdx(\"p\", null, `While creating, dragging or resizing the rectangle it will automatically snap to any nearby guides so you can easily align them with each other.`), mdx(\"video\", {\n    src: measureoverlay,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `You'll also find a new \"Measured\" option in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/making-screenshots/\"\n  }), `pane screenshot`), ` menu. When you have the measure overlay active, this will screenshot the selected area of the page for you. Perfect if you don't want to screenshot the entire viewport, but you also want to screenshot more than just a single element.`), mdx(\"p\", null, `With the measure overlay active you can still scroll up and down the page, but all your clicks will be captured by the measure overlay. To interact with the page again, toggle the measure overlay, or hide the guides with `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"g\",\n    mdxType: \"ShortCutDisplay\"\n  }), `.`), mdx(\"h2\", {\n    \"id\": \"new-xmlrss-viewer\"\n  }, `New: XML/RSS Viewer`), mdx(\"p\", null, `Along with HTML and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/json-and-xml-viewer/#json-viewer\"\n  }), `JSON`), `, Polypane now also supports XML.`), mdx(\"p\", null, `Perfect if you want to inspect your RSS feed, OPML file or any other XML document. The XML viewer is a full-fledged XML viewer that lets you inspect the XML document in a tree view, and it also has a text view for when you want to see the raw XML.`), mdx(\"p\", null, `It has all the same great features that our JSON viewer so it'll be familiar if you've used that in the past.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Single-click save and copy of the entire document`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Quick filtering to show only the elements you want to see`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `expand or collapse nodes based on their name`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Syntax highlighting`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Automatic recognition of links`)), mdx(\"img\", {\n    src: xmltree,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/json-and-xml-viewer/#xml-viewer\"\n  }), `XML viewer`), ` is available in the regular panes as well as in the browse panel, so no matter if you want to inspect it alongside your website or on its own, it's available wherever you need it.`), mdx(\"h2\", {\n    \"id\": \"new-find-by-css-selector\"\n  }, `New: Find by CSS selector`), mdx(\"p\", null, `Polypane has both a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browser-features/#searchfind-text-in-page\"\n  }), `find in page`), ` and a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/find-elements/\"\n  }), `find by CSS selector`), ` feature, but Nils made us aware that while you can find elements, there wasn't an easy way to then inspect the element you found in the elements panel.`), mdx(\"p\", null, `Now you'll find a new inspect icon in the Find by CSS selector feature that will open the currently found element in the elements panel. Thanks Nils!`), mdx(\"img\", {\n    src: findelement,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"new-updated-linkedin-share-design\"\n  }, `New: Updated LinkedIn share design`), mdx(\"p\", null, `The LinkedIn share design in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta panel`), ` has been updated to match the new LinkedIn design, which has yet a smaller image and now no longer shows how long the page will take to read.`), mdx(\"img\", {\n    src: linkedin241,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"edit-tab-by-double-click\"\n  }, `Edit tab by double click`), mdx(\"p\", null, `In Polypane 24 we added `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/tab-customization/\"\n  }), `tab customizations`), ` that let you rename tabs and change their color. In this release you can now also double-click a tab to edit the title and color of the tab, along with the existing right-click option.`), mdx(\"h2\", {\n    \"id\": \"notable-bug-fixes\"\n  }, `Notable bug fixes`), mdx(\"p\", null, `Some of the bugs fixed in this release are:`), mdx(\"h3\", {\n    \"id\": \"pointer-lock-api\"\n  }, `Pointer lock API`), mdx(\"p\", null, `In previous versions of Polypane, using the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Pointerlock`), ` api would crash the browser. (Thanks Andrew for letting us know!) This was caused by a recent change in Chromium, and Shelley from the Electron team quickly found and fixed the issue in Chromium.`), mdx(\"p\", null, `From bug report in Polypane to fix in Chromium and shipping in Electron took just two weeks, which is an impressive example of how well the Electron and Chromium teams are cooperating and making the web better for all of us.`), mdx(\"h3\", {\n    \"id\": \"hover-syncing\"\n  }, `Hover syncing`), mdx(\"p\", null, `I'm a little biased but I think Polypane's Hover syncing is one of its coolest features, even if it's one you might never notice because it feels so natural.`), mdx(\"p\", null, `In recent versions of Polypane it could stop working in certain situations. Fixing this took quite a bit of time, but I'm happy to say that it should now work again in all situations.`), mdx(\"h3\", {\n    \"id\": \"devtools-panel-resizing\"\n  }, `Devtools panel resizing`), mdx(\"p\", null, `In the previous release I optimized the way the devtools panel was initially created and I optimized that so far that in some cases I optimized it away and the devtools would not properly show up or when it showed up, it would not be resized along with the panel properly until a second initialisations. All of that is fixed now and the devtools panel shows up and resizes just as you expect.`), mdx(\"h3\", {\n    \"id\": \"crash-on-windows-on-arm\"\n  }, `Crash on Windows on ARM`), mdx(\"p\", null, `Polypane ships with support for ARM on windows but in version 24 it would crash on startup. This was caused by us trying to import ffmpeg but it not being available on Windows ARM yet. For now this means that the recording feature is not available on Windows ARM. As soon as ffmpeg is available on Windows ARM, we'll add it back in.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-241\"\n  }, `Get Polypane 24.1`), mdx(\"p\", null, `Polypane is available for Windows, Mac and Linux in 64 bit and ARM versions.`), mdx(\"p\", null, `Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Try it for free`), `.`), ` No credit card needed.`)), mdx(\"h2\", {\n    \"id\": \"polypane-2412-changelog\"\n  }, `Polypane 24.1.2 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improvements`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated list of known Google fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 136.0.7103.149`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` for `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/advisories/GHSA-x828-wp24-7h9m\"\n  }), `CVE-2025-5419`))), mdx(\"h2\", {\n    \"id\": \"polypane-2411-changelog\"\n  }, `Polypane 24.1.1 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Fix issue displaying nested `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@supports`), ` styling rules (Thanks John!)`)), mdx(\"h2\", {\n    \"id\": \"polypane-241-changelog\"\n  }, `Polypane 24.1 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Measure overlay: New measure tool to measure arbitrary parts of the page`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` XML/RSS Viewer (Thanks Evan!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Find elements now has a new option to inspect the element in the devtools (Thanks Nils!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Meta panel: New LinkedIn share design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Updated Chromium to 136.0.7103.93`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improvements`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Tabs: You can now double-click a tab to overwrite the title and color`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: We now hide internal Polypane elements in the elements panel to improve performance`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers: Showing and hiding rulers can now be done per tab`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Improved layout for charset, language row`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: improve performance when gathering data`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Split layout: pane dragger is now correctly centered`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` updated the list of Google fonts`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Full layout: Website no longer has rounded corners`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Devtools panel: Devtools did not correctly resize along with panel on first open`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Using The Pointer lock API would crash Polypane (Thanks Andrew!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Inspect in Devtools did not always open the panel properly (Thanks Tor!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Permission refresh bug is now solved for all permission types`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Rulers: Color picker now show correctly when editing the color`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel: Right-click and open in new tab works again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Hover style syncing randomly stopped working`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Video recording: fixed issue where part of video would be cut off`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Windows ARM: Fixed crash on startup`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":5,"tableOfContents":{"items":[{"url":"#new-measure-overlay","title":"New: Measure overlay"},{"url":"#new-xmlrss-viewer","title":"New: XML/RSS Viewer"},{"url":"#new-find-by-css-selector","title":"New: Find by CSS selector"},{"url":"#new-updated-linkedin-share-design","title":"New: Updated LinkedIn share design"},{"url":"#edit-tab-by-double-click","title":"Edit tab by double click"},{"url":"#notable-bug-fixes","title":"Notable bug fixes","items":[{"url":"#pointer-lock-api","title":"Pointer lock API"},{"url":"#hover-syncing","title":"Hover syncing"},{"url":"#devtools-panel-resizing","title":"Devtools panel resizing"},{"url":"#crash-on-windows-on-arm","title":"Crash on Windows on ARM"}]},{"url":"#get-polypane-241","title":"Get Polypane 24.1"},{"url":"#polypane-2412-changelog","title":"Polypane 24.1.2 Changelog"},{"url":"#polypane-2411-changelog","title":"Polypane 24.1.1 Changelog"},{"url":"#polypane-241-changelog","title":"Polypane 24.1 Changelog"}]},"excerpt":"A new measure overlay lets you drag out a rectangle on the page and measure arbitrary parts of the page and screenshot the selected area. The XML viewer lets…","frontmatter":{"title":"Polypane 24.1: New Measure tool, XML viewer and Find by CSS selector","cover":"/img/mail/icon.svg","date":"2025-05-19","updated":null},"fields":{"slug":"/blog/polypane-24-1-new-measure-tool-xml-viewer-and-find-by-css-selector/","date":"2025-05-18T22:00:00.000Z","ogFileName":"polypane-24-1-new-measure-tool-xml-viewer-and-find-by-css-selector"}}},"pageContext":{"slug":"/blog/polypane-24-1-new-measure-tool-xml-viewer-and-find-by-css-selector/"}},"staticQueryHashes":["4164364741","425175329"]}