Developer tools

Polypane comes with two sets of developers tools: the native Polypane developer tools and the Chromium developer tools.

The Polypane developer tools will work across panes and you can find more information about them on the following pages:

• Polypane elements panel, lets you edit style, content and attributes in all panes at the same time.
• Polypane Console lets you view console messages from all panes and send console commands to all panes at the same time.

Chromium developer tools

In Polypane, each panel has its own developer tools. You can access them by opening the side panel, going to the "Edit" tab and then to "devtools" and selecting a pane in the dropdown, or by clicking the icon above each pane or in the browser toolbar.

You can inspect in all panes with shift alt c, and the side panel will automatically open and switch to the right devtools.

You can also right click anywhere in a tab and select "Inspect element (in devtools)" to inspect the element under the cursor.

Lastly, right click the Inspect element icon in the header to switch it to always inspect elements in devtools. When this is active, the icon will show a small devtools icon alongside it.

If you prefer the devtools to be undocked, you can uncheck "Docked devtools" in the Edit menu.

Devtools extensions

You can install devtools extentions like the React or Vue.js DevTools. Learn about them here: Devtools Extensions.

Legacy mode

in Legacy mode all panes share a single Chromium devtools. Change the JavaScript context for the console by clicking the dropdown that says "top". In this dropdown you will see your URL once for each pane. Hover over one and you'll see the pane it applies to highlighted. When your pane is selected in this dropdown, the javascript context changes to the page.

Devtools extensions do not work in this mode.