Debugging bootstrap tooltip / mouseover

[Jeff Griffiths]

tl;dr it's painful to inspect things like bootstrap's tooltip [1],
mainly because it triggers on mouseover instead of :hover.

You can actually do it though:

In Firefox:

1. break on mouseover in the debugger
2. trigger the mouseover
3. step forward in the debugger until the mouseover actually appears
4. switch to the inspector
5. in the markup view, find the tooltip markup that has been inserted
into the DOM

Hovering over the node in the markup view will allow you to inspect the
css rules applied to the tooltip content, but you can't use the picker,
probably because the debugger is paused.

In Chrome:

1. there is no mouseover event in 'Event Listeners' list ( just 'click'
in my example ) so instead you right-click on the element's parent and
select 'Break on subtree modification'
2. trigger the mouseover. step forward in the debugger until the
mouseover actually appears
4. switch to the elements pane
5. in the markup view, find the tooltip markup that has been inserted
into the DOM

In chrome too, the picker does not work well when the debugger is broken
- neither tool is really great at this. The tedious parts are stepping
over until the action happens and most importantly fiddling in the
markup view to find the element instead of being able to use the picker
to visually pick it.

I can sort-of see ways to work around this somehow - by knowing which
code gets triggered by the event ( tagStack? ), or by the framework
telling us, or by the framework maybe exposing ways to 'fix' the result
of the mouseover action in place. Curious to know what other people
think. As a developer I'd love to just click something or run some code
that permanently sticks the tooltip open so I can inspect it normally
without getting the debugger involved.

Jeff

[1] http://getbootstrap.com/javascript/#tooltips

[Jeremy McNeil]

I found a much easier way to trigger javascript events using the
inspector/console with code pulled from [1].
Using the bootstrap tooltip example page from your email [2] I selected the
button in the inspector and then ran code in the console [3].

However I would love to have the ability to fire javascript events built
into the inspector similar to how it is currently possible to trigger css
states.


[1] https://developer.mozilla.org/samples/domref/dispatchEvent.html
[2] http://getbootstrap.com/javascript/#tooltips
[3] var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseover", true, true, window,0, 0, 0, 0, 0, false,
false, false, false, 0, null);
$0.dispatchEvent(evt);


On Wed, Aug 20, 2014 at 7:58 PM, Jeff Griffiths <jgrif...@mozilla.com>
wrote:

> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools
>

[Hallvord R. M. Steen]

> However I would love to have the ability to fire javascript events built
> into the inspector similar to how it is currently possible to trigger css
> states.

Something like right-click element in inspector, "Fire event" > list of [mousedown, mouseup, click, touch] etc..?
Sounds like an interesting feature!
-Hallvord

[Patrick Brosset]

https://bugzilla.mozilla.org/show_bug.cgi?id=1036722 is specifically
about being able to simulate events from the devtools.

[Brian Grinstead]

This bug is also relevant:
https://bugzilla.mozilla.org/show_bug.cgi?id=962491. There is a
discussion there about making the inspector work better when the
debugger is paused - see Comment 11. I'm not sure how possible that
will be, but having a solution that works for any case (like, press F8
once things are in the state you want them to be) seems better than
handling a specific event or sequence of events.

If we had some extra hooks that could make the tools work better with
frameworks that would be a nice bonus. I like the idea of being able to
press a button to show a tooltip permanently, but it seems like that
would fit within an extension, since each sequence of actions is going
to be different depending on the framework / widget.

Brian

[jc...@pinsightmedia.com]

Thank you, that worked great in Chrome!

1. Select the element that fires on mouse enter
2. Run your code in console:

[lon...@sendo.vn]

Thanks so much, it's work !!! Thank again :)