CSS-live.ru

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 1)

Перевод статьи Improve Your Debugging Skills with Chrome DevTools с сайта telerik.com для css-live.ru, автор — Питер Милчев

Chrome devtools

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

Бывали ли у вас неприятности с неверной работой JavaScript? Доводилось ли вам биться с подгонкой стилей элементов на своей странице? Бесит ли вас, когда страницу каждый раз надо тестировать на разных устройствах?

Если ответили «Да» хотя бы на один вопрос, то эта статья для вас. Вот наши полезные приемы и советы, которые помогут вам всё это побороть и повысить вашу продуктивность.

С отладчиком Хроме можно легко на лету менять внешний вид и функциональность AJAX-компонентов Telerik UI для ASP.NET или компонентов других UI-фреймворков вроде виджетов Kendo UI. Большинство советов и приёмов подходят и к другим браузерным отладчикам, и мы рассмотрим их на примере компонента RadGrid из библиотеки Telerik UI для ASP.NET AJAX.

В этой статье:

Обновление: если ищете более продвинутые советы и приёмы, обязательно прочитайте вторую статью из этой серии.

Просмотр сгенерированного HTML-кода элемента

Иногда при использовании готовых элементов и компонентов нужно знать структуру сгенерированного HTML, чтобы разобраться в его устройстве и с помощью минимальной доводки идеально вписать его в свой проект. Это можно сделать, посмотрев HTML в панели «Элементы» в отладчике Chrome.

Посмотреть структура элемента можно несколькими способами:

  • Кликнуть правой кнопкой мыши на элемент и выбрать из контекстного меню «Проверить элемент» (Inspect Element). Откроется отладчик Chrome, где будет подсвечен выбранный элемент.
  • Кликнуть на кнопку «Проверить элемент» (Ctrl+Shift+C) с иконкой проверки в левом верхнем углу отладчика Chrome и навести мышью на элемент.
  • Кликнуть правой кнопкой мыши на элемент, выведенный в консоли, и выбрать «Показать в панели элементов» (Reveal in Elements panel).

Проверка элементов

Иллюстрация 1. Проверить сгенерированные DOM-элементы

Маленькие хитрости

  • Можете на лету редактировать HTML и HTML-атрибуты двойным кликом по атрибуту элемента в панели «Элементы» (Elements) или кликнуть правой кнопкой мыши на элемент, выбрав из контекстного меню пункт «Добавить атрибут» (Add attribute), «Редактировать атрибут» (Edit attribute) или «Редактировать как HTML» (Edit as HTML).
  • Можно менять иерархию DOM, выбрав элемент в панели «Элементы», а затем перетащив его в нужное место.

Просмотр примененных стилей

Иногда, чтобы добиться безупречного вида страницы, бывает нужно чуть-чуть подрегулировать CSS-правила вроде отступов или цвета. В панели «Элементы» сбоку есть вкладки «Стили» (Styles) и «Вычислено» (Computed), позволяющие динамически изменять стили, примененные к выбранному элементу в панели «Элементы», и даже находить источник стилевого правила. Это также позволяет легко фильтровать стили, добавлять/удалять классы (вкладка «:cls»), принудительно задавать состояния (вкладка «:hov»), к примеру, наведение, активное состояние и состояние фокуса. Ещё это полезно, если хотите понять, какие стили испортили раскладку, внешний вид элементов и дизайн в целом.

Просмотр примененных стилей

Иллюстрация 2. Смотрите, какие стили применены к DOM-элементам

Маленькие хитрости

  • Можете использовать стрелки клавиатуры, чтобы увеличивать/уменьшать числовые значения.
  • Можете использовать «пипетку» при установке значения цвета в некоторых свойствах.

Показать «пипетку»

Вкладка с вычисленными значениями даёт визуальное представление размера элемента по границам, внешним отступам и внутренним.

Визуальное представление размера элемента во вкладке с вычисленными значениями

Ссылка на элемент управления на стороне клиента

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

Попробуйте сделать вот что:

  • Проверьте выводимый HTML-код компонента, опираясь на приобретенный ранее опыт, полученный при проверке сгенерированного HTML компонента RadGrid
  • Получите значение атрибута ID элемента, класс которого называется так же, как компонент (то есть class="RadGrid")
  • Используйте полученное значение ID в качестве параметра для метода $find(). Метод $find() вернёт ссылку на объект компонента на клиенте.

Найти ссылку на грид

Иллюстрация 3. Ссылка на объект компонента RadGrid

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

Маленькие хитрости

  • $telerik.$(".RadGrid")[0].control возвращает ссылку на клиентский объект первого компонента RadGrid на странице. Часть $telerik.$(".RadGrid")[0] возвращает элемент, который мы искали для получения его ID.

Автодополнение IntelliSense для объектов на стороне клиента

Результатом метода $find() будет объект RadGrid, и теперь, получив ссылку на компонент, можно видеть его API с помощью подсказки автодополнения. Чтобы увидеть «IntelliSense», нужно просто присвоить результат переменной.

Маленькие хитрости

  • и в консоли показывают предыдущую/следующую выполненную команду
  • Ctrl+Пробел открывает меню с подсказками
  • console.table(objectReference,['index']) в консоли перечисляет все доступные свойства и методы. В Google Chrome можно не писать console., а просто использовать table(objectReference,['index']).

Показать Api и получить Intellisense

Иллюстрация 4. Показать Api объекта компонента Grid и увидеть подсказки автодополнения

Отладка JavaScript

Когда поведение страницы, функциональности или компонента кажется странным, эти навыки отладки помогают изучить и понять, что пошло не так, и исправить это.

Есть несколько различных подходов для активации отладчика в функции JavaScript:

  • Добавить оператор debugger; в объявлении функции. К сожалению, это сложнее со встроенными функциями готовых компонентов, поскольку не всегда есть доступ к исходному коду.
  • Вызвать debug(ссылкаНаФункцию) в консоли. Это равносильно добавлению оператора debugger; в первой строке объявления функции.
  • Добавить точки останова по номеру строки, которые предлагает отладчик Chrome. Для этого можно перейти к коду в панели «Исходники» (Sources) и кликнуть на номер строки. Левый клик мыши добавит точку останова, а правый позволит установить точку останова по условию (сработает только если данное выражение окажется равно true). Точки останова по условию весьма полезны для отладки циклов.

Добавить точку останова по номеру строки

Иллюстрация 5. Добавление точки останова по номеру строки

Маленькие хитрости

  • Ошибки JavaScript записываются в консоль. Отлавливать такие ошибки — всегда хорошее решение, поскольку они могут ухудшить производительность страницы, а то и поломать взаимодействие или функциональность приложения.
  • Чтобы увидеть в панели «Исходники» файл с функцией и подсветить строку с её объявлением, можно вывести функцию в консоли и кликнуть по ней левой кнопкой мыши. То же самое получится, если кликнуть правой кнопкой мыши на выведенную функцию и выбрать пункт «Показать определение функции» (Show function definition) из контекстного меню.
  • Используйте горячие клавиши F8 (возобновить), F10 (перешагнуть) и F11 (войти) при отладке.
  • Кликните правой кнопкой мыши на строчку кода и выберете «Продолжить досюда» (Continue to here) — это всё равно, что вставить точку останова, возобновить отладку и сразу удалить точку останова после её срабатывания
  • Кликните правой кнопкой мыши по выражению или выбранному тексту, чтобы вызвать контекстное меню с пунктами «Вычислить в консоли» (Evaluate in console) и «Добавить выбранный текст в отслеживаемые объекты» (Add selected text to watches).
  • Нажмите кнопку {}, чтобы отформатировать код в исходном файле.

Иконка «Привести в читаемый вид»

Эмуляция отображения на мобильном устройстве

Знакомы ли вам мучения с перебором разных устройств ради проверки отображения вашей страницы на мобильном устройстве? Функциональность «Режим устройств» (Device Mode, он же «Мобильный режим») позволяет тестировать отзывчивый дизайн сайта на разных размерах и разрешениях экрана, а также точно имитировать ввод мобильных устройств для событий касания, ориентацию устройств и геолокацию. В придачу он ещё изменяет строку «User-agent», имитируя запрос с мобильного браузера.

Главное здесь то, что всё это легко можно делать в отладчике Chrome, так что применяйте навыки отладки, как к сайту на компьютере. И никаких устройств подключать к компьютеру не понадобится.

Чтобы активировать мобильный режим, можно нажать кнопку «Вкл./выкл. режим устройств». Учтите, что при переключении между режимами может понадобиться обновить страницу.

Мобильный режим

Иллюстрация 6. Внешний вид браузера в режиме устройств

Маленькие хитрости

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

Просмотр сетевых запросов

Иногда нужно проверить параметры запроса к серверу, или посмотреть, что и в каком формате приходит в ответе. Для это используйте панель «Сеть» (Network).

Запросы сети

Иллюстрация 7. Просмотр сетевых запросов

Маленькие хитрости

  • Включите логирование XHR-запросов в консоли. От этого XHR-запрос в консоли станет заметнее, а с помощью правого клика мыши по результату можно сразу же переключиться на этот запрос на панели «Сеть». Примечание: не ставьте галочку «Скрыть сеть» (Hide network)
  • Установите флажок «Отключить кэш» (Disable the cache). Теперь файлы с запросами не будут кэшироваться, что избавит вас от проблем и сэкономит время, если сделанные на сервере изменения не применятся на клиенте. Ещё один способ очистки кэша — обновить страницу с помощью Ctrl+F5 вместо F5.

Включение логирования XHR

Можно имитировать медленное соединение, что неплохо эмулирует работу мобильного интернета, выбрав другой пункт в выпадающем списке «Онлайн» (Online) во вкладке «Сеть».

Эмуляция медленного соединения

Заключение

Отладчик Chrome — еще один мощный инструмент в арсенале разработчика. В данной статье мы познакомились со множеством полезных приёмов отладки, которые повысят вашу продуктивность и позволят лучше понять поведение ваших веб-приложений и компонентов. Мы научились просматривать, отлаживать их и устранять в них неполадки, а также менять их внешний вид на лету прямо в браузере.

Однако, это лишь малая часть арсенала разработчика. Какие ещё инструменты и приёмы вы используете? Будет здорово, если вы поделитесь секретами из своего собственного репертуара в комментариях ниже.

Читайте нашу следующую статью из этой серии, чтобы узнать еще больше хитростей и приёмов из наших собственных практик разработки.

P.S. Это тоже может быть интересно:

6 комментариев

    1. Во-первых, для новичков и многое из описанного как минимум неочевидно. А во-вторых, это только первая часть, вот-вот будет вторая! :)

  1. Расскажите лучше про Network, debbager и реальную отладку. А хитростей я тоже не увидал(

  2. меня интересует другое, как транслировать сайт в процессе верстки на мобильное устройство?? не эмуляция а прямая трансляция, я пробовал трансляцию через гуглхром, но там он наоборот транслирует страницу с телефона на компьютер, а мне надо транслировать  страницу с компьютера в процессе верстки на телефон

    1. Чтобы видеть сайт на мобильном устройстве я просто захожу на телефоне в браузер и ввожу там в строке где вводят url  ip-адрес сервера в котором и веду разработку. Не localhost, а конкретно ip-адрес (типа 192.168.1.100:3000)  — в примере в предположении, что мой комп, где запущен сервер разработки имеет адрес 192.168.1.100 и порт 3000 (в node задаётся при создании сервера http).  Контекст всего этого — получаю интернет через wifi-роутер, мой рабочий ПК и мобильное устройство подключены к этому wifi-роутеру. Рабочий ПК — можно по wifi или по проводу, лишь-бы оба ПК и мобильное устройство были в одной сети. А сеть эту выдает wifi-роутер.

Оставить комментарий

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

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