Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?
Basically I am looking for something that would either:
Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.
Thanks.
HTML Tooltip (Firebug)
Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.
HTML Tooltip (Firefox developer tools)
Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element
This feature can also be accessed from the popup menu in the HTML view.
If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:
JQuery Tooltip
Open the console and enter jQuery('.css-class').trigger('mouseover')
Regular Javascript Tooltip
Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.
You can also start the debugger on a timer. Enter this command into the console:
setTimeout(function(){ debugger; }, 10000);
This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.
I think you can also do this :
Choose Firebugs Inspect mode
Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.
Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console
Worked for me anyway!
For Jquery UI tooltip I finally set up a long delay for the hiding of the element so I have time to inspect it before it's deleted. For example, I used this to inspect the tooltip:
$( document ).tooltip({ hide: {duration: 100000 } });
instead of:
$( document ).tooltip();
You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.
Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).
Go here for a list of all Firebug keyboard shortcuts.
For the bootstrap tooltip:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.
A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.
For Javascript events such as Mouse over.
Open Firebug/Inspect an element.
Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
Put your mouse over the element and don't move it from this point forward.
Use your ↑/↓ arrow keys to manoeuvre in Firebug.
Use your ←/→ arrow keys to expand/contract code with + or -.
Double tap Tab to get to the CSS pane.
Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
Hold Shift and double tap Tab to get back to the HTML pane.
I'd like to chip in with my preferred method. Putting this little snippet in your console allows you to start the debugger at any time with a simple keypress on your keyboard (F8 is used in this example)
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
You can also use a keycode if you prefer:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.
Open console:
If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.
$('your selector')
Write above javascript and Press enter. you will have list of elements.
Now e.g. If library added event on mouseenter enter following script:
$('your selector').mouseenter()
Press enter.
This way you can simulate mouse movement events without actual mouse. and can use actual mouse pointer to investigate thing in debugger tool.
This is an extremely old question by now, but I've found an answer that directly answers the "freeze the browser" portion of the question.
Control + Alt + B. This is "break on mutate". Which means, when you are hovering over an element with firebug engaged (Control + Shift + C), that when the HTML attributes would change, instead they hit a breakpoint, allowing you to easily navigate around to examine for paths, etc.
Related
I have an element that would listen to pointerover event. When it is hovered by pointer like mouse, it will show a tooltip.
I am trying to debug this, but when move my mouse away from that element and tried to click the DOM tree in DevTool, the pointerout event would fire and clean up the result, which makes debugging extremely hard. Is it possible to keep the state of a specific event, when I use the DevTool?
Use the "Emulate a focused page" option in DevTools. Here is how
Focus on the element
In DevTools, open the Rendering tab via 3-dot > More options > Rendering, then check and uncheck "Emulate a focused page".
We explain that in official video and docs:
video: https://youtu.be/2baY3JpCxpo?t=158
link: https://developer.chrome.com/docs/devtools/rendering/apply-effects/#emulate-a-focused-page
I originally had code that set the focus to the first widget in a dialog, in the onInit method. But there were problems with it: if I pressed TAB, indeed focus moved to next control (wxTextCtrl), which got the blue 'focus' color, but the 'focus' color/highlight was not removed from previous focus widget. So now it looked like both first and second control had focus at the same time...
When cycling manually (by pressing TAB) full circle (till last control and then wrap around to the first), suddenly all worked well. That is, when moving focus from first control to next one, the first visually lost focus (blue color was removed) as it should. From now on, only one item had the focus color/highlight.
So instead of setting focus on the first control, I tried a different approach: I set the focus to the last control in the dialog, which is always the OK button. Next, I want to emulate programmatically that a TAB is pressed and received by the dialog. So I wrote this (inside Dialog::onInit):
m_buttonOK->SetFocus();
wxKeyEvent key;
key.SetEventObject(this);
key.SetEventType(wxEVT_CHAR);
key.m_keyCode=WXK_TAB;
ProcessWindowEvent(key);
Now the focus indeed moves away from the OK button, but it does not wrap around to the first control.
Only when I manually press TAB after the dialog opened, the first item gets focus.
Question: why does this wrapping around to set focus on first widget not work with the code shown above?
First of all, your initial problem is almost certainly related to not calling event.Skip() in one of your event handlers, see the note in wxFocusEvent documentation.
Second, you can't send wx events to the native windows, they don't know anything about it. In this particular case you can use wxWindow::Navigate() to do what you want, but generally speaking what you're doing simple can't, and won't, work reliably.
To be clear, this is not highlighting in the sense of finding an element from the DOM Inspector to the page, or vice versa. It's behavior I haven't seen before, but then I usually use Chrome.
I'm debugging a textarea that won't accept clicks, or allow selection, or basically gain focus in any way. I noticed that clicking on the textarea, in the page, caused several DOM nodes in the Inspector to highlight, and then fade away after a second. None of the nodes that highlighted were the textarea; they were parents of the textarea, including the body, but not necessarily all of the parents in between the textarea and the body. There was also a sibling of one of the parents highlighted, as well.
It's one of those things where Firefox is trying to tell me something, but I don't know what. I feel like the answer to my original problem is probably contained in this highlight, if only I knew what it meant.
In the attached screenshot, you can see the textarea highlighted in blue, being the selected element, and the rather grossly-colored highlights on a few other elements; this was right after I clicked on the textarea (in the page, like I was trying to enter some text in it; not in the inspector)
What does it mean?
When the nodes in the markup view (the thing in your screenshot) highlights, it means that these nodes have gone through mutations. These can be of the following manner:
Attribute value change on the node
Addition/Removal of child nodes
Now, what you are actually looking a way to hover the textbox and get the markup view to select your textbox, right ?
You can do that in two ways:
Hit the shortcut Ctrl + Shift + C. You will see an overlay on the page which follows your mouse. Head over to text box and click it.
Click the "Pick an element from the page" button on top left corner of the developer tools and the same node-selector will appear.
For more and deep information : visit the MDN page : https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
I'm trying to figure a lot of hover/mouseover related CSS/Javascript on a webpage.
To do so, I use Firefox+firebug inspectors.
The problem, is that whenever I move the mouse out of an element I'm inspecting, all the "hover reactions" are lost.
Is there a way, to fix the mouse position firefox sees so I can freely use the mouse withouth concern about weiter it actually hovers some elements or not?
Well, it is not fixing the mouse position, but when you right-click on an element in the Inspector in the regular Developer Tools, you're offered a :hover menu item (along some other things). Selecting that will put the element into permanent :hover state. That at least should cover the CSS-part of your question. I'm sure Firebug offers something similar.
For the JS-part, I'd just set a breakpoint somewhere.
I code this page, a tab with sliding capability : here
I really like the effect, but when you vien a long tab (let say specification), and we go to a smalll one (download) reclicking on a large one force the user to scroll down again...
Is it possible to jquery something that tell the page to stay scroll down at the max after the tab pressed ?
I'm doing something like this with the jQuery UI tabs, you can modify it for whatever layout:
//Tab panel height matching
$(".ui-tabs-panel").each(function() {
if ($(this).height() + 30 > $(this).parents(".subTabsC").height()) {
$(this).parents(".subTabsC").height($(this).height() + 30);
}
});
I have the whole tab content wrapped in a <div class="subTabsC">. The 30 pixels in my case is to account for the tabs and the border, adjust to whatever you need.
Yes. OnLoad you could iterate through all the tabs, find the tallest and set the container's height to that value and remove whatever's doing the smooth resizing.
It means some of the smaller things might look a little lost, but you'd not be resizing the page (which annoys me too).
couldn't you just add "return false" at the end of your function? this would prevent it from "refreshing" the page when you click the anchor link....I could be wrong...I'm just starting to learn jquery and javascript.