Мотивация
Я работал с выпадающим компонентом библиотеки Ng-zorro в одном из приложений и думал, почему неудобно просматривать динамически добавляемые компоненты и применять некоторые стили в инструменте разработки браузера? Например, когда мы наводим указатель мыши на раскрывающийся список и переходим с помощью мыши в инспектор браузера, содержимое раскрывающегося списка исчезает. Содержимое раскрывающегося списка создается динамически и размещается в DOM. При наведении на раскрывающийся список он удаляется из DOM. Это поведение популярно для всплывающей подсказки, модальных окон, диалогов и других плавающих панелей в библиотеках с Angular CDK.
В этом посте я хочу описать свое решение, как проверить компоненты оверлея с помощью инструментов разработчика браузера в библиотеках с Angular CDK. Я покажу это на выпадающем примере из библиотеки Ng-zorro, потому что у меня была задача с ним.
Поиск компонента оверлея
Компонент оверлея отображается в нижней части страницы:
Когда мы наводим указатель мыши на раскрывающийся список, мы видим, что внутри cdk-overlay-container добавлено «что-то»:
Было бы круто, если бы мы могли заморозить время в момент наведения из выпадающего списка. Таким образом, мы можем проверять и изменять содержимое непосредственно в инструментах разработчика.
Модификации поддерева отладки
Мы можем запустить отладчик в момент этих модификаций DOM внутри оверлейного div. Мы можем сделать это с помощью опции «модификации поддерева» инструментов разработчика. Вы можете найти эту опцию в контекстном меню cdk-overlay-container:
Мы включим эту опцию и проанализируем все инициированные действия, когда что-то было изменено в cdk-overlay-container, чтобы мы могли найти действие, которое отсоединяет содержимое оверлея от DOM:
Снова наведите раскрывающееся меню. Код будет приостановлен в отладчике:
Нажимаете Prettify и наблюдаете более-менее понятный код:
Мы увидим, что был вызван метод createHostElement. Вероятно, сотрудничество этого метода заключается в динамическом создании раскрывающегося списка. Теперь нам нужно найти некоторый метод, который будет вызываться перед уничтожением выпадающего содержимого. Затем установите в нем точку останова. Нам нужно пройти через все установленные точки останова с помощью отладчика и найти какой-нибудь метод, похожий на `detach`.
Отсоединение компонента наложения
После исследования и обнаружения события detach мы можем установить здесь точку останова:
Теперь, когда вы закончите очередь точек останова и повторите зависание, экран будет зависать при перемещении курсора из раскрывающегося списка. С помощью этого вы можете перейти на вкладку «Элементы», проверить элементы внутри оверлея и попробовать протестировать свои стили или другую логику в браузере. И ничего не исчезнет:
Резюме
Этот подход применим не только для библиотек Angular CDK, но и для других фреймворков и библиотек. Главное — отладить код и установить точку останова для события, удаляющего оверлейный компонент.
