Отладка web-приложения через браузер. Инструмент для отладки

Записи из этой темы
  1. Отладка web-приложения через браузер. Инструмент для отладки
  2. Отладка web-приложения через браузер. Отладка JavaScript через console.log()

Отладку web-приложений в браузере (а именно front-end) можно разделить на две задачи:

  • поиск и исправление ошибок верстки (HTML/CSS)
  • поиск и исправление ошибок JavaScript (jQuery)

Браузеры уже имеют необходимые инструменты, что решить указанные задачи. В качестве такого инструмента будем рассматривать Web Inspector, который используется в Chrome, Opera, Яндекс.Браузер и хромо-подобных браузерах.

Вызвать Web Inspector можно двумя способами. Первый универсальный способ — это сочетание клавиш  + + . Второй способ — щелкнуть правой кнопкой мыши по любому месту на странице и выбрать пункт меню «Проинспектировать элемент» или «Посмотреть код».

Название пунктов меню может отличаться в зависимости от браузера и его версии. Поэтому советую первый способ вызова WebInspector.

В итоге на экране должны увидеть следующее:

The appearance of WebInspector

Порядок, название и количество вкладок Web Inspector-а может отличаться, но в 90% случаев достаточны вкладки ElementsConsole и Network (оценка основывается на собственной практике).

Остановимся только на вкладке Elements, которая необходима для отладки HTML/CSS верстки. В левой части отображается DOM-дерево текущей html-страницы. Если навести курсор на элемент (узел) этого дерева, то на самой странице будет выделена область, которую этот элемент занимает. Также можно отредактировать содержимое элемента и его атрибуты (например, добавить/удалить класс или дописать style), выбрав соответствующий пункт контекстного меню (при клике правой клавши мыши по элементу).

Правая область имеет несколько вкладок. Если выделить какой-нибудь элемент, то в правой области вкладки Style будут отображены CSS правила, примененные к этому элементу. Также будут указаны правила, которые достались этому элементу по наследству (от вышерасположенных элементов) с указанием CSS селекторов. Если какое-то правило зачеркнуто, значит это правило переопределено в другом CSS селекторе, который имеет больший приоритет. Здесь же можно исправить «налету» уже существующие CSS правила, или дописать их только для выбранного элемента в блок element.style {}.
Edit CSS in WebInspector

Во вкладке Computed правой области содержится информация об итоговых размерах выбранного элемента, его рамки (border), внутренних и внешних отступах (padding и margin). Также перечислены значения всех правил, примененных к этому элементу — это помогает разобраться, в каком месте конкретное правило переопределено, унаследовано или используется значение по-умолчанию браузера.

Computed style

Для поиска ошибок верстки и для экспериментов с отображением «налету» описанных свойств Web Inspector более, чем достаточно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *