alpinejs-devtools: UI to surface Alpine.js eval errors
Alpine.js uses console.warn
in the following scenarios:
- ~~x-if/x-for on a non-
template
https://github.com/alpinejs/alpine/blob/ee019cbc66d2adb3e5126bf3822d9d701a40daf8/src/utils.js#L29~~ #141 - ~~
template
with more than 1 child node https://github.com/alpinejs/alpine/blob/ee019cbc66d2adb3e5126bf3822d9d701a40daf8/src/utils.js#L31~~ #141 - 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 Moved to a separate issue to have additional structural checks #141template
’s.
For 3. the console.warn
contains the element as well as the expression.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 28 (13 by maintainers)
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.
The 2nd one in is my favourite. The separator is nice, but I also like the last one with the different BG colour.
cool, I would say just to watch out for the
testid
’s otherwise tests will fail and also to hide tabs that don’t have any content for production builds (the same way we hid the settings modal #111)@ryangjchandler Can do 👍🏼
Unless anyone else is up for it.
I’m gonna vote for the footer version.
Subheader version will give use the opportunity to bring in a search UI maybe?
I guess they’re very similar either way (plus I’m sure we can move it around if we decide on one and end up not liking it)
😍 could try with the status bar (Alpine.js vX.X.X detected) between the header and the main panes?
I was happy to settle for text links in the header 😄
I like them all. Divider with different BG color looks nice.
Maybe put the settings icon all the way to the right so it stands out slightly more (does it, I’m not necessarily sure)?
We can always move it later too
I like it! And rip off anything 😃
Maybe we can add a theming setup to this project eventually as well.
Looking at both, right-aligned seems nicer. Maybe we could move those three icons to the right footer as well.
Not to put the cat amongst the pigeons 😉
Here’s my take:
* Don’t get me started on those sweeeet looking themes 👌🏼😍