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.

Undocking the Chromium devtools

If you prefer the devtools to be undocked, you can uncheck "Docked devtools" in the global Edit menu (the one next to the File menu).

Reloading devtools

Sometimes the Chromium devtools lose their connection to your pane, which will show itself as the elements panel no longer showing the correct DOM structure.

When this happens, reloading the devtools reestablishes the connection. Click the reload button in the devtools toolbar to do this.

Devtools extensions

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