Отладка Javascript - Часть 2: DOM

Это вторая часть серии статей, посвященных отладке интерфейсного Javascript-приложения. В предыдущей части мы говорили о точках останова в исходном коде, а в этой статье мы сосредоточимся на модели DOM и, в частности, на том, как получить максимальную отдачу от вкладки Элементы.

Отказ от ответственности: это ни в коем случае не полное руководство по инструментам разработки. Мы собираемся упомянуть только то, что обычно использует большинство разработчиков.

вступление

Обсудив, как отлаживать код, связанный с функциональностью платформы, пришло время сосредоточиться на визуальных аспектах приложения. Спросите разработчика, что он думает о таблицах стилей, и он, вероятно, разозлится, даже подумав о них. Это одна из тех вещей, которые кажутся легкими, но на их освоение уходит много времени. Хотя это не курс по CSS, мы будем указывать на простые приемы, о которых вы можете знать или не знать, которые могут немного облегчить вашу жизнь, когда вы пытаетесь отладить интерфейс приложение.

Как и в предыдущей статье, мы будем использовать инструменты разработчика Google Chrome. Чтобы открыть их, просто нажмите CMD + Shift + I на Mac (или CTRL + Shift + I в Windows) и перейдите на вкладку Elements, которая будет нашей основной целью в этой статье.

Поиск в DOM

На вкладке "Элементы" можно найти весь HTML-код вашего сайта. Каждая строка представляет собой элемент, при нажатии на который будут открыты его дочерние элементы. У вас есть 3 быстрых способа найти HTML-код для определенного элемента на странице:

  1. Первый способ - использовать кнопку проверить элемент, расположенную в верхнем левом углу вкладки элементов (выделено зеленым кружком на скриншоте ниже). Просто нажмите эту кнопку один раз, а затем щелкните элемент на своем веб-сайте. Это выберет и выделит HTML этого элемента DOM.
    Другой способ сделать это - щелкнуть правой кнопкой мыши элемент на странице и выбрать «Проверить элемент». Практически он будет делать то же самое, хотя я бы не рекомендовал этот подход, поскольку иногда он выделяет HTML окружающего (родительского) элемента.
  2. Второй способ - нажать CMD + F (CTRL + F в Windows), что вызовет панель поиска, позволяющую искать HTML. Просто введите <video или class="btn", и вы увидите все результаты, соответствующие вашему запросу, одновременно с этим выделив соответствующие визуальные элементы.

Манипуляция и проверка DOM

Теперь, когда мы можем искать определенный элемент, давайте посмотрим, что мы можем с ним сделать.

Редактировать элемент
Во-первых, у вас есть возможность полностью управлять им, как если бы вы редактировали его в локальном файле .html. Просто щелкните правой кнопкой мыши по интересующему элементу и выберите вариант Редактировать как HTML. Откроется текстовое поле со всем полным HTML-кодом элемента, включая его дочерние элементы, которые вы можете редактировать любым удобным для вас способом. Вы можете изменить класс, добавить атрибут, добавить дополнительный <span /> в качестве дочернего элемента элемента и т. Д. Если вы хотите изменить только определенный атрибут, вы можете просто щелкнуть добавить (или изменить) атрибут вместо этого ярлык.

Удалить элемент
Чтобы удалить элемент с экрана, вы можете просто нажать кнопку Удалить на клавиатуре, выбрав его HTML-строку (то же самое может можно сделать, щелкнув его правой кнопкой мыши и выбрав Удалить элемент). Это невероятно полезно, когда вы хотите изолировать элемент на экране (или всякий раз, когда вы видите раздражающую рекламу на веб-сайте).

Состояние триггерного элемента
Еще один отличный инструмент, который может быть весьма полезным - заставить элемент выглядеть так, как если бы он завис, активен, сфокусирован и т. д. Это позволит вам увидеть, как элемент выглядит так, как если бы вы его наводили или фокусировали. Это полезно всякий раз, когда вы хотите отладить правила CSS с зависшим состоянием, не требуя фактического наведения курсора или фокусировки на элементе.

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

Точки останова для элементов
Одной из наиболее интересных функций является возможность автоматического добавления точек останова при модификации DOM. Щелкнув элемент правой кнопкой мыши и выбрав Прервать, вы можете указать основному потоку Javascript приостановить выполнение всякий раз, когда происходит одно (или несколько) из следующих событий:

  1. Произойдет модификация элемента (и связанных с ним дочерних элементов).
  2. Элемент удаляется.
  3. Один из атрибутов этого элемента (класс, идентификатор и т. Д.) Меняется.

Каждый раз, когда это происходит, код останавливается на фрагменте кода, который изменяет элемент. Это может быть полезно в ситуациях, когда вы хотите определить функцию, отвечающую за настройку DOM, поскольку вы сможете пройти по стеку вызовов и идентифицировать этот конкретный фрагмент кода.
Вы можете отключите это в любой момент, повторно щелкнув тот же параметр или посетив раздел Dom Breakpoints в правом верхнем углу вкладки элементов

Проверка стиля и манипуляции

В правой части вкладки E lements вы можете увидеть каждое правило CSS, примененное к выбранному вами элементу DOM, независимо от файла (ов), в котором они существуют (всегда есть ссылка справа от каждого правила CSS, указывая на файл, в котором оно существует).

Прокрутка до самого низа откроет прямоугольник четырех (4) цветов: синего, зеленого, желтого и оранжевого. Синий - это чистые размеры вашего выделенного элемента, зеленый - его отступ, желтый - его граница, а оранжевый - его поля. Наведя курсор на любой из них, вы также можете визуально увидеть их контур на экране.

Вход фильтрации в верхней части вкладки (отмечен зеленым на скриншоте ниже) позволяет фильтровать правила CSS, которые вы видите. Например, если вы просто хотите понять, какого черта ваш элемент имеет высоту 0 пикселей, вы можете ввести «высоту», и все результаты, которые вы увидите, будут связаны с правилами, связанными с высотой.

Хорошая вещь, которую позволяет вам делать большинство инструментов разработки, - это запускать собственный CSS на лету с помощью раздела elements.style (выделено синим на снимке экрана). Все, что вы напишете, будет автоматически встроено в выбранный элемент DOM с помощью тега HTML style. Это работает наоборот, поэтому, если эта область уже заполнена некоторыми правилами CSS, это означает, что этот элемент по умолчанию имеет некоторые встроенные стили. Щелчок по значку «плюс» (выделен оранжевым) создаст селектор CSS, который нацелен на выделенный вами элемент (с использованием идентификатора и / или классов, которые имеет этот элемент). Хороший трюк в том, что вы можете добавить слово :after или :before в этот CSS-селектор и, таким образом, без каких-либо проблем создать псевдоэлементы CSS для этого элемента.

Пока мы обсуждаем эту тему, хотя и не имеем прямого отношения к этой статье, полезно знать, что приоритет правила CSS следующий:

  1. правила с !important в конце
  2. встроенные правила (с использованием тега HTML style)
  3. сложность селектора (более сложные селекторы имеют приоритет перед более простыми)
  4. последнее встреченное правило CSS (правила, которые были загружены последними)

Например, если в конце двух правил стоит !important, то «побеждает» то, что указано в строке.

Совершенно неважно. В этом разделе можно сделать один приятный трюк - получить доступ к палитре цветов. Просто добавьте или найдите существующее правило CSS, которое имеет цвет в качестве значения (например, color: black), и щелкните маленький «цветной квадрат», который всегда появляется слева от значения цвета. Теперь вы можете щелкнуть в любом месте страницы, и цвет правила CSS (квадрат которого вы щелкнули) изменится, чтобы соответствовать цвету элемента, по которому вы щелкнули. Это может быть полезно, когда вы хотите сравнить цвета или узнать, «какого черта цвет этого дурацкого элемента».

Панель инструментов устройства

При разработке для устройств Chrome предоставляет некоторые помощники, чтобы вы не изменили размер окна браузера, чтобы имитировать меньшую ширину экрана. Щелкнув значок для мобильных устройств и планшетов слева от вкладки Элементы, вы получите доступ к панели инструментов устройства. Это позволяет вам фактически имитировать экран устройства, чтобы увидеть, как ваш веб-сайт будет выглядеть на устройстве.

Вы можете выбрать устройство среди самых популярных и наклонить его с помощью кнопки наклона (отмечена синим на скриншоте ниже). У вас также есть возможность определить свою собственную ширину и высоту, выбрав опцию «Отзывчивый» (отмечен оранжевым) и либо заполнив соответствующие поля ввода (отмеченные фиолетовым), либо перетащив края окна эмулируемого устройства.

Что интересно при имитации устройства Android или iOS, так это то, что глобальные переменные Chrome изменяются соответствующим образом, чтобы имитировать реальную среду. Таким образом, вы видите то, что вы видели бы, если бы ваш веб-сайт действительно работал на устройстве Android или iOS. Это невероятно полезно, поскольку разные операционные системы по-разному обрабатывают страницу (например, преобразование строки URL-адреса при прокрутке).

Одна последняя особенность, о которой я кратко упомяну здесь (поскольку она также будет упомянута в части серии «Сеть»), заключается в том, что у вас также есть возможность изменять скорость сети, чтобы увидеть, как ваше приложение будет работать в сетях 2G, Сети 3G и 4G. Вы даже можете отключить его для проверки работы в автономном режиме при разработке PWA (прогрессивного веб-приложения). Все это также доступно на вкладке «Сеть», но также неплохо иметь клонирование функций на панели инструментов «Устройство». Вы можете увидеть эту функцию справа от кнопки наклона (синяя) на скриншоте ниже.

Заключительные примечания

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

В следующей статье мы рассмотрим сеть и то, как вы можете эффективно отслеживать свои запросы и ответы.

Спасибо за прочтение :)

P.S. 👋 Привет, я Аггелос! Если вам это понравилось, подумайте о том, чтобы подписаться на меня в твиттере и поделиться историей со своими друзьями-разработчиками 😀