Console

The Polypane console, available in the Edit panel, is a single console for all visible panes. With it you can read out all console messages and send console commands to all panes at once.

Top bar

In the top bar you can click the left-most icon to clear the current console, add a filter (string-based) or limit display to a certain type of log message (info, warnings or errors). Lastly, you can set if you want to clear the console on page refresh or to preserve the log.

Console messages

Console messages from all panes are automatically collected in the Polypane console and deduplicated so you only see each unique console message once, even if it is sent in all panes at the same time. A console message will automaticall show the location it was sent from and will give different icons and colors for logs, warnings and errors.

Console messages are automatically deduplicated. You can see which pane(s) sent a message, and how many times the console message was called in the lower right of each message where we show a list of circles. A filled circle means that the message was sent in that pane. Hover over a circle to see the name of the pane. When a console message is called more than once, an additional number is shown in the circle.

Polypane currently supports console.log, console.warning, console.error, console.dir, console.table, console.info and console.debug.

Objects and HTML elements

Objects are automatically resolved in the console and are pretty printed so they have syntax highlighting and can be collaped and inspected, and individual items can easily be copied. Objects are expanded up to 2 levels deep.

HTML elements are displayed with syntax highlighting and hovering over them will highlight them in all panes. Click them to switch to the element panel.

Caveats

The Polypane console does not yet resolve string replacement or console message styling. HTML elements in objects and arrays are not clickable at the moment. Certain console commands, like group, timeStart and assert are not available yet. If you need any of this, let us know.

Console commands

You can use the Polypane console to send console commands to all panes at once. Polypane automatically applies syntax highlighting and supports multi-line commands. Previous commands are remembered and you can cycle through them with arrow up and down. Return statements are collated where possible, so the return of a function that returns the same value in all panes is only shown once.

Available commands

Like the Chromium devtools, there are specific commands you can use in the Polypane console:

clear()

Will clear the current console.

$()

Shorthand for document.querySelector().

$$()

Shorthand for document.querySelectorAll().

$x()

Shorthand for selecting elements using XPATH.

$_

Shorthand for the result of the previous command.

$0, $1, $2, $3 and $4

The last 4 selected element in the Elements panel, with $0 being the most recently selected element. Whenever you select a new element, all elements are moved a spot (so $0 becomes $1 and so on)

Is your question not answered?
Ask via Twitter, Slack or our contact form

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing