Related
I have a webpage on which if a tab key is pressed when in the last textbox a side pane from the right slides(like a side menu).
In chrome development tools I can see it is an aside tag with classes control-sidebar control-sidebar-dark but setting DOM break points(subtree & attribute) on the aside tag is not capturing anything.
On looking into DOM it seems like it is not being manipulated at all(which I expected sliding in should be doing) as I do not see the color blink on HTML tags that chrome developer tool shows for the affected elements.
I was expecting the javascript to be handling the sliding in of the aside tag but how could it be determined in this scenario? Could this be due to CSS only animation or something if yes than how to debug that?
I also tried to record in the animation tab of developer tools but it also stays blank.
This is happening on a privileged section of the site so I m sorry for not being able to put code sample or URL.
PS: The template is some modified version of http://www.ampleadmin.wrappixel.com/ampleadmin-html/ampleadmin-rtl/index.html(the navigation panel on right) but it is getting recorded in dev tool animation panel while mine doesnt.
I found out the cause. There are anchor tags inside the panel which get focused on when the tab is pressed from last textbox. There was no animation,CSS or JS involved.
Anchor(A) tags are focus able by default and the panel dont slide in when they are removed.
I'm trying to inspect CSS properties from an input into a table cell. The input appears on click and disappears on lost focus, as when I try to inspect it.
How can I do it to don't lost focus while I move to another window (the inspector)?
In Chrome browser, open Developer Tools and select Elements tab, then
open the contextual menu of the parent node of the element you want to inspect, in the contextual menu click on Break on > Subtree modifications.
Afterwards you just need to click on the page and you'll get on the inspector without losing focus or losing the element you want to inspect.
In chrome devtools settings, there is an option named Emulate a focused page which is disabled by default. After enabling this option, if you click anywhere on the devtool window, it wouldn't cause loss of focus on any element in the DOM.
For Chrome version >= 86:
Open devtools and then press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu. Start typing Rendering in the Command Menu and select Show Rendering. There you can enable Emulate a focused page.
After that, just click on any element to focus, and then click anywhere on the devtool window. You would see that element doesn't lose the focus. So now you can easily inspect or debug.
For Chrome version < 86
Go to devtool settings -> preferences and under Global option, enable Emulate a focused page.
You can capture the disappearing element if you pause JavaScript execution without moving the mouse. You can do so with a keyboard shortcut or by triggering a debugger statement. This works for elements whose appearance is controlled by JavaScript, rather than CSS :hover (if CSS, see Dumba F.'s answer).
Keyboard shortcut
This approach works for pages which don't use JS to trigger special behavior on keypresses. These instructions are for Google Chrome, but can be adapted to other modern browsers:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another shortcut depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
debugger statement
To trigger a debugger statement which executes while the hovered element is visible, use setTimeout:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Cause the hover to open and wait for the script execution to be paused.
(Same as Nick Farina's answer)
If all else fails, type this in the Console:
setTimeout(() => { debugger; }, 5000)
Then you've got 5 seconds (or change the value to anything else) to make whatever you want to debug appear.
None of the other answers worked for me - the DOM tree kept getting modified (i.e. stuff I care about disappeared) right before the script paused.
Not sure if this works in your situation but normally (and in every case worth to mention in this regard as it is a great tool) in Chrome Developer Tools you can simulate element states and one is also :focus.
To do so go to the Elements tab in the Developer Tools and make sure you are in the Styles section on the right (this should be the default location when you start the Developer Tools). Now just beneth the Styles in the top right corner you have an icon Toggle Element State. When you click it you can simulate :active, :hover, :focus and :visited for the element you selected on the left in your code view.
In Chrome on the developer tools page for the page under test... click the options menu and open settings for preferences... under DevTools enable 'Emulate a focused page'
Then in the test page cause the elements to appear. This worked to keep my popup search results is focused to stay on the screen so I could work with it.
Not a real solution, but it usually works (:
Focus the element
Right click for context menu
Move down to developer tools
I had a very difficult situation and no answer was working from here (I didn't verify the answers changing the container, which is the body for me, or the original event, because I don't know that). I finally found a workaround by breaking via the Control Event Listener Breakpoints in Chrome Inspector. Maybe that is also a cross browser way of breaking for complicated situations where even F8 or right clicking mouse hide the popup again:
Click right of element in chrome devtools ;-)
Paste the following Javascript in the browser developer console:
// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.
var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);
I have a quicker fix since I'm not very good with using tools, here's what i do.
event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();
If you open Chrome DevTools and then trigger the element inspector using keyboard shortcuts, it should solve the problem.
Mac: Cmd+Opt+J and then Cmd+Opt+C
Windows: Ctrl+Shift+J and then Ctrl+Shift+C
[
I added tabindex="0" to add the ability for users to tab to this div and use the keyboard to interact with it. Upon click or hitting enter/space when it's active, a popup div is presented. The focus style it applies to the div upon hitting tab is fine, but I noticed when users click on the div to activate it, the focus style is applied to it at that time as well. If they hold the mouse down the focus style is applied to it.
How can I only provide a visual focus for this div when the user tabbed to it, but don't show the focus when the user clicked on it?
I am currently removing focus via .blur() when it's activated but there is still a flash of this focus style and it's always visible while the user is holding the mouse down.
A similar interface that exhibits the desired behavior is the Pages app on iCloud.com. You can tab to focus the different icons in the toolbar, then when you tab to your name and hit return/space, a popup appears and the focus on your name is removed. At that point the name text color changes to a darker gray. If you clicked on your name instead of using the keyboard, you never see the focus that is applied to your name, you only see the text color change when the popup is presented.
For focusable elements, you should always use tabindex="0" (See "Keyboard Navigation Between Components (The Tab Sequence)") so that the focus happens in the correct DOM order - otherwise the tabindex itself can lead to additional usability/accessibility problems.
If you want it to be focusable, then you definitely want the focus outline to appear when the user clicks it too because click events can be triggered by assistive technology that acts like a keyboard and you want sighted users to be able to see where they are at all times.
One solution is to use outline: 0 for the :focus and :active pseudo-classes and then use your own background images to present the different looks you want.
A second solution, which should only be used in the case of a popup that does not have a visible close button, but is dismissed by clicking outside of the popup or by pressing a keyboard command, is to detect the use of the mouse and then blur the element so as to remove the focus outline.
A custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
:focus-visible is what you are looking for
I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.
Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.
I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar, which pops up below on hover of its parent item.
The popup (or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.
However, as soon as I move my mouse away from the menu, it's gone; thus I can't select different elements in the inspection pane, and see which area is highlighted at the same time.
Is there a way around this, without changing the menu, so that it stays 'popped up' once activated?
If the hover element is triggered by JS (if triggered by CSS :hover, see gmo's answer), you can inspect it if you pause script execution. This is a much simpler way of freezing the DOM than the other answers suggest. You can pause script execution without losing the hover element as follows:
1. Via a keyboard shortcut
Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
2. Via a delayed debugger statement
Some web pages attach keydown / keypress / keyup event listeners which interfere with the shortcut above. In those cases, you can pause script execution by triggering a debugger statement while the hover is open:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Trigger the hover and wait for the debugger statement to execute.
If the hover effect is given with CSS then yes, I normally use two options to get this:
One, to see the hover effect when the mouse leave the hover area:
Open the inspector in docked window and increase the width until reach your HTML element, then right click and the popup menu must be over the inspector zone... then when you move the mouse over the inspector view, the hover effect keep activated in the document.
Two, to keep the hover effect even if the mouse is not over the HTML element, open the inspector, go to Styles TAB and click in the upper right icon that says Toggle Element State...(dotted rectangle with an arrow) There you can manually activate the Hover Event (among others) with the checkbox provided.
If it's not clear at all, let me know and I can add a few screenshots.
Edited: screenshot added.
And finally and as I say at the begining, I only be able to do this if the hover is set with CSS:HOVER... when you control the hover state with jQuery.onMouseOver for example, only works (sometimes), the method One.
Hope it helps.
What worked for me is selecting the specific a tag I wanted to inspect and configure it to break on attribute modification:
After doing the above, I would again normally select that a tag then the dropdown will automatically stay as-is even when I mouseover to other places like Inspect Element, etc.
You can just refresh the browser when doing inspecting the menu dropdown elements to go back to normal state.
Hope this helps. :)
You can also do this in the javascript console:
$('#foo').trigger('mouseover');
An that will "freeze" the element in the "hover" state.
Here's how I do it with no CSS changes or JS pausing in Chrome (I am on a Mac and do not have a PC in front of me if you are running on Win):
have your developer console open.
do not enable the hover inspection tool yet, but instead open up your desired sub menu by moving your mouse over it.
hit Command+Shift+C (Mac) or Ctrl+Shift+C (Win/Linux)
now the hover inspection tool will apply to the elements you have opened in your sub-nav.
Open Inspect element
Now go to elements now on right side and select hover
It will show all hover effects
Not sure if it was present in previous browser revisions, but I just found out this extremely simple method.
Open the inspector in chrome or Firefox, right click on the element you are interested in, and select the appropriate option (in this case: hover).
This will trigger the associated CSS.
Screenshots from Firefox 55 and chromium 61.
I needed to do this, but the element I was trying to inspect was added and removed dynamically based on hover state of another element. My solution is similar to this one, but that didn't quite work for me.
So here's what I did:
Add simple script to enter debugger mode upon mouseover of the element that triggers the hover event you're concerned about.
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
debugger;
});
Then, with the dev console open in Chrome, hover over your element, and you will enter debugger mode. Navigate over to the sources section of the dev tools, and click the "Resume script execution" button (the blue play-like button below).
Once you do that, your DOM will be paused in the hover state, and you can use the element inspector to inspect all the elements as they exist in that state.
I found a very simple way to do this if for some reason you have problems with script pausing:
Open Dev Tools on "inspect"-tab.Hover to make the pop-up appear.Right-click on the desired element in your pop-up and press 'Q' (in Firefox) to inspect that element.Use keyboard to navigate: Arrow Up/Down: Move between elementsArrow Left/Right: Collapse/ExpandTab/Shift+Tab: Move between inspector and CSS rules and inside CSS RulesEnter: Edit CSS Rule
Excellent stuff!
Thank you to gmo for that advice. I did not know about those attribute settings massively helpful.
As a small revision to the wording I would explain that process as follows:
Right Click on the element you would like to style
Open 'Inspect' tool
On right hand side, navigate to the small Styles tab
Found above CSS stylesheet contents
Select the .hov option - This will give you all the settings
available for the selected HTML element
Click and Change all options to be inactive
Now Select the state that you would like to tweak - On activation of any of these, your Stylesheet will jump you directly to those settings:
Styles - Tweaking Filters - Interactive elements
This information was a lifesaver for me, cannot believe I have just heard about it!
Change the CSS so that the property which hides the menu isn't applied while you work on it is what I do.
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", nothing shows for the tooltip in the html. I know I can set the Style to :hover, but I still can't see the html or css of the tooltip.
Any ideas?
F8 will pause debugging.
On Mac, you may need to have the 'Sources' tab of the developer tools open.
Mouse over the tooltip, and press F8 while it is displayed.
You can now use the inspector to look at the CSS.
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.
This solution works without any extra code.
Hit command-option-j to open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.
Then, in the Chrome window, hover over the element that triggers the popover, hit command-` however many times you need to focus on the console, then type debugger. That'll freeze the page, then you can inspect the element in the Elements tab.
Click f12 go to the console tab and add the following:
setTimeout(()=> {debugger},5000)
This will give you 5 seconds to do whatever you want and it will break at 5 seconds. Then you can inspect the target element
(ex. hover the element and wait 5 seconds then inspect..)
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, $0 can be used as a shortcut for the currently selected element. This appears to work in Safari as well.
$($0).tooltip('show')
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>
For me, the accepted answer didn't work: clicking in DevTools immediately closed the ToolTip.
However, I found https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution which helped me:
In the console:, Run:
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});
Highlight element with inspector
Hit F12
You can now inspect the element, with JavaScript paused so the DOM won't change.
it is so simple to edit these tooltips.
Step 1: Inspect the element that has the tooltip. Make sure it is highlighted with blue in devtools.
Step 2: right-click on the element (in devtools part) and select: attribute modifications, under Break on
Step 3: Hover over the inspected element and a gray overlay will appear over the site with a small text: Paused in debugger
at the top of your screen
Step 4: Click on the blue arrow until the hover state is selected.
Step 5: Inspect and edit the tooltip
No code solution for JS activated tooltips:
With Chrome's devtools inspect the containing / parent element of the tooltip. In the "elements" tab, right click on that container DOM element then choose "break on" > "subtree modifications". The next time you hover over the part of the DOM the tooltip is housed in, the JS code will be paused allowing you to inspect the contents of the tooltip.
Follow these steps
Open Inspect window in chrome.
Place the mouse over the tooltip.
Press F8
JS execution will be paused and then you can inspect the tooltip.
Press F8 again to start execution and F10 to debug.
Here is how I did it on Mac:
Hover over the element that has a tooltip with chrome devtools opened.
Wait for the tooltip to appear.
Open devtools command palette with a keyboard shortcut. Cmd+Shift+P worked for me.
Type in Disable JavaScript and press Enter
This will prevent from fading all the tooltips that utilize JavaScript.
Hover over the element, press F8 for little longer, it will pause script execution.
Here’s a simple solution: If you have dynamic tooltips, you can make them “persistent” by (temporarily) changing the trigger event to click. This will have the effect that the tooltip only disappears on a click-out:
$('body').tooltip({
selector: "[data-toggle='tooltip']",
trigger: "click"
});
This way, it can be easily inspected with FF’s or Chrome’s debugging tools.
1)Open the Inspect window by clicking F12
2)Go to source tab(next to console)
3)Now hover on element to be inspected and keep your mouse over there.
4)Using keyboard(Tab or shift+tab) to move the control to pause button or F8Refer the image
5)When keyboard focus is on Play button. Hit enter. Your hover element will be freezed you can do anything now
just hit one line script in console and press any key to enter in debug mode.
window.onkeydown = () => { debugger }
The dev tools provides a way to inspect a hovered element like a tooltip.
1 - Open the dev tools using F12.
2 - Select "Elements" tab.
3 - Select the parent element that contains the tooltip.
4 - Click on "..." (on the line of the parent element) and after select "Break on"/"subtree modifications" (see image below)
5 - Finally go back to application and make the Tooltip shows up. It should block the execution after the Tooltip gets visible
Hope it can be useful for someone!
appear the hovered item by over mouse
windows --> Ctrl + shift + c || Mac --> Command + Option + C
I had problems with this so I went to the documentation and inspected the tooltip that is already rendered on the page. That helped me see the dom structure of the tooltip and edit it accordingly.
In Chome on Linux this can be achieved for JS generated tooltips such as those for references on WikiPedia by doing the following:
As stated above, open the dev tools using F12. Open them in another window.
Highlight the tooltip and click Ctrl-Shift-C (The HTML Inspector). As you move over the tip, the dev window will show the appropriate section.
If you need to keep the tip open when you mouse off it, to be able to inspect it in the other window more thoroughly, then right click on the tooltip and leave the context menu up, and click on the the dev tools window. In this scenario it leaves the tip up in the wikipedia window.
To a degree it also works with bootstrap tips.
For some reason the answers provided here weren't working for me on Windows. I was able to inspect the tooltip by opening the dev tools, then hovering over the element that brings up the tooltip, then right clicking on that element (not the tooltip). Then, move the cursor over into the inspector panel and scroll down to the bottom. The tooltip element should still be there.
Another Solution I found for this problem. Through Mobile or Tablet view in Chrome
press Crt + Shift + M in Chrome Dev tools for Mobile view in Chrome.
Click(Tap) on ToolTip div and you can inspect it with Right Click on tooltip
Hit command-option-j to open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.
Then, in the Chrome window, hover over the element that triggers the popover, hit command- however many times you need to focus on the console, then type debugger. That'll freeze the page; then you can inspect the element in the Elements tab.
I found a good way I was struggling with this :
• Open Elements Tab
• Inspect an element on the page , should be close to the element that you are trying to inspect
• Hover over the tooltip
• While the dev/Elements tab is open Hit Ctrl F to move the focus to Text area in element tab where it Says Find by string , selector , or Xpath
• use the keyboard key to navigate up/down the elements till you will get to the elements that you are looking for , dont touch your mouse
Land in this post for answers and find eventually a way to do it. Inspect the parent element of tooltip and set break on subtree change and hover your mouse on element and click F8 till the tooltip appear. You can have your tooltip and check the styling.
some tooltips disappeared when we open the inspect part on hover mode, sometimes they don't disappear when change responsive tab (active or inactive button).
then you can right click and get inspect from it.so easily.
Worth noting that toggling the :hover state from within the dev tools only has an impact if the hint text is enabled via CSS :hover rules in the first place. The toggle only applies the hover state to the element for rendering purposes, but does not trigger a corresponding JavaScript mouseover event.
Many frameworks such as AngularJS dynamically attach tooltip HTML to the bottom of the document body via JavaScript when a target element is hovered, so any amount of hovering and inspecting the target element won't help.
#joeyyang's answer worked very well for me in this scenario.
One of the easiest ways I found is:
Open Chrome dev tools on the side
Hover over element
Right-click
Click on dev tools
Now you can inspect and change styles