Developer tools

Being a browser for developers, of course the developer tools are easily reachable, either by clicking the button in the address bar, or by pressing F12 or shift cmd/ctrl i. Polypane contains the full set of Chromium developer tools.

Using shift cmd/ctrl c, or by right clicking an element, you can do "Inspect element"

Consider the Polypane element inspector

Instead of using the devtools element inspector, consider using the Polypane elements panel, which will let you edit style, content and attributes in all panes at the same time for a much nicer experience.

Console for a single pane

In Polypane the devtools work for all panes at the same time. What if you want to target a single pane in the console? You can change the javascript context 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 and isolated panes

When using isolated panes, the devtools button in the header will change to an "inspect element" icon and clicking it will turn inspect element on. You can then inspect all panes to select an element. Clicking the element will open the devtools for that pane, with the element selected in the "element" panel.

Each pane gets its own dedicated devtools and with it a dedicated devtools button ( )in the pane header. Clicking this will open the devtools or refocus it. When the devtools is already open, the icon will have a blue dot.

When any pane logs an error in their console, that pane's devtools will have a red dot.