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

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

Answer 2

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

The debugger will now break before the node gets removed.