UI to surface Alpine.js eval errors

Alpine.js uses console.warn in the following scenarios:

1. ~~x-if/x-for on a non-template https://github.com/alpinejs/alpine/blob/ee019cbc66d2adb3e5126bf3822d9d701a40daf8/src/utils.js#L29~~ #141
2. ~~template with more than 1 child node https://github.com/alpinejs/alpine/blob/ee019cbc66d2adb3e5126bf3822d9d701a40daf8/src/utils.js#L31~~ #141
3. error during expression evaluation https://github.com/alpinejs/alpine/blob/5cc46c31b08e4b25821fb85fd0fad6903bc7e574/src/utils.js#L69

I believe some developers suppress console.warn, it would be nice to surface the relevant errors/warnings:

• in a “warnings” tab in the devtools
• highlight the offending components/elements (toggleable through settings)

For 1. and 2. we should probably re-scan the DOM and to figure out which are the offending template’s. Moved to a separate issue to have additional structural checks #141

For 3. the console.warn contains the element as well as the expression.

[stephenoldham]

I think in terms of the content hierarchy I prefer the footer. Also feels like there’s more space in that layout with less at the top.

@HugoDF As you said we can totally change it if we don’t vibe that layout in practise.

[ryangjchandler]

The 2nd one in is my favourite. The separator is nice, but I also like the last one with the different BG colour.