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

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

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

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

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

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

Через настройки браузера

Перед тем, как вызвать консоль, следует перейти на любой сайт, так как консоль просматривает код сайта и в пустой вкладке открыть ее будет невозможно.

1. Для начала открываем диалоговое окно путем нажатия на три линии сверху. Внутри этого окна нажимаем на «Дополнительно».
2. Далее в открывшемся окне наводим курсором мыши на «Дополнительные инструменты», после чего открывается новое окно.
3. Затем для открытия консоли нажимаем на «Консоль JavaScript». После этого в правой стороне браузера появляется небольшое окно – это и есть консоль. В консоле вы можете посмотреть какие есть картинки на сайте, открыть код сайта, а также отследить скорость загрузки страницы.

Google Chrome

Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Network .

Просмотр и изменение стилей CSS

Подсветка тега показывает его CSS свойство padding (внутренние отступы) — зелёным цветом, и внешние отступы — margin , красным.

При клике на другой элемент дерева обновляются таблицы стилей для него в правой половине окна разработки.

Возможности работы с вкладкой Styles:

• любую строчку со стилем можно включить или выключить переключателем слева от неё;
• значение свойства доступно для редактирования после двойного клика на него;
• если свойство содержит значение цвета, при клике на цветной маркер появляется Color Picker с множеством функций для настройки цвета, возможностью задать кодировку, прозрачность и пипеткой для взятия образца с любого элемента;
• можно добавить новые строчки в таблицу стилей, имитировать поведение по событиям элемента (наведение указателя, фокус и проч.), либо задать элементу другой класс.

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

Особенности вкладки элементов браузера FireFox (там она называется Инспектор), в том, что для элементов, которым назначена обработка JavaScript, показывается отметка Event, при клике на неё можно увидеть как событие, так и нужный фрагмент скрипта. Кроме того, панель инструментов русифицированная.

Особенности панели браузера FireFox

Вкладка Styles, помимо стилей, показывает ссылку на файл, откуда эти стили берутся. При клике на неё мы плавно перемещаемся на другую вкладку — Sources (источники).

Заключение

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

Но гораздо быстрее и удобнее использовать клавиши для запуска консоли в Яндекс.Браузере. С помощью определенных сочетаний можно открыть какой угодно инструмент и начать его использовать. Все нужные комбинации были нами рассмотрены.

Инструментарий разработчика

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

Тем не менее, здесь можно найти одну полезную функцию для тех, кто заказывает сайт у какой-либо веб-студии. Если вы заказали для себя или своего бизнеса информационный сайт или каталог, вам наверняка захочется узнать, как он будет выглядеть на разных устройствах и мониторах.

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

1. Что такое исходный код страницы, и как его посмотреть

Исходный код страницы отображается как набор HTML-описаний, CSS-стилей и Java-скриптов. Это список команд, которые сервер передаёт браузеру в ответ на запрос пользователя. Посмотреть можно код практически любой страницы, даже не являясь владельцем сайта, но внести постоянные корректировки в код могут хостинг-провайдер, владелец сайта или администратор.

1.1. Как открыть код страницы

Перейдите на страницу, которую нужно проанализировать. Для отображения кода используйте сочетание клавиш Ctrl + U . Откроется подробное описание страницы в формате HTML-разметки, тегов и скриптов.

Код страницы включает:

• названия title, description;
• данные микроразметки Schema.org, Open Graph или других словарей;
• данные JavaScript;
• язык отображения контента на странице;
• подключенные счётчиков аналитики, генераторов заявок и других сервисов;
• исходящие ссылки на другие страницы и сайты;
• расположение картинок, заголовков и текстовых блоков;
• размеры и тип шрифтов, цвета элементов.

Для детального анализа откройте код страницы вместе с инструментами разработчика. Это можно сделать в любом браузере через настройки или сочетание клавиш Ctrl + Shift + I . Например, в Яндекс.Браузере нужно открыть меню параметров, выбрать дополнительные инструменты и пункт «Инструменты разработчика».

Инструменты для вебмастеров появляются в том же окне рядом с открытой страницей.

При наведении курсора мыши на участке HTML в тексте слева подсветится элемент, который описан этим участком. Для более подробного анализа данных выберите один из разделов в верхней правой части окна:

• Elements → описывает все элементы страницы.
• Console → выявляет возможные и критические ошибки кода.
• Sources → показывает содержимое файлов на странице.
• Network → указывает код ответа сервера, время загрузки страницы и ее размер.
• Security → отображает информацию о сертификате SSL.
• Audits → позволяет провести технический аудит мобильной или десктопной версии страницы.

Дальше рассмотрим, как открыть исходный код страницы в разных браузерах.

1.2. Как посмотреть исходный код страницы в браузере Google Chrome

В меню настроек в правой верхней части экрана выберите «Дополнительные инструменты», затем пункт «Инструменты разработчика».

Выбрать соответствующий пункт можно также в контекстном меню правой кнопки мыши.

1.3. Как посмотреть исходный код веб-страницы в Mozilla Firefox

Зайдите в «Инструменты» → «Веб-разработка» → «Исходный код страницы».

1.4. Как посмотреть исходный код страницы в браузере Opera

Нажмите в верхней панели «Меню» → «Разработка» → «Исходный код страницы».

1.5. Как посмотреть исходный код страницы в Safari

Откройте раздел «Разработка» в верхнем меню браузера.

Safari, кстати, ещё отображает коды веб-страниц через смартфон. Зайдите в параметры мобильного браузера и выберите «View Source».

1.6. Как посмотреть исходный код страницы в Microsoft Edge

В Microsoft Edge источник страницы открывается через параметры (три точки) → «Дополнительные средства» → «Средства разработчика».

В каждом браузере также доступен просмотр кода элемента: логотипа, картинки, заголовка. Для анализа HTML-разметки отдельного объекта необходимо навести курсор и выбрать в контекстном меню правой кнопки мыши пункт «Исследовать код элемента».

1.7. Как посмотреть исходный код страницы с помощью Netpeak Spider

1. Если вам нужно посмотреть код уже проскариванного краулером URL, выделите его и воспользуйтесь комбинацией клавиш Ctrl + U либо откройте контекстное меню и выберите пункт «Исходный код и HTTP-заголовки».

Затем откроется окно инструмента, где вы можете детально изучить исходный код.

Чтобы посмотреть код страницы, которая не была просканирована Netpeak Spider, откройте инструмент через меню «Запустить».

Вставьте нужный URL и нажмите «Старт» для начала анализа.

Как быстро открывать консоль в Яндексе?

Если хотите воспользоваться перечисленными функциями браузера быстрее, то можете использовать горячие клавиши:

• Что посмотреть код страницы, нажмите сразу на клавиши «Ctrl» и «U».
• Чтобы воспользоваться «Инструментами разработчика», нажмите вместе на «Shift», «Ctrl» и «L».
• Для открытия консоли и просмотра логов ошибок при работе скриптов нажмите сразу на клавиши «Shift», «Ctrl» и «J».

Описание элементов панели разработчика

Пришло время подробнее разобрать все вкладки в консоли разработчика и их функции. На подробное описание уйдёт очень много времени, поэтому мы расскажем вкратце о роли каждой из них.

Вкладки панели разработчика:

• «Elements» отображает структурированный HTML-код. В нём поддерживается точная структура кода и правила вложений. Помимо HTML-кода, здесь отображается стили CSS для каждого блока или элемента. Позволяет понять структуру, посмотреть классы элементов и заданные им стили;
• «Console» отображает ошибки в коде страницы и позволяет запускать собственноручно написанный JavaScript-код, который моментально обработается в браузере;
• «Sources» – это вкладка, на которой собраны все подключаемые к ресурсу файлы с JavaScript и CSS-кодом. Позволяет посмотреть, как локально подключаемый код, так и файлы, размещённые на других ресурсах (это может быть JQuery, метрика Google, Yandex и другие файлы тем, скрипты);
• «Network» является очень важной вкладкой, так как информацию с неё можем использовать для увеличения быстродействия сайта. Здесь отображается время, необходимое для загрузки медиаконтента и внешних JS-файлов. Если на сайте используются картинки в высоком разрешении или они загружаются с внешнего ресурса, сайт начнёт дольше прогружаться. На данной вкладке показывается, какой именно контент приводит к замедлению веб-ресурса;
• «Performance» – это страница для подробной проверки производительности ресурса. После процедуры тестирования веб-сайта появляется статистика по каждому элементу страницы с полной информацией по скорости загрузки;
• «Memory» является аналогом предыдущей вкладки, но в ней отображается информация по весу страницы. Данные можем развернуть и подробно изучить вес всех элементов страницы. Учитывается не только вес картинок или текста, но и всех объектов, HTML- и CSS-элементов и т.п.;
• «Application» предоставляет доступ ко всем хранилищам: cookie, cache, локальному хранилищу, сессиям, шрифтам, скриптам и прочему. Ещё здесь есть полезный инструмент «Clear Storage», он предназначен для очистки всех хранилищ;
• «Security» предлагает информацию по сертификатам безопасности и надёжности подключения;
• «Audits» – это инструмент для быстрого аудита сайта. По окончанию работы показывается результат в 5 категориях: «Производительность», «Прогрессивность веб-приложения», «Удобство использования», «Лучшая практика» (подсказки по улучшению страницы) и «SEO».

Еще пара моментов:

• До названий разделов есть ещё 2 кнопки: с изображением блока со стрелкой, а также картинка мобильного телефона, планшета. Они находятся в самом начале списка вкладок. Первая кнопка помогает моментально переходить к коду конкретного элемента, выбранного на странице (все блоки на сайте начинают подсвечиваться при наведении на них курсора). Кнопка с мобильным телефоном отвечает за отображение страницы на устройствах с разной диагональю;
• На панели могут размещаться и другие вкладки, генерируемые приложениями на компьютере или расширениями самого браузера.

Теперь мы знаем зачем нужна и как открыть консоль в Яндекс браузере, а также вкратце познакомились с функциями каждого элемента из инструментов разработчика. В полной мере используя данное средство для разработки, появляется возможность качественнее и быстрее разрабатывать веб-сайт. Обычным пользователям консоль полезна для предоставления скринов о неисправностях сайта и очистки временных данных.