Examine Element That is Removed onblur

Question

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.

Answer 1

Rightclick the node in the element tree -> Break on... -> Node Removal.

The debugger will now break before the node gets removed.