Inspect hovered element in Chrome?
I am trying to view, through Chrome\'s developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I \"inspect element\", not
-
I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.
Kind of a weird way but it worked for me so I figured I would share it.
讨论(0) -
You would just need to force the tooltip to show as such
$('.myelement').tooltip('open');Now the tooltip will show regardless of hovering state.
Scroll down near the bottom of the DOM where you should see the markup.
Update see cneuro's comment for Bootstrap 3.
$('.myelement').tooltip('show');Update see Marko Grešak's answer for Chrome and apparently Safari as well,
$0can be used as a shortcut for the currently selected element. This appears to work in Safari as well.$($0).tooltip('show')讨论(0) -
Single window answer, with no coding
None of the other answers are quite right, or have enough detail, so here's my attempt.
- Open Chrome's DevTools using F12/Ctrl+Shift+I (Windows/Linux) or Command+Option+I (Mac).
- Select the Sources tab in the DevTools window.
- Using the mouse, hover over the element you want to inspect, to make the tooltip visible.
- Press F8 (Windows/Linux/Mac) to pause script execution. The main window will grey out, and a "Paused in debugger" popup will appear.
- In the DevTools window, select the Elements tab
- For Bootstrap tooltips, the tooltip will appear as the last
<div>in the<body>
讨论(0)
加载中...
- 热议问题