So I have an element that is dynamically added to the page with Javascript. After it is added, it is granted focus.
I want to examine the element in chrome dev tools, but the issue is that it has a onblur event handler that removes it from the DOM. So basically when I click on the dev tools to select the element, it is removed. An example can be seen here:
http://jsfiddle.net/MSZEx/
HTML:
<div id="container">
<button id="the_button">Click me to show field</button>
</div>
Javascript:
$("#the_button").click(function() {
$elt = $("<input>").attr("type", "text").attr("id", "text_field");
$("#container").append($elt);
$elt.focus();
$elt.blur(function() {
$elt.remove();
});
});
In the example I would like to be able to examine the input element that shows up once the button is clicked.
All of these answers didn't really work for me.
At the time of writing (Chrome 92) you can use the Rendering settings in Chrome Dev Tools:
Open Chrome Dev Tools > Click the kebab menu > More tools dropdown > Rendering > Check emulate a focused page
This keeps the focus enabled whilst playing around in Chrome Dev Tools 🎉
Edit: 23/03/2022 - this is still the case in Chrome 99
I got it working by right clicking the parent node in the tree without focus & then
-> Break on... -> Subtree Modifications
Note that a page refresh doesn't clear this out, so might have to close & reopen the inspector if you have forgotten where you put your break point
Rightclick the node in the element tree -> Break on... -> Node Removal.
The debugger will now break before the node gets removed.
The trick I like to use is
Open up the sources panel
Display the tooltip
Use the keyboard shortcut to pause script execution. (Hover over the pause icon to find out the keyboard shortcut)
When the script execution is paused, go back to the Elements panel and inspect the tooltip as you are used to
Another way is to open Chrome dev tools, focus the element in question in the browser viewport and then hit F8 which will stop all JS from running (without losing focus), leaving the element even after it loses focus till you enable JS again. This way you can inspect the element in the DOM tree and proceed from there.
Enable JS by hitting F8 again.
How about you just simulate the click from the console?
Open your f12 tools on the website, get the elements id and do your own $("#the_button").click(). The console will keep the focus so your element won't blur. You can then go to the elements tab and look at the css.
"but what if my Javascript was very very long, and it was minified" <- In this case, you could try this (use F12 to trigger):
$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
// Or in vanilla JS:
window.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })
in this fiddle
As suggested by this SU question
I don't know if it works in chrome, but it does in Firefox when you already have a console open.
According to the
Chrome DevTools Keyboard Shortcuts page, Ctrl+Shift+C toggles Inspect Element Mode, which allows you to hover over the element without it disappearing, and this will sync with the Elements view in the DevTools. However, as soon as you click on the element, it will still disappear.
You can combine this with the other answers to break immediately (using F8 or Ctrl+</kbd> to pause script execution) or on modification of the element/subtree (which should now be shown in the Elements view).
In Firefox this does not work, but you can still use the trick with setting a breakpoint (Debugger -> Event Listener Breakpoints -> blur). You can then select the element while the page is paused.
If putting a break-point is an acceptable solution for you (which it seems to be according to comments) then you can add a debugger; statement to automatically halt execution. For more information check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
Related
When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class
however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes
Example:
so I can't inspect an element
Normally I inspect elements like this (e.g. stackoverflow)
How do you inspect an element without using the right click button?
Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time
I must be missing something important here about chrome's inspect element tools.
Could someone enlighten me here a better workflow / maybe chrome extension tools?
Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.
You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.
You can open the dev tools on a different windows and refresh your page or use firebug.
or use Firefox
It sound like a simple debug question but I cannot find the solution.
On a web browser like chrome, in the dev panel, I would like to inspect an element (like a button) and then ask chrome to find the corresponding javascript events on the page / file (in order to place breakpoint or to look at the code).
How can I do that ? (without fireing the event and checking the timeline as proposed by #dev3078 in this post How do I monitor what Javascript is being triggered when I click an element in a webpage?). I'd like to have, as in IDE, a 'goto javascript events declaration' !
go to sources, on the right side you'll see a dropdown called Event Listener Breakpoints, expand Mouse Events and select click, when you click on your Dom button, dev tools will go into debugging mode inside the first function called after the click event, you can also choose more events other than click
I know that chrome has a ":hover" state in the inspector for this, but it does not trigger the event.
As far as I can tell the markup that I want to inspect is written in the DOM after a jQuery .hover() event. And is immediatly removed from the DOM when my mouse leaves the element that is targeted by the .hover() event.
Is there any way to force this open, assuming I can't write in the Javascript files that hold the function that does this (but I can access the rest of the files and can read the unminified JS).
In the Chrome developer tools tab "Sources", you have a roll out on the right labelled "Event Listener Breakpoints". Open stack "Mouse" and activate "mouseenter". The window/ javascript then gets "paused" when you hover an element while you can switch back to the "Elements" tab and inspect the dom.
I'm currently toying around with some autocomplete form fields, and am finding it very hard to inspect the generated drop down items. As soon as I click on the "inspect element" button or try to right click on the dropdowns, the original autocomplete input runs an onclick event (or something that triggers on a focus change) and hides, deletes or otherwise modifies the element I was trying to inspect.
Is there a way to work with the debugger so that the mouseclicks and other commands I give to it don't get intercepted by the script I'm trying to debug?
I currently have this kind of problem on both Firebug and on Chrome's inspector. The only solution I can think right now would be setting some smart breakpoints inside the appropriate event handlers but that is hard to do if I don't know what event handlers to look for or where they are hidden in the original code...
You could set a breakpoint and inspect after it is triggered, I have noticed that freezes the DOM.
You need to use breakpoints. As far as tracking down what's happening where, Chrome's "Call Stack" window can be very helpful.
Cheers
In Firebug you have a Break on next item in Script panel. Since Firebug 1.10, there's a keyboard shortcut for this: Ctrl+Alt+B on Windows (it works even if focus is in the page, not in Firebug).
You'll probably need to have Script panel focused in Firebug since this is a shared shortcut for Break on... which differs in each panel.
It generally freezes the DOM although it's not 100% reliable.
It's also not ideal because it will stop at any JavaScript execution, and will not be helpful if there is some aggressive polling in the background, or global capturing of keyboard events. Anyway it's still better than nothing.
Chrome pauses Javascript execution on F8; it took a bit of repetition but pressing F8 at the right time prevented JS from defocusing the element.
If you are having problem selecting the element, you can try cmd + shift + c on Mac to select the element without right clicking it.
If its DOM manipulation problem, you might try to force state on the input element by right clicking on the element in the Elements panel and set force state to focus.
Open the docked DevTools first (the undocked approach will not work due to the OS limitations.)
Once the autocomplete box is displayed, right-click it and select "Inspect Element" in the context menu. The focus will move to the DevTools but the autocomplete box will still be shown (this worked for me on Linux, tip-of-tree Chromium, M25. Your mileage may vary.)
/**
* Utility to freeze actual DOM state, for example dropdown menu
*/
function easyBreak() {
function doBreak() {
// put breakpoint here to freeze actual dom and write to console easyBreak()
// you have 3 seconds to get to desired state
var a = 0;
}
window.setTimeout(doBreak, 3000);
}
You could use DOM breakpoints.
I'm having a similar case here : I want to inspect dropdown items that only show when the input has focus.
On Chrome, I right-click on the parent element and choose Break on > Subtree modifications.
It will pause - like it does with JS breakpoints - anytime the DOM changes within that parent. You can then inspect the children while the DOM is frozen.
I've noticed a strange issue with how Chrome handles javascript focus event. The fact is, it continuosly triggers focus event, even if it occurs only once. I've made a bit of research here and found questions where people run into the same issue when using alert(). When they close the alert window, the focus returns to their inputs and a handler triggers again and again. In my case, the problem is different, as I am using console.log(), and from time to time I get the same log 2 or even 3 times. I've noticed it usually happens when I clear the console, and then focus on an element. When I try to repeat it, it does not occur any more.
The scenario:
Clear console
Focus on element (2 or 3 console messages)
Focus on other identical element or unfocus and focus again on the
same one (no problems)
Clear console
Focus on element (2 or 3 console messages - the problem is back!)
I've created a jsfiddle, please check it out:
http://jsfiddle.net/ffuWT/3/
The question is, what is the reason for this issue and how can I work around it?
Creepy how these things can happen. I've run into this exact issue at work today, but have quickly written this off suspecting dodgy event listening and propagation in a 3rd-party plugin (jQuery customInput). I'll double-check your jsfiddle tomorrow.
I'm unable to recreate your exact output on my currently available setup (Chrome v17 on a Mac) but I do have a theory to share. In your scenario and in Ben Lee's comment the consistent part is shifting focus to another window (console in your case).
Check out http://www.quirksmode.org/dom/events/blurfocus.html under "Window + focusable element":
If the window is sent backward while a focusable element is focused,
blur events should fire on both. If the window is brought forward
again, focus events should fire on both.
And next, in the compatibility table it's noted that
Safari Windows fires two focus events.
Maybe Chrome finally got this "feature" too, coming from the Webkit family and all?
I was able to recreate the problem (using your jsFiddle) and from what I can see it only occurs when you click the select without having focus on/in the result frame.
Click within the frame but not on the selects before you click to expand one of the selects and you´ll only see one line logged.
You can also append /show to the jsFiddle URL to view the result in a separate window.
It seems like focusing the window by clicking on a select control triggers the event multiple times.
Open this demo and unfocus the browser window (by clicking the desktop, taskbar or another window) and then click on one of the selects to expand its options and view the console.
Using Chrome 17.0.963.79 m.