search

timstuyckens / chromeextensions-knockoutjs

The source code for the chrome dev tools extension that allows you to easily debug knockout js apps.
MIT License
140 stars 50 forks source link

Feature request: navigate to event handler #11

Open L0g1k opened 11 years ago

L0g1k commented 11 years ago

Hi,

Great extension.

I had an idea to do with event handlers. It would be handy to navigate to the source of event handlers directly from your "Knockout context" panel.

There is two challenges though

1) Reliably identify the source url and line number for the function 2) Actually navigate there

Regarding 2), it's not in the extension apis but I noticed that the internal dev tools source links are actually just normal links with the line number appended to them (open the 'Event Listeners' panel to see what I mean). I wonder if that would work from user extensions.

Regarding 1) It's sort of a hack, but I suppose just finding the function literal, and calling toString on that, and then searching for that exact string inside all the sources would reliably find most functions.

What do you think?

timstuyckens commented 11 years ago

Great idea!

I will look into it. If you want to help :https://github.com/timstuyckens/chromeextensions-knockoutjs/wiki/Contribute

Just to be clear I included a screenshot

featurerequest

L0g1k commented 11 years ago

The 'Event Listeners' panel always bugged me slightly: the thing that actually attached the listener is rarely the piece of code that you want (like, it always just points to jQuery or Knockout). On the other hand, it would really be outside the scope of the DevTools to figure that out.

Anyway, yes I would love to help. I will experiment and see if it's possible to use the navigation links (I wish there was more API access to the code editor..), then post back here.

PS. Actually, looking at your screenshot, it occurred to me that if it's possible to navigate to functions at all, then it would make sense to let you navigate to any binding function; not just the event functions.

L0g1k commented 11 years ago

OK, so unless I'm missing something, it's not actually possible to navigate to the code editor.

I tried using setExpression, but there's no way you can it to write a link since it seems to only favour DOMNodes, functions, strings, etc.

Then I tried using setPage, and you can use links then however they don't behave in the same way as the other sidebar links

timstuyckens commented 11 years ago

I looked into the devtools source and found interesting stuff like DOMAgent.getEventListenersForNode(this.id, objectGroupId, callback); but did not found a way to access the DOMAgent or other devtools objects.