search

charlespockert / aurelia-debugger

Visual debug tool for Aurelia
MIT License
5 stars 2 forks source link

Failing on page load #2

Open AStoker opened 8 years ago

AStoker commented 8 years ago

On page load I'm getting an error in the function elementHasNamedParent in the dom-tracker.js file. Element is not defined, and walking up the tree it looks like the _createClass getter is setting the element variable being passed down to be null (due the the property view.firstchild.parentElement being null. It appears that it's looping through DOM elements, and it's hit a comment element <!--view--> that aurelia automatically generates. Not sure if that is the actual problem, but that's what I think I'm seeing going on here.

AStoker commented 8 years ago

More info. It seems to be happening on a custom element. I have a replaceable part in the custom element, and one of my uses (the one that's breaking it I think) is to make the replaceable part empty...

However, after trying to fill in those empty replaceable parts, it's still a no go.

charlespockert commented 8 years ago

@AStoker is this on latest Aurelia framework?

Any chance of a repro too? I tested on my application, maybe you have got a use pattern that I've not come across yet that needs some edge case handling

AStoker commented 8 years ago

v0.17.0, should be.

charlespockert commented 8 years ago

Yep, sounds good - ok if you can get me a minimal repro that would be useful

It sounds like for some reason the viewslot's anchor is in a fragment and therefore has no parent

AStoker commented 8 years ago

Still need to get you a repro, sorry. But here is the call stack for the failure: screen shot 2015-11-12 at 11 16 08 am

AStoker commented 8 years ago

Fun fact... I'm having a hard time reproducing the issue in Safari, but it always happens in Chrome. And it happens when it gets to a comment that aurelia automatically posts. Could be something with how Babel transpiles for different browsers?

AStoker commented 8 years ago

Let me retract that... Safari isn't throwing the error in the console, but I still don't see the debugger.

AStoker commented 8 years ago

https://github.com/AStoker/broken-aurelia-debugger. Basic repro. In order for it to fail, make sure in the app.html line 13 has a space between the custom element. 

  <tab-nav navigation.bind="router.navigation"> </tab-nav>

For it to work, remove the space.

  <tab-nav navigation.bind="router.navigation"></tab-nav>
charlespockert commented 8 years ago

Awesome, thanks for that I'll have a look in a bit and hopefully it's something trivial.

AStoker commented 8 years ago

No problem. Here's for hoping! Could very well be something trivial I'm doing wrong...

charlespockert commented 8 years ago

@astoker out of curiosity, are you finding this plugin useful? It was born from a comment Patrick Walters made on gitter...

AStoker commented 8 years ago

It has been useful. I'm coming from a KnockoutJS background, and we always had the ability to get the data context for any element by typing in the console ko.dataFor($0) where $0 is the selected element in your debugging tools. I don't have that with aurelia, so this tool gives me the ability to see the contexts. I would be satisfied with just a command line tool, but this seems to be the only thing out there for the moment.

charlespockert commented 8 years ago

@AStoker did you ever get to the bottom of this issue yourself? Sorry I've not really looked myself yet, loads going on in my neck of the woods so I was struggling...

AStoker commented 8 years ago

I haven't either, been busy with moving buildings and conferences coming up. I'm not roadblocked by this, thankfully. An idea for this tool though, is to make it more based in the console. That way you can debug a bit easier without having to deal with something floating in the view. Perhaps this could be an option, or a different branch?