Что показывает панель elements в браузере google chrome

Обновлено: 05.07.2024

Для разработчиков важно знать и понимать как использовать браузерные стредства разработки. В этом уроке я представлю ознакомлю вас с Chrome Developer Tools. Вам необходимо освоить основы, начиная с разметки и стилизации веб-страницы.

Заметка для уже использующих вебинструменты.: Целью этого урока является базовое ознакомление с инструментами разработчика Chrome. Если вы используете другие браузерные вебинстументы, такие как Firebug в Firefox или средства разработки в IE, то многое из этой информации будет для вас знакомым.

Вступление

Инструменты разработки позволяют вам инспектировать всё что только можно на странице. Например вы можете:

Начало работы с инструментами разработчика

Обратите внимание: в этом уроке используется версия Canary Chrome. Таким образом, некоторые функции из этой статьи могут отсутствовать в Хроме.

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

Закрыть инструменты разработчика
Кнопка выбора различных инструментальных панелей (в данный момент выбрана панель Elements).
Пользовательский инструмент установленный 3ей стороной (PageSpeed).
Смена вывода инструментов разработчика.
Показывает консоль (раскажу о ней в другом уроке).
Выбор элемента в инструменте простым нажатием на него на странице.
Ошибки JavaScript на странице.
Открытие оверлея настроек.

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

Панель Elements

Панель Elements показывает разметку страницы точно так же как и рендерится она в браузере. Любое изменение сделанное с DOM через JavaScript отражаенся на элементах найденных в этой панели.

Давайте ознакомимся с этой панелью. Взляните не скрин, цифрами отмечены части панели Elements, которые поясню ниже:

Элементы, как они рендерятся всередине документа.
Стрелка показывает, что элемент имеет наследников. Позиция стрелки показывает сложен элемент или разложен.
Простые хлебные крошки начинаются с элемента документ (<html/>) и заканчиваются текущим выбранным элементом. При наведении на каждую "крошку" подсвечивается соответствующий элемент в окне браузера
Передвигаемый разделитель для разделения элементов списка вывода стилистической информации
Панели, которые содержат стилистическую (и другую) инфу.
Computed Styles показывает инфу о стилях, вычисленную браузером для выбранного элементы.
Показывает вам унаследованные стили от браузера по-умолчанию и примененные к текущему элементу
Показывает стили пользователя, такие как: стили полученные от соответствующего странице файла styles.css, стилей добавленных чарез JavaScript и стилей добавленных через инструменты разработчика
Кнопка “New style rule”. Она создаёт новое правило стиля для выбранного элемента.
Toggle Element State позволяет вам запускать состояния инициируемые пользователем, такие как :hover (при наведении пользователем курсором мышки на что-либо, :active и другие. Изображение показывате кнопку в её “on” состоянии, обычно она в "off".

Раздел font section выводит только шрифты, которые должен загрузить браузер.

Дополнительная информация

Что: Панель Элементов позволяет просмотр и редактирование элементов и стилей.
Где: Это первая панель. К ней также можно получить доступ по правому клику на странице и выбрать Inspect element.
Почему Существует множество вариантов применения. Можно изменять DOM удалением нода или добавлением нового. Разметка на стороне, панель элементов позволяет увидеть применяемые стили к определённому ноду. Также вы можете добавить или поменять стили или создать новые правила и добавить их к вашим стилям.

Изменение DOM

Изменение DOM всередине панели Elements довольно-таки понятный процесс. Для удаления нода, кликните на нем правым кликом и выберите Delete node. Очевидно, что удаление родительского нода удалит его наследников. Полезное: Вы также можете нажать кнопку Del на клавиатуре для удаления выбраного нода.

Смена типа элемента возможна при двойном нажатии на имени элемента. Например: p-тег параграфа. При смене элемента из одного в другой тим автоматически изменяет открывающий и закрывающий теги.

Добавить атрибуты можно правым кликом на элементе и выбрав Add attribute. Курсор немедленно расположится в нужном месте и вы можете начать добавлять к элементу необходимые атрибуты, например: class="title". Нажатие кнопки tab расположит курсор на следующей позиции атрибута.

Редактирование атрибутов схоже с добавлением. Найдите атрибут для редактирования и двойныи щелчком измените его имя или значение.

Редактирование сырого HTML можно сделать правым щелчком на элементе и выбрать Edit as HTML.

Нахождение элементов

Инструменты разработчика имеют в распоряжении полезные техники для нахождения элементов в документе. При наведении на элементы в панели Elements начинает подсвечиваться соответствующий элемент на странице.

Иногда искомые элементы бывают не видны, тогда спасает функция Прокрутить для обзора Scroll into view - её можно найти всередине контекст-меню.

Инструменты разработчика имеют функцию поиска. При фокусе на панели инструментов разработчика нажмите Control + f, чтобы открыть окно поиска. Либо в маках Command+Option+f ( ?? + f ) Это простое окно поиска.

Просмотр информации о стилях

Прежде чем мы перейдём к панели стилей (справа) от вкладки Elements, мы можем получить некоторую информацию о стилях прямо от элемента, если в стилях для него указаны поля, отступы и границе. При наведении на один из этих элементов даёт нам такую прямоугольную модель:

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

Давайте перейдём на панель Elements вкладка “Metrics”.

Она позволяет вам смотреть глубже и выяснять почему элемент рендерится именно так. Также это отличный инструмент для обучения; если вы ещё не видели CSS Box Model, тогда диаграма Metrics - это отличный визуальный помощник.

Панель Metrics позволяет просматривать габариты элементов, поля, границы и отступы. Обратите внимание как вы можете подсвечивать отдельные куски для визуального отображения в браузере. Диаграма Metrics также выдаёт пиксельные размеры для каждой части элемента, например правило стиля padding: 10px 5px (10px снизу и сверху, 5px справа и слева) покажут точные измерения для каждой стороны элемента.

Установка стилевой информации

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

Убедитесь, что панель Styles открыта и щелкните чуть правее фигурной скобки. Вы увидите, что курсор автоматически расположит себя так, что можно сразу написать параметр для стиля. Введите имя параметра, нажмите tab, чтобы передвинуть курсор на следующую позицию и введите значение. Я собираюсь добавить такой CSS:

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

Автозаполнение также работает и с параметрами. Например, комбинация “pos” *tab* “fi” *tab* создаст параметр стилей position: fixed. При вводе пикселей/процентов, например 15% или 10px, можно увеличивать или уменьшать эти значения используя стрелки вверх-вниз. Для увеличения на 10 используйте шифт+стрелка вверх.

Смена значений цвета возможна после его ввода и щелчке на цветном квадратике слева от значения - появится це the small, colored square to the left of the value to bring up the color picker tool. You can also toggle between color value formats by shift+clicking the small colored square.

вы можете создать новое правило стилей нажав на иконку + в панели стилей. Разметка имеющая вид:

Автоматически сегенерирует следующее:

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

Панель ресурсов

Панель Resources показывает какой ресурс использует страница. Давайте взглянем на то, как это происходит.

Дополнительная информация

Инструменты разработчика also has a search feature.

Что: Панель ресурсов показывает ресурсы, ассоциированные со страницей.
Где: Вторая панель прямо после панели Elements и перед панелью Network.
Почему: Просмотр ресурсов страницы необходим для отладки. Вы должно быть заинтересуетесь тем, какую информацию хранят вебсайты в localStorage, кукиз или другой механизм хранения данных. Дополнительно, обычные ресурсы, такие как localStorage могут быть изменены через инструменты разработчика.

Просмотр содержимого отдельного фрейма

Несмотря на нераспространённое использование фреймов в современных сайтах, необходимо понимать как инспектировать страницу с набором фреймов. В следующем изображении, обратите внимание на страницу с колонками, где каждая колонка представляет собой фрейм:

Каждый фрейм размещается в своей папке. Каждая папка содержит объекты своей страницы и можно щёлкать на каждой странице, чтобы вывести её содержимое. Просмотр содержимого HTML страницы полезно, но можно пробраться ещё глубже в страницу и просмотреть её ресурсы. JS, CSS, изображения и даже шрифты могут просматриаться! Объекты, содержащие код выводятся в просмотрщике кода, который идёт в комлекте с подсветкой синтаксиса и нумерацией строк.

Шрифты

Важно понимать, что системные шрифты, такие как Arial или Helvetica не показываются в Fonts; раздел шрифтов показывает только шрифты загружаемые браузером.

The font scales so that it can fit within the resource content area; therefore, resizing the resource content area also resizes the asset!

Изображения

Очевидно, что здесь мы обсудим просмотр изображений.

Инструменты разработчика показывают изображения в области содержимого, и изображения масштабируется согласно области содержимого. Изображения с прозрачностью (такое как представленое выше) показываются с шахматкой-бекграундом, для лёгкого его просмотра. Другой полезной информацией, такой как размеры в пикселях, размеры файла, MIME тип - выводятся после изображения.

Скрипты

При нажатии на JS файл выводится его содержимое и более ничего.

Но не разочаровуйтесь, просмотр объектов это всего лишь просмотр. В будущих уроках рассмотрим поддержку JS и возможности браузера.

Стили

Вы можете просматривать различные стили, загруженные браузером для веб-страницы.

Как и в случае с JavaScript файлами у вас немного возможностей с CSS объектами.

Ресурсы, которые не смогли загрузиться

В случае, если браузер не смог загрузить отдельный ресурс из-за проблем с сетью или ошибок разработчика.

Сохранение и просмотр Ресурсов

Каждый ресурс имеет контекст меню; при правом щелчке на ресурсе возникает меню, схожее на это:

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

Как я уже ранее говорил, вы можете просматривать информацию о куки для определённого сайта. Например, для Твиттера как показано на этом изображении:

Вы можете удалить куки правым щелчком на куки и выбрать Delete из контекстного меню.

Интересно то, как браузеры используют куки информацию для определения авторизированы вы или нет. При залогинености в Твиттере, если удалить "auth_token" и "_twitter_sess" куки, то после обновления страницы нужно будет снова ввести логин и пароль. Таким образом Твиттер хранит данные о статусе пользователя и другую важную информацию в этих куки.

Локальное хранилище

Хранение и просмотр ключ/значение пар localStorage очень просто. Давайте используем существующий сайт как пример. Следующее изображение показывает просмотр локального хранилища у Kitchen Sink Example App сделанного на основе фреймворка для мобильных приложений Sencha Touch.

При первом просмотре страницы браузер делает запрос на CSS файл. Обновление страницы происходит очень быстро потому что Sencha хранит CSS в локальном хранилище. Приложение kitchen sink имеет некоторые интересные ключ/значение пары. Например, один ключ выглядит вот так:

Значение для этого ключа начинается с:

Steve Souders написал про хранение объектов в локальном хранилище (англ.); это интересное и замечательное использование локального хранилища, которое может улучшить быстродействие сайта особенно на мобильных устройствах.

Кеш приложения

Кеш приложения сообщает браузеру какие ресурсы он должен кешировать и категория Application Cache позволяет просматривать что было закешировано.

Здесь есть три колонки которые показывают:

Resource - полный путь к ресурсу. Расширения файлов - обычно объекты и хтмл файлы. Один из ресурсов - это файл-манифест!
Type - может отличаться. Тип "Manifest" - это уникальный тип файла, который есть только у манифеста. Другой тип - explicit: ресурсы, которые явно определены в манифесте. Тип fallback показывает ресурс, который действует как резерв для другого ресурса. Тип Master - это ресурс, который запускает кеш самой страницы.
Size - размер ресурса в килобайтах или байтах.

Скоро продолжение

Во второй части рассмотрим ещё панели и сосредоточимся немного на быстродействии для улучшения пользовательского впечатления (так я перевёл UX :)

Даю ещё пару видео:

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

Как открыть инструменты разработчика

Настройки DevTools

Тема интерфейса

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

Горячие клавиши

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

Расположение панелей

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

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header , и увидим все подходящие элементы:

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

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
Открываем вкладку Console, вставляем команду document.body.contentEditable = true , нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style .

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.

Работа с вкладкой «Elements» в панели разработчика браузера

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

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

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

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

Панель разработчика есть в браузерах Mozilla Firefox, Google Chrome, Internet Explorer, Safari и Opera, но в этом материале речь пойдет об основных возможностях инструмента на примере Google Chrome. Тем не менее внешний вид и функциональность панелей в разных программах отличаются несущественно.

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

Открывается панель разработчиков клавишей F12 (в других браузерах иначе).

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

Нужно двигаться, не перескакивая, и разбирать элементы один за одним.

По умолчанию запускается вкладка «Elements», в которой содержится HTML-код открытой в браузере страницы, а также используемые файлы CSS и JavaScript. Их содержимое можно посмотреть, просто кликнув на название файла.

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

Над определенными блоками может быть написано «Inherited from». Это значит, что свойства определенного элемента были унаследованы от какого-то родительского элемента. В этом случае можно или перезаписать их здесь или нажать на указанный блок и отредактировать его правила. Но здесь нужно помнить, что изменение родительского блока может добавить изменения к другим дочерним.

Вкладку «Elements» также можно использовать, чтобы редактировать HTML. Нужно лишь кликнуть на любом элементе и выбрать «Edit as HTML». Все внесенные изменения будут видны сразу. То же актуально и для CSS. В отдельной колонке можно отредактировать конкретное правило, удалить его полностью или добавить новое. Изменения также будут отображаться в реальном времени.

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

Тем не менее все это никак не отразится на самом сайте и том, как его видят другие пользователи. Изменения отображаются только в браузере. Чтобы применить их к сайту, нужно отредактировать соответствующие файлы на сервере.

Но если файл HTML один, то стили чаще всего включают правила из нескольких файлов. Тем не менее найти их не так сложно. Рядом с каждым блоком в колонке со стилями указан не только файл, но даже строка с этим правилом. Так можно быстро найти нужное место в файле на сервере и внести изменения.

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

Вкладку «Elements» нужно освоить в первую очередь, потому что она значительно упростит процесс внесения мелких изменений во внешний вид сайта.

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

Как известно, веб-разработка делится на 2 части: frontend (фронтенд) и backend (бэкенд).

Вольно выражаясь, фронтенд это то, что работает в браузере, т.е. верстка (html + css) и браузерные скрипты (javascript).

Бэкенд — это скрипты, работающие на сервере.

В этой статье разберем инструменты разработчика (DevTools), которые встроены во все современные браузеры. Эти инструменты — незаменимая вещь для фронтенд-разработчика.

Разбирать будем на примере инструментов разработчики, которые встроены в браузер Google Chrome.

Открыть инструменты разработчика можно 3-мя способами:

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

Сначала про расположение: открыв блок инструментов в правом верхнем углу мы снова видим три точки, нажав на них можно расположить инструменты разработчика справа, слева, внизу и в отдельном окне.
См. скриншот:

Инструменты разработчика для верстальщика

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

Панель «Elements»

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

Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента.

Выбрать элемент, для просмотра его свойств, можно разными способами:

На панели «Elements» можно увидеть все css-правила, применяемые к элементу.

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

И в этом случае вкладка «Elements» просто незаменима. На скриншоте ниже показан элемент, на который действует множество правил, находящихся в разных местах и разных файлах, сразу видно, в каком файле и на какой строке находится то или иное правило:

Это очень удобно при изучении чужого кода.

Например, мы изучаем популярнейший css-фреймворк bootstrap. Среди его классов, относящихся к сетке (т.е. к позиционированию элементов) имеется класс .row. Любой, кто верстает с использованием этого фреймворка использует этот класс, практически, на каждой странице. Для чего же он нужен?

Открывает инструменты разработчика, находим элемент с этим классом, выделяем его и смотрим:

Глядя на эти правила, мы понимаем, что:

Этот класс является flex-контейнером для вложенных элементов display: flex;
Элементы, находящиеся внутри этого контейнера, будут выстраиваться в несколько строк flex-wrap: wrap;
Ну и видим, справа и слева минусовые отступы.

Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот:

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

Переключившись на вкладку «computed» можно посмотреть окончательную версию всех стилей, примененных к элементу:

Проверка разметки на адаптивность

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

Для этого мы можем использовать «Переключение в режим устройства» (Toggle device mode). Повторное нажатие на эту иконку, вернет обычный режим:

И после этого, можно выбирать какое-то устройство из списка или выбрать произвольную ширину:

Вы можете выбрать устройство и повернуть его:

В режиме устройства, можно перезагрузить страницу с эмуляцией медленного интернета, вы увидите, насколько долго грузится ваша страница, быть может стоит оптимизировать изображения? См. скриншот ниже:

Инструменты разработчика для javascript-программиста

Программирование состоит не только из написания кода. Редко случается, что мало-мальски сложный код начинает сразу работать так, как было задумано. В большинстве случаев “что-то идет не так”. Чтобы заставить программу (скрипт) выполняться так, как задумал разработчик, ее «отлаживают».

Отладка — этап разработки, на котором обнаруживают и устраняют ошибки. Часто она занимает больше времени, чем собственно написание кода.

Для фронтенд javascript-программиста средой выполнения скриптов, которые он пишет, является браузер. Дальше посмотрим какие возможности для отладки предоставляют нам «инструменты разработчика» в Google Chrome.

Панель «Console»

В принципе, при написании js-скриптов консоль, обычно, открыта всегда, поскольку любые необработанные ошибки, сразу видны. Видны файл и строка, где произошла ошибка:

Щелкнув по имени файла со строкой, мы открываем место, где произошла ошибка

Внимание! Следите чтобы все отладочные вызовы были удалены в коде, который пойдет в работу.

У объекта Console несколько методов. Все их можно посмотреть в документации, но чаще всего используется метод log.

Отладка командой debugger

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

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

Панель Sources состоит из 3-х областей:

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

После остановки можно начать пошаговое выполнение скрипта с просмотром значений различных переменных на каждом шаге.

Для этого можно воспользоваться кнопками, которые находятся вверху области Information:

Breakpoints (точки останова)

Кроме использования команды debugger, остановить выполнение скрипта в определенном месте можно при помощи так называемых breakpoints или точек останова.

Для этого переходим на уже знакомую нам вкладку Sources, если область Navigation не видна, то открываем ее нажатием на значок в верхнем левом углу:

Затем в Navigation выбираем нужный файл, в области Sources находим нужное место, и щелкаем мышью на номере нужной строки. Номер строки будет помечен синим цветом:

Таким образом мы создали точки останова. На этих строках выполнение скрипта будет останавливаться, и мы сможем просмотреть текущие значения переменных, как и в случае использования команды debugger.

Заключение

В заключение хочется сказать, что в статье рассмотрены часто используемые возможности инструментов разработчика в Google Chrome.

Однако это далеко не все возможности, которые есть у этого замечательного инструмента.

Например, на панели Network мы можем увидеть, как долго загружается страница, какие ресурсы загрузились и за какое время и многое другое. Также эта панель очень помогает при отладке ajax-скриптов.

Читайте также: