How can I inspect disappearing element in a browser? - javascript

How can I inspect an element which disappears when my mouse moves away?
I don't know it's ID, class or anything but want to inspect it.
Solutions I have tried:
Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.
Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.
SUCCESS:
I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.

(This answer only applies to Chrome Developer Tools. See update below.)
Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.
Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:
Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t #sulco on Twitter

An alternative method in Chrome:
Open devTools (F12).
Select the "Sources" tab.
While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed.
From this point, use Ctrl+Shift+C to select the element.

Open console
Type in setTimeout(()=>{debugger;},5000);
Press Enter
Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.
Useful tip to avoid repeating those steps above every time:
add this as a bookmarklet:
Bookmark any page
Edit this new bookmark
Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();
Next time you wish to use this, just click/tap this bookmark.

Verified in 2022
Do the following:
Open the console and navigate to Elements tab
Type command + shift + P (OSX) or control + shift + P (Windows)
Type the word focused
Select Emulate a focused page from the the menu
Now clicking around in the console will not close the element.

I am using chrome on Mac there I've followed above steps but I'll try to explain a bit more:
Right click and go to inspect element.
Go to sources tab.
Then hover on the element.
Then using keyboard F8 or Command(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.

In Firebug there are different solutions for this:
You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
You can right-click the element and choose Inspect Element with Firebug
Also you may want to follow issue 551, which asks for a way to temporarily block specific events.
Edit:
To find out which element it is you can also enable the HTML panel options Highlight Changes, Expand Changes and Scroll Changes Into View to make the element visible inside the HTML panel.
Sebastian

In my case, I used Expand recursively option on google chrome:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:

Hover over the element with your mouse and press F8 (this in Chrome) to pause the script execution. The hover state will remain in visible to you.
It take you to the sources tab.
Go back to Elements tab. This time code will not disapper.

There Could be Dom element and the controller functions fighting at to refresh the session. Running the application by "Start without debugging" helped in my case.
enter image description here

you can view the elements appearing and disappearing in the inspector under elements. If you navigate to the element when it is visible you should be able to see it disappear or see its css change when it status changes.
This is possible with firebug in firefox or the built inspector in chrome.

I've written an article about debugging CSS of disappearing elements
Using hotkeys to automatically go into debugger mode with hotkeys keyboard shortcut:
Install the shortkeys extension
Click on the extension icon and chose "options":
Configure as follows:
Click "Save shortcuts" button (bottom-right)
Now, go to any page, make sure devtools is opened, and hit CTRL+SPACEBAR keys, while your inspection target element is visible.
I'm using Windows OS and this hotkeys combination is good for me and is not "taken" by any other shortcut, but of course, you can choose any other.

i had the same problem but i use Firefox it disappear as soon as i open inspect element found a solution:
open the 4 dashes(settings) go to web developer > Debugger and immediately press F8 which is the shortcut for the pause that stop the script before it kick and detect that you opened the developers tools

Related

Chrome dev tools: How to see attached event listeners for an HTML element

I am switching from debugging JS in Firefox to Chrome.
One thing that I am missing is this:
In Firefox I can see in the HTML see "[event]" that there is a custom event handler attached.
I think this preview is very handy.
In chrome I need to explicitly search for the event handler.
Is there a way to enable this feature (see event-handler in the tree) in chrome, too?
The feature you are looking for is available in google chrome dev tools
I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,
If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.
Hope this is what you are looking for.
it's available in chrome you can find it in developers option press
(CTRL+SHIFT+I) or F12
and then you will find tab named "Event Listener" in right hand upper corner if developer options is in full screen mode or else you'll find it it lower right corner.
And if you are unable to find that just simply find the >> symbol and click on it and select Event Listeners.
Here is the image for event listeners tab.
I think you can use getEventListners($0) api of chrome which gives the event listners of the particular selected element.
getEventListners($0) where $0 - The selected element in the DOM.
The console drawer can be added to the Elements tab by clicking on Esc key it will toggle the console drawer.Then in the console you can write getEventListners($0) as shown in the image.
As this is my first answer and don't have that much reputation as of now,it is not allowing me to directly add the image to the answer so I am really sorry for that. Please have a look at the image:
Inspecting google from my chrome browser.

Get HTML code after mouseover in firebug

There is an HTML object that changes after mouseover. I need to inspect the changes and copy it's code, but with firebug I cannot do that (the mouse can be only in one place).
Is it possible to freeze the html while the mouse is on an object and then check the changes in firebug?
Note that, it is not the HTML attribute that changes, it is the content that changes. Another div is added after mouseover. So, it cannot be monitored by Style tab. For example in this link: http://demo.virtuemart.net/index.php/2012-01-13-09-33-20/product-details-layout what happens when mouse is over the product image?
actually i dont have firebug .. but chrome inspector can work for you.. i hope it should be available in firebug also.. check the image
so you can try this one also..
You can stop the script execution when the HTML is changed using the Break On Child Addition or Removal option inside the context menu of the HTML panel.
To use this option you need to enable the Script panel first and reload the page.
Example:
At the page you mentioned just right-click on the <body> tag and choose the Break On Child Addition or Removal option. Then hover the product image. Doing so the script execution will stop and you'll be able to inspect the HTML for the loupe by clicking on the node inside the break notification:
If you are using Chrome you can press F8 while having the developer tools opened.
F8 pauses on next script execution. So if you hover, then press F8, then move your mouse a bit inside the element, you will be able to rightclick -> inspect it.
In Firebug Addon you can make the state permanent with the dropdown-menu at the Style tab.
http://i.imgur.com/pUaWw6b.png
If you want to change the content of an element, you can by editing the HTML directly.
http://i.imgur.com/AbW0z9D.png

Finding out what JS is controlling this

I have a page which is using a nice hover feature which is controlled by javascript, and I was wondering if there is a tool which would tell me what JS is controlling at a specific point as there is a lot of JS files used across the site.
You need a debugging tool, one such tool is mentioned in the comments: Chrome. Once you have the debugger enabled you need to set breakpoints on various events to capture the code flow within all the javascripts. For more info visit here
I would go with Chrome. You can load the page, see all the related JS.
If you are in Chrome, right click on or near the button and click "Inspect Element."
Now you can see all the goodies :)
In google chrome right-click the element, click on "Inspect Element" option. The Chrome Developer window with active Elements tab should appear. You'll see the html structure with your element being highlighted. Right-click on that element and activate all three options in "Break on..." submenu. If some modifications of DOM happen during hover, they will trigger the breakpoint right in the place where you need. But keep in mind, that hover effects can be implemented via css without a bit of javascript, so this plan can fail easily.
As other's have said, use Chrome's web developer toolbar. Go to the sources panel and click the little pause button icon in the lower left corner. This will cause the debugger to activate as soon as the next javascript command is run. Then activate the hover feature - the debugger should pause execution in the callback function that's responsible.
Google actually discusses this exact scenario at the bottom of this documentation page.

How do I find out what functions are called when a button is pressed in Chrome Console?

I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.
How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
You may be looking for the "Event Listener Breakpoints" section on the right side of the Debugger area. Open that up and select the click event under "mouse". See the screen image. Then click on the button in the app and you will immediately be taken to the code being executed.
With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut() function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.
Once you've set your breakpoint(s), do something on the page that would trigger the cut() function and the browser should break script execution as soon as it enters the cut() function (assuming your breakpoint is on the first line within the cut() function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.
Here's a screenshot of me doing it: http://d.pr/i/f6BO
Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI
The thing that you are looking for is called 'Profiling'.
It can be achieved by:
Go to Profiles
Choose first option ('Collect JavaScript CPU Profile')
Start it before pressing button 'Cut'
This may be helpful for some people:
You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging

How do I find out what javascript runs when I click an element? [duplicate]

This question already has answers here:
Using Chrome, how to find to which events are bound to an element
(8 answers)
Closed 8 years ago.
I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.
I would like to discover what javascript runs when I click on tools in the drawing toolbar.
I have looked at the html and there is no onclick event declared on the element.
I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.
There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?
I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?
You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.
In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.
I've used the Profiler in Chrome's debug tools for this purpose before.
Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.
Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.
Firebug probably has something similar.
To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.
Google Chrome has a global search that works great.
Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.

Categories