[Feature Request]: Add a console -tab

[Matsuuu]

While I'm are taking a peek at adding a "source" tab, it could be considered if a "Console" -tab could be used too.

What it would look like

In the tab panel, a tab next to the others, with "console" as the title

Opens up a console view, in which "this" references the element being inspected. The user could then

• Print variables

  this.items
  >> ["foo", "bar", "baz"]

• Call functions

  this.addItem("Bin");
  >> undefined

And other stuff.

How would this be implemented?

As we can't really just grab the chrome dev console, we'd need to write a small console of our own. It could appear as a textarea, which has syntax highlighting (as we are already getting JS highlighting with the sources tab, it should be quite easy).

The context of this would have to be set to match the component instance.

The code snippets would of course need to be sent to the content layer to be processed, and the result should be displayed in the devtools.

Implementation suggestions for the console:

• CodeMirror (used by Lit playgrounds)
• Monaco (Used by webcomponents.dev)
• [Lit Playgrounds]

[Matsuuu]

Implemented with Lit Playgrounds.

Things to do:

• [x] Handle results more effectively
• [x] Handle dark mode
• [x] Stress test
• [x] History