Breakpoints are great when one knows where the code is being executed. However, I have a problem where my DIV is being manipulated by some unknown code in a library I'm using. Is there a way to basically set a breakpoint on the node and see when children are added or attributes changed?
In firebug you can set in the html tab "Stop on attribute change"
see : http://getfirebug.com/html
Just for people who have never used Firebug, go to the HTML tab along the top of the Firebug window, navigate to the element you are after by expanding the relevant nodes. (Alternatively right-click the div on the page, and choose "Inspect Element" at the bottom (usually) of the right-click menu. Mousing over the node should, by default, highlight that element on the page.
Then when you have the div node shown in the firebug window, right click on the node and choose "Break On Attribute Change", "Break on Child addition or Removal", "Break on Element Removal", or whichever combination you'd like. And voila!
Related
I am working on a website based on Prestashop, and there is a tag which classes are changed (from "col-md-12" to "col-md-6") when one activate a switcher.
I would like to be abble to see how and where this changed is made in the javascript code (I suppose it must be Javascript that make the change).
Thank you
Open chrome developer tools (F12 on Windows/Linux,
Command+Option+I on Mac).
Click on the element picker at the top-left corner of the devtools
panel.
With this tool selected, find (in page) and click on the element whose
attribute is changed at runtime. The tag must now be highlighted in devtools panel
too. Right-click the highlighted tag in devtools.
In the pop-up menu, hover over Break on and select attribute
modification.
Click the switch that changes the class to col-md-6.
Please note that this will pause the execution every time one of the attribute is modified, which includes addition/removal of an attribute or change in their values.
I am working on a website that uses masonry. I know that the masonry rebuilds itself when the window width changes and I want to be able to trigger that rebuilding at will, like when one of the elements' height is changed. The problem is I don't see any event listeners related to the window's width that I can copy the code from. Is there a way I can see which events are being triggered at the moment?
In Chrome Developer Tools (press F12 within Chrome), go to the Sources tab.
In the right hand pane, expand > Event Listener Breakpoints and tick the ones you want to break on.
Alternatively, if it is using jQuery event handling, you can install the jQuery Debugger extension for Chrome Devtools, and it gives you a jQuery Events tab in the right hand column on the Elements tab. That shows you what events are bound to using jQuery for the selected element. Try selecting the <html> tag or the <body> tag and see if you can find it there.
One final option is to search in the JS you are using for the string "resize".
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
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
I'm trying to find a jQuery code that controls a span element in my template.
For example:
<span class="ccontent"
That class opens a info window when hovered upon.
How can i find the jQuery code that relates to this in my template using Chrome and in what file it resides?
Try using Visual Event 2
Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:
Which elements have events attached to them
The type of events attached to an element
The code that will be run with the event is triggered
The source file and line number for where the attached function was defined (Webkit browsers and Opera only)
In Chrome, right click and select "Inspect Element" to open up your inspector. On a Mac you can use Command + Option + I
After that click Resources tab, then Command + F (again, Mac, not sure about PC). Type ccontent into the search box and you will see the number of references to that class-name. Click through until you see all the places in your code where it's mentioned.
The answer from Matthew Davis will work when you can search through your code for the id (e.g. "#ccontent") in question, but won't work as well when the element is indirectly referred to e.g. by class or by element type.
The Visual Events bookmarklet will also help you, but sometimes it will just list the minified JQuery code for the event that is bound to the element.
When doing a mouseover or something else that results in a change to the DOM or a change to an attribute of the thing you are hovering over, and the first two (easier!) options fail, you can try the following:
Go into the Elements tab of the Chrome Developer tools (CTRL+SHIFT+I).
If you are interested in tracking the attributes changing of an element, right click on it and click "Break On > Attributes modifications":
If you are interested in something changing in the DOM (e.g. a modal appearing), right click on the body of the document, or the relevant container div, and click "Break On > Subtree modifications":
Then do your mouseover or trigger whatever event you are interested in on the element.
The Chrome Debugger should launch, and on the right-hand side is the Call stack:
You can click on the different items in the call stack to see where a call was triggered in the Source tab.