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
Related
I'm testing my HTML on accessibility. While navigating the HTML with the TAB key, the focus ring sometimes disappears because the element that has focus is hidden. At that point i can't tell which DOM element has focus.
Is there a way i can track in Chrome DEVtools which element has focus while TABbing through the page?
Update
Official documentation
As of Chrome 70, which released in August 2018, Live Expressions provide an easier way to track which element has focus.
Open the Console.
Click Create Live Expression .
Type document.activeElement.
Click outside of the Live Expression UI to save.
As of Chrome 71, which was released in October 2018, when you hover over a Live Expression result that evaluates to a node (as is the case with document.activeElement), DevTools highlights the node in the viewport.
Original Answer
Thanks for posting. Seems like a common and useful workflow, yet I've never thought about it.
While focused on the hidden element, evaluate document.activeElement in the Console.
Right-click > Reveal in Elements panel.
The DOM Tree is highlighting the hidden element.
Here is the demo, if you'd like to try it yourself.
P.S. I tweeted out this workflow from the DevTools account.
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"
I might be a bit dumb or something, but I just can't find the background image of the site:
http://www.deineschatzkammer.com
Can anyone find it or tell me how to find it easily? I have searched now with the Chrome DevTools and Firebug and searched the code for GIFs, JPGs and PNGs... :(
It is very easy to find the background image. Here are three solutions how to find it using Firebug (it works similar in the Chrome and Firefox DevTools):
Via the CSS panel
Switch to the CSS panel.
Type jpg into the search field.
Hover the matched url(...) to see a preview of the image.
If it's not the right one, hit Enter and repeat step 3.
Via the HTML panel
Right-click the background image and choose Inspect Element with Firebug from the context menu to see the element within the HTML panel.
Switch to the Style side panel.
Check whether one of the rules contains a background-image property.
If there isn't a background-image property containing the related image, this means the element containing the image is overlayed by the one you just inspected. So delete the element by pressing Del on the selected element or right-clicking it and choosing Delete Element from the context menu. Then repeat step 3.
Via the Net panel
Enable and switch to the Net panel.
Reload the page.
Click on the Images filter.
Hover over each listed image to find the one you're searching for.
I have a problem in an Access app. I open a form and its On Open event sets it to maximized. All good. From this form I click a button that opens another form who's On Open event opens it as maximized, over top of the original form. All good. When I close the second form, the original form is no longer maximized, it is now in a window. Not good.
I can't figure out why this is or how to prevent/resolve this. What event do I need to monitor and method to call to set the original form back to maximized. I tried playing with the On Close event of the second form but couldn't find the code to alter the (already open) original form. I tried a bunch of things but no luck. Any ideas?
Set the property of both forms to pop-up,modular and you should be fine
I assume you have a DoCmd.Maximize in the Open event of the first form?
Then somewhere in the Close or Unload event of the second form (or somewhere else), there must be a DoCmd.Restore.
Is any of the forms Popup or Modal?
OK, bit of a breakthrough. What fixed it was to place DoCmd.Maximize inside the On Activate event of the first form. When the 2nd form is closed the 1st form is automatically activated and the On Activate event fires, which maximizes the form again (I'm still not really sure why this is necessary). The key was figuring our what event to base the maximize method on.
Many thanks to everyone who posted.
With your database open in Access 2007, click on the "Office Button" (that's the round button in the upper left hand corner of the Acces window).
Click on the "Access Options" at the botton right.
In the "Access Options" dialog box, click on the "Current Database" option from the list on the left.
In the "Application Options" group, locate the "Document Window options". There are two options and an check box. Select the "Operlapping Windows" option. (The "Tabbed Documents" option is the default for all Access 2007 files. For more information about this, you may want to click on the "Guide to Access 2007 User Interface" link located on the "Getting Statred with Microsoft Office Access" screen that appears when you open Access 2007 from a short cut on your desktop or from the Startup menu.)
After making the selecltion of the "Overlapping Windows" option and closisng the diaplog box, you will be prompted that you have to close the current database and reopen it for your changes to take effect. Selecting the "Overlapping Windows" option will cause Access to use the interface that you are more used to.
On the Elements tab 'Find' functionality (cmd+F/ctrl+F) doesn't search through styles pane. Is there a way to type CSS property with HTML element selected and find it quickly in the Styles panel?
Bottom right corner, light gray text says "Find in styles". Click there and enter your search.
Unfortunately, such functionality does not exist in current Chrome Dev Tools.
But its present in Opera Dragonfly and its very handy, so, probably Chrome will copy it, eventually (but no such feature request exists in bug tracker now).
On the latest Chrome on Mac, I'm getting the filter at the top of the styles pane. I can't believe that I never noticed it given that I've needed it so many times!
Try using CTRL+Shif+F on the Elements tab