Изучить элемент, который удаляется onblur

Итак, у меня есть элемент, который динамически добавляется на страницу с помощью Javascript. После его добавления ему предоставляется фокус.

Я хочу изучить элемент в инструментах chrome dev, но проблема в том, что он имеет обработчик события onblur, который удаляет его из DOM. Поэтому в основном, когда я нажимаю на инструменты dev для выбора элемента, он удаляется. Пример можно увидеть здесь:

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(); 
    });
});

В этом примере я хотел бы изучить элемент ввода, который появляется после нажатия кнопки.

Ответы

Ответ 1

Щелкните правой кнопкой мыши node в дереве элементов → Перерыв... → node Удаление.

Отладчик теперь сломается до удаления node.

Ответ 2

Я получил его, щелкнув правой кнопкой мыши родительский node в дереве без фокуса, а затем

- > Перерыв... → Модификации субтитров

Обратите внимание, что обновление страницы не устраняет это, поэтому может потребоваться закрыть и снова открыть инспектор, если вы забыли, где вы положили точку прерывания

Ответ 3

Другой способ - открыть инструменты Chrome dev, сфокусировать рассматриваемый элемент в окне просмотра браузера, а затем нажать F8, который остановит работу всех JS (без потери фокуса), оставив элемент даже после того, как он потеряет фокус, пока вы не снова включите JS. Таким образом, вы можете проверить элемент в дереве DOM и перейти оттуда.

Включить JS, снова нажав F8.

Ответ 4

Как насчет того, чтобы вы просто имитировали клик с консоли?

Откройте свои инструменты f12 на веб-сайте, получите идентификатор элементов и сделайте свой собственный $("#the_button").click(). Консоль будет держать фокус, чтобы ваш элемент не размывался. Затем вы можете перейти на вкладку элементов и посмотреть css.

Ответ 5

Согласно странице сочетаний клавиш Chrome DevTools, Ctrl+Shift+C переключает режим проверки элемента, который позволяет вам наводить курсор на элемент без его исчезновения, и это будет синхронизироваться с представлением "Элементы" в DevTools. Однако, как только вы нажмете на элемент, он все равно исчезнет.

Вы можете комбинировать это с другими ответами для немедленного прерывания (используя F8 или Ctrl+\ для приостановки выполнения скрипта) или при изменении элемента/поддерева (которое теперь должно отображаться в представлении Elements).

Ответ 6

Если поставить точку останова - приемлемое решение для вас (что, по-видимому, соответствует комментариям), вы можете добавить отладчик; чтобы автоматически остановить выполнение. Для получения дополнительной информации проверьте https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

Ответ 7

", но что, если мой Javascript был очень длинным, и он был уменьшен? < - В этом случае вы можете попробовать следующее:

$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

в этой скрипте

Как предложил этот вопрос SU

Я не знаю, работает ли он в chrome, но это происходит в Firefox, когда у вас уже есть консоль.

Ответ 8

Мне нравится использовать трюк

Откройте панель источников
Отобразить подсказку
Используйте сочетание клавиш, чтобы приостановить выполнение скрипта. (Наведите курсор на значок паузы, чтобы найти сочетание клавиш)
Когда выполнение скрипта приостановлено, вернитесь на панель "Элементы" и просмотрите подсказку, как вы привыкли