I have an autocomplete dropdown box for city names as,
When i try to inspect one of the option elements using right click and Inspect Element, the dropdown menu disappears and inspect element takes me to the original page's dom.
How can one inspect dropdown menus using firebug inspect element?
With the suggestions dropdown visible and DevTools opened, press F8 and switch to the DevTools. You will immediately break at the JS blur handler for the field, so the dropdown will not be removed, thus you'll be able to inspect its DOM.
Edit HTML right click menu Chrome Dev Tool
In Chrome Dev Tool you can Right Click on the input where you type the adress, Scroll down to "Break On..." and select subtree modifications.
Go back to your input and start typing. It should Pause the app leaving you with the open suggestions dropdown.
Can't speak for Firefox, but in Chrome developer tools you can trigger a state on an element manually by right-clicking on the element in the developer window, and choosing the appropriate item (i.e. ':hover').
Inspect the dropdown/input element and remove the "Blur" event from the "Event Listeners"
Related
I am unable to right click like normal to inspect element on the ag-grid. How do I enable that (reenable it?)
Holding down the Ctrl-Key and right clicking will show you your browsers context menu.
https://www.ag-grid.com/javascript-data-grid/context-menu/#default-context-menu
I am debugging a big DOM with devtools:
I would like to "boomark" this div, so I can jump to it again easily.
It would be great if this bookmark would survive a page reload.
Is there a way to do this?
I'm not sure it qualifies as "Bookmark", but you can use the "Break on" mark, which survives reload and guides you to the right line, even when the elements are folded.
Break on mark
Break on DOM changes from google
With Bookmark no until and unless there is an href to your selector(which is not there in your case).
If you can add then this link can help you How to scroll an HTML page to a given anchor
If you can not use href then though scripting in your dev tools you can do everytime you want to scroll like below
document.querySelector('.panel-heading').scrollIntoView();
The other answers here as I write this will work. Yet another option (sorry the screenshots are so large):
Right click the element in the Elements panel
Select "Store as global variable"
The console will slide open, revealing the automatic name assigned to the element (temp1, temp2, etc)
Whenever you want, you may now type that variable name into the console to have it log the element
Right click the logged element, and click "Reveal in Elements Panel" to have the elements pane open with that element selected
I am trying to use jquery-ui's autocomplete widget (1.12) and it looks weird.
I found this question that has some advice about style, version unknown.
Normally I would open the page in chrome, open the debugger, click on the button that says "Select an element in the page to inspect it (flower up-arrow C)", then click on the element to inspect, and I'd see all the styles.
However, when I click on the debugger select, the autocomplete goes away. If I type so the autocomplete comes up, the debugger select goes away. Same behavior with the keyboard shortcuts.
How do you inspect the styles of an jquery-ui autocomplete result window in chrome?
EDIT: I never was able to inspect, but I did get .ui-menu and .ui-menu-item to work, from this answer.
You can just search the for ui-widget or ui-autocomplete in the Elements Tab of the dev tools. You should be able to find a - remove the "display: none" - this should do it.
In CKEditor, we have some plugins where we can right-click an element and a dialog is offered up. I need to inspect that menu. I know that Chrome Dev Tools allows you to force the element state with :hover, :active, :focus, :visited but as far as I can tell you cannot force a right click element state.
Is there any way to force the element state to be right clicked?
Set a debug breakpoint during code that is executed while the menu is open. I believe that the command from the menu is executed before the menu is closed.
Otherwise, you can set a breakpoint for 'on dom manipulation'. See: https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-mutation-events
We have a multi-tiered/hierarchical YUI menu activated via a YUI menu button. Everything in this menu works pretty well. If you mouseover a menu item with a submenu, the submenu appears as expected. You can select an item from this submenu just fine.
The problem, however, is that you can also click on the parent items of this menu which closes the entire menu. In fact, I want the opposite. I'd like a click of a parent menu item leave the top level menu open and open the submenu (i.e. I want a click to be identical to a mouseover event in terms of functionality).
Side note: This isn't an issue on a typical web browser (e.g. Firefox) where the click event doesn't matter because you can't have a click without a mouseover. This is an issue on the iPhone which doesn't have a mouseover event.
I've been playing with the autosubmenudisplay properties and keepopen properties, hoping I can just handle the parent item click events to do what I want but, so far, I've been unsuccessful. If I set autosubmenudisplay to false, I can't figure out how to get the submenus to display manually. The keepopen property doesn't seem to work rather I set it on the menu or submenus.
Is there a way to get the behavior I want so our iPhone users are happy?
Todd Kloots, author of the YUI Button and Menu widgets here. Took at look at your request. Unfortunately the current version YUI Button and Menu aren't designed to support the type of interaction you are looking to create. Feel free to file a feature request via SourceForge and I'll try to work on this for a future version of YUI.
Todd
It's not exactly what you asked for, but have you looked at iUI? You may be able to pick up some tricks from the implementation.