Hacker Newsnew | comments | show | ask | jobs | submit login

Hey Paul. First off, thanks for reaching out to the community like this.

A few things:

Visualized event bindings. Would be awesome to have a visual indicator of event bindings right on the page. Color-coded bounding boxes drawn around elements with a label denoting the event type. Clicking on that box (or label in the case of an element with multiple bindings or nested elements with bindings) would direct you to the code that does the binding.

An aggregate repaint view. Chrome lets me view repaints but it clears after every one. If I have a method that is doing a lot of dom manipulation, I have to step through the code to view all of the repaints. Would be great to have the repaint bounding boxes drawn with a low opacity background so that I could see (and clear out) an aggregate view (with highly redrawn areas having higher opacity due to there being multiple layers).

An intelligent debugger that would automatically step over certain files (selectable per debugging session). I occasionally want to step into jQuery but less often than not. I know I can step over those methods but would be great if I could just keep stepping in without accidentally stepping into something when I don't want to.

I'll edit this as I think of more.

EDIT:

Breaking on navigation or on a particular request in order to manipulate headers. Breaking on the response from those requests for the same reason (plus manipulating the body).

The timeline and profiles sections in Chrome are under-utilized but infinitely useful. Anything close to those would be much appreciated.

Throw warnings for potentially orphaned event listeners. Granted, the number one offender recently introduced methods to address this (backbone's #stopListening) but it's still a easy mistake to make. This might bleed into too much hand-holding and open up a can of worms but just a thought.

Throw warnings for overloaded event listeners that fire a lot. Like the last suggestion, this may be heading in a direction you don't want to go in (educating the developer by means of the dev console) but, all too often, I find pages that overload, e.g., the scroll event. If there was some way to inform the developer of this potential problem, I think the web at large would greatly benefit. Perhaps this and the last suggestion would better reside in an auditing section?




> Visualized event bindings. Would be awesome to have a visual indicator of event bindings right on the page. Color-coded bounding boxes drawn around elements with a label denoting the event type.

A bit of shameless self promotion - I wrote a bookmarklet to do that asking talking to a couple of Mozilla folks a few years back: http://sprymedia.co.uk/article/Visual+Event+2 . Source is available on GitHub: https://github.com/DataTables/VisualEvent .

The biggest problem I faced with this is that there is no DOM method to get a list of the events that have been bound to a node. Possibly a Firefox plug-in would have the ability to access that information, but it can't be done through the DOM at the moment, so I had to resort to parsing the information available from the libraries, each needing its own integration file...

-----


Thanks for the awesome tool! I've found it handy on more than one occasion to trace jQuery/vanilla JS listeners. Any plans for Dojo support?

-----


Hadn't been planning it, but it sounds like a very sensible idea! Added an issue in GitHub which you can follow if you like: https://github.com/DataTables/VisualEvent/issues/26

-----


Thanks so much for the plugin -- I use it frequently. It's the one bookmarklet I actually use enough to keep on my bookmarks bar.

-----


> Visualized event bindings

Yeah, we've been thinking a lot about that lately. Not a priority though (yet?).

> An aggregate repaint view

I filed a platform bug just about that today :) I think it can be done soon.

> An intelligent debugger that would automatically step over certain files

That's interesting. I never thought about this. I like that.

-----


> > An intelligent debugger that would automatically step over certain files

> That's interesting. I never thought about this. I like that.

You haven't been reading your mail, paul!

We discussed this briefly in https://groups.google.com/d/topic/mozilla.dev.developer-tool... and are planning to work it in to our schedule.

-----


Regarding repaint view, go to about:config, nglayout.debug.paint_flashing to true, and you can catch some repaint problem. Agreed, it is not the most discoverable feature. afaik, we don't have a tool for overdrawing. Hopefully this will change.

-----


Last time I used the Firequery plugin for Firebug (way back in FF3), it would show the elements on the page that were also represented as jQuery objects... that plugin might be a jumping-off point for how to show visualized event bindings

-----




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: