feat: integrate chii into playground

[trueadm]

Swaps out our custom console implementation for the actual Chrome dev tools using Chii.

Closes #523

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
svelte-dev	✅ Ready (Inspect)	Visit Preview	Dec 17, 2024 4:31am

[Rich-Harris]

Should I be able to edit elements and styles?

[Rich-Harris]

Noticed that the errors we emit during $inspect.trace() get their names blanked out somehow, which feels like a little bit of a regression (from this).

Combined with the fact that this results in a lot of extra stuff being downloaded, and that it only partially works in Firefox, and that several of the tabs don't really do anything except clutter the UI, I'm forced to wonder whether this is a good change, even though I was enthusiastic about it. Thoughts?

[leonidaz]

I think you meant this link vs the localhost link get their names blanked out somehow

Overall, I typically go straight to the actual browser's Dev Tools, mostly because the logging can't print objects. It would be nice to have a console that can print everything by default, especially if it doesn't take away the space from the playground panes like the actual devtools. I think it probably makes the playground seem more "professional" and cool especially for the newer folks, so I think it would definitely help svelte's adoption as long as it's not buggy 😄

More specifically.

• if$inspect.trace() can't be fixed to show the whole output (it's there but somehow not showing up until expanded) it would definitely be a bummer.
  • The vertical yellowish lines to visually distinguish nesting is also missing / not visible.
  • The labels, CreatedAtError, TracedAtError, etc. are missing / not visible.
• Just having a proper console is already a big win, IMO.
• It would be definitely nice if the console was the default tab, at least initially (if there is some kind remember my choices functionality)
• The devtools pane keeps collapsing to the button on refresh and now also on the svelte.dev site. I could've sworn that it used to remember its height, maybe I'm dreaming.
• If the console works in Firefox, it would still be a big win just having the console. I tried using on 133.0.3 on a mac and it seemed to be fine, everything seemed to work the same as in Chrome.
• As far as its size, hard to say, it loads pretty quickly for me and it's not something I immediately go to, so it can be loaded lazily. I typically start looking at the code and the preview before paying attention to the console.

[trueadm]

We decided that there were too many drawbacks to using Chii in the playground.