Ответ
Break on — это функция отладки в DevTools браузера, которая позволяет автоматически приостанавливать выполнение JavaScript-кода (поставить точку останова) при определенных манипуляциях с DOM-элементом.
Для чего используется: Чтобы найти код, который вносит нежелательные или неочевидные изменения в структуру или атрибуты DOM, что часто является причиной сложных UI-багов.
Типы условий Break on:
- Subtree modifications: Срабатывает при добавлении или удалении дочерних элементов.
- Attribute modifications: Срабатывает при изменении любого атрибута элемента (например,
class,style,disabled). - Node removal: Срабатывает при удалении самого элемента из DOM.
Как использовать в Chrome DevTools:
- Откройте DevTools (
F12). - Перейдите на вкладку Elements.
- Найдите нужный элемент в DOM-дереве.
- Кликните по нему правой кнопкой мыши, выберите Break on и укажите условие.
Пример сценария:
<button id="myBtn">Click me</button>
<script>
// Этот код вызовет срабатывание Break on "attribute modifications"
document.getElementById('myBtn').disabled = true;
</script>После установки Break on выполнение скрипта остановится на строке, где изменяется атрибут disabled, и вы попадете в отладчик на вкладке Sources, где сможете проанализировать стек вызовов и состояние переменных.