Chrome DevTools. Инструменты JavaScript разработчика. Блог 3.

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


Итак заходим на любой сайт в браузере Google Chrome, например, на «http://3wblog.org/» и нажимаем клавишу F12.  Появляется панель Chrome DevTools.

Рассмотрим кнопки навигации панели Chrome DevTools.


1. В верхнем углу слева находится кнопка «Select an element in the page to inspect it«.
Она активирует возможность выделения элементов. После ее нажатия появляется возможность выбрать любой элемент на странице сайта. А код выбранного элемента отображается на вкладке Elements панели Chrome DevTools, в левой колонки внутри DOM дерева. В правой колонке видны все стили применяемые к данному элементу.

2. Следующая кнопка «Toggle device toolbar» переводит в режим позволяющий выбрать нужное устройство. Это нужно для адаптивных интерфейсов, если предполагается использование программного продукта на компьютере, мобильных телефонах, планшетах и т.д. В этом режиме можно увидеть как сайт будет выглядеть на различных устройствах. После выбора этой кнопки вверху страницы появляется дополнительная панель управления.

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

— В выпадающем списке на панели управления в самом низу есть подпункт «Edit«, выбрав его, в области Chrome DevTools появится меню редактирования устройств. Тут можно добавить дополнительные устройства в список подменю, или наоборот удалить.
Если из выпадающего списка, на панели инструментов Chrome DevTools, выбрать пункт «Responsive«, то нужное расширение можно задать вручную.

3. С права, на панели инструментов Chrome DevTools, находится кнопка в виде крестика которая закрывает данную панель.
4. Рядом с кнопкой закрывающей Chrome DevTools находится в виде троеточия кнопка открывающая перечень функций:

  •  Dock side — предлагает места расположения Chrome DevTools (слева, справа, внизу, или в отдельном окне)
  •  Hide console drawer/show console drawer — скрывает/показывает консоль в нижней части окна
  •  Search — появляется вкладка глобального поиска. Тут можно делать поиск по коду открытой страницы или по всем файлам, которые подключены к ней.
  •  More tools — дает возможность добавить в нижнюю панель другие вкладки с полезным функционалом.
  •  Shortcuts — открывает перечень горячих клавиш в Chrome DevTools.
  •  Settings — открывает настройки Chrome DevTools. В основном тут настраивается внешний вид панели.

 

Были рассмотрены кнопки слева и с права в верхней части Chrome DevTools. Теперь на очереди средняя часть.

Вкладки Chrome DevTools:

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

  •  Addattribute — добавляет атрибут к элементу.
  •  Edit as HTML — редактировать полностью HTML код этого элемента.
  •  Hide element — скрывает элемент.
  •  Expand recursively и collapse children — свернуть и развернуть элемент со всеми его потомками.
  •  Force state — добавление элементу псевдоклассов,  для проверки его поведения.
  •  Scroll into view — после выбора этого пункта, страница проскролится к выбранному элементу.
  •  Break on — создает точку остановки внутри дерева DOM это нужно при отладке.

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

В верхней части области со стилями расположены кнопки для добавления псевдоклассов, классов и селекторов.

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

Вкладка Elements, во второй колонке, имеются следующие вкладки:

  •  Styles
  • Computed


Тут продублирована блочная схема и собраны воедино все стили которые относятся к выбранному в DOM дереве элементу.

  • Event Listeners — тут перечислены все события навешанные на этот элемент или события навешанные другим элементам, но всплывающие через данный элемент.
  •  DOM Breakpoints — отображаются точки остановки, созданные для данного документа.
  • Properties — перечислены все свойства и их значения выбранного элемента DOM дерева.

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

Информация представлена в виде таблицы, в ней можно найти:

  • Как называется файл.
  • Тип файла.
  • Статус который отдает сервер после получения запроса на файл.
  • Инициатор — это тот кто вызывал файл.
  • Размер файла.
  • Время загрузки файла.
  • Waterfall — позволяет отследить последовательность загрузки файлов.

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

А так же тут есть DOM Content — Loaded — время загрузки всего HTML и строительства DOM дерева. Последняя цифра Loaded — загрузка всех ресурсов для отображения страницы. Анализируя данную таблицу можно оптимизировать скорость загрузки страницы.
Над таблицей находится строка с инструментами для фильтрации данных. Тут можно отфильтровать файлы по имени и регулярному выражению. Там же есть уже заготовленные фильтры по типам данных.
Над фильтрами находится панель с инструментами и полезными функциями:

  • Record network log — эта кнопка по умолчанию включена, она записывает всю историю загрузок.
  • Clear — очистка истории загрузок.
  • Capture screenshots — запись скриншотов. С помощью этой функции можно отслеживать этапы загрузки страницы. Видеть как страница выглядит на различных этапах. Скриншоты создаются в ключевые моменты на протяжении загрузки. Для использования нужно включить эту кнопку и перезагрузить страницу. После этого появятся скриншоты. Для детального их рассмотрения, нужно кликнуть мышкой, дважды, по скриншоту и он отобразится в сплывающем окне.

  • Filter — скрывает/показывает строку с фильтрами.
  • Кнопки управления отображением «Use large request rows» — добавляет дополнительную информацию о файлах в таблицу. И «Hide overview» — показывает общий таймлайн страницы. Там можно выделить участок и в таблице останутся файлы загруженные в выделенный промежуток времени.

 

  • Опция Preserve log — очистка информации при переходе на другую страницу.
  • Опция Disable cache — использовать или нет кэш браузера. Эта опция помогает отследить скорость загрузки страницы.
  • Опция выбора скорости — имитирует скорость соединения пользователя. Можно выставлять скорость соединения 3G. Далее перезагружаем страницу и видим какая скорость загрузки страницы на мобильных устройствах.
  • Опция Offline — эмитирует отключение интернета.

 

3. Console — основной инструмент для разработки. Тут выводятся сообщения о работе вашего кода, ошибки и логи добавленные разработчиком. В консоли можно писать и исполнять JavaScript код. Для того чтобы очистить консоль можно нажать кнопку очистки в левом углу панели инструментов для вкладки Console — «Clear console«. Или же можно прям тут в консоли прописать функцию console.clear();.
Методы консоли:

  • console.error() — для вывода ошибок, которые подсвечиваются красным.
  • console.log() — для вывода сообщений, которые мы хотим увидеть в консоли при выполнении скрипта. В основном используется при отладке.
  • console.warn() — показывает сообщение в консоль и подсвечивает желтым цветом.
  • console.assert() — нужен для проверок, принимает два аргумента. Первый это условие, а второй текст ошибки. Если условие равно false, то текст выводится.

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

В консоли можно группировать вывод, для этого есть метод console.groupEnd(). Такие методы упорядочивают визуально вывод логов.
Можно выводить в консоль HTML.  Это будет выглядеть примерно так:

console.log(document.body.firstElementChild)

Тоже самое можно сделать методом console.dir(), но этот элемент будет в JavaScript представлении, у него будут видны все его свойства и методы.
С помощью метода console.time() можно подсчитывать время затраченное на выполнение кода. Перед началом операции прописывается этот метод с названием лога, после выполнения операции нужно вызвать timeEnd();. Когда код выполнится, в консоль выведется оповещение содержащее время выполнения кода в миллисекундах.

Выделение элементов.

В консоли имеются методы для выбора элементов по их селектору.
Например $(‘#login’) вернет первый элемент соответствующий заданному селектору. И это не jQuery, а методы консоли Google Chrome.
Метод $$(«.ui_tab») вернет массив элементов по заданному селектору.

4. Sourcers — тут можно увидеть все файлы подключенные к странице и просмотреть их содержимое.

А если тип файла CSS или JS, то можно прям тут их редактировать. И если нужно скопировать или сохранить его как новый файл.
Тут есть возможность создавать точки остановки — брейкпоинт. Выбирается строчка, отмечается как точка остановки (на номере строчки мышкой нажать). Когда код будет выполнятся, то выполнение остановится на этой строчке. Эти точки удобны при отладке. Так же их можно создавать внутри из кода. Для этого в коде, где нужна будет остановка прописать команду debbuger. Как только исполнение кода дойдет до точки остановки, все замрет и далее код не отрабатывает. Чтобы продолжить исполнение кода нужно нажать на стрелку и выполнение будет возобновлено до следующей точки остановки, если ее нет то выполняется весь код.

Справа в самой последней колонке вкладки Sourcers находится колонки навигации. С помощью их можно останавливать исполнение, переходить к следующей точке или выключить все существующие точки.
5. Memory — тут можно отследить нагрузку на ваш компьютер, когда выполняется код.

Heap Snapshot — выводит распределение памяти среди объектов в вашем коде и DOM элементы к ним относящиеся.
Allocation instrumentation time line — распределение памяти между переменными в коде.
Все это нужно чтобы видеть какие части кода оказывают наибольшую нагрузку на устройство в котором исполняется код.

6. Application — тут видна информация о хранилищах которые нам доступны:

  • Local Storage — можно увидеть какие переменные хранит страница и их значения.
  • Session Storage — тут тоже хранятся данные по принципу ключ — значение. Это данные сессии пользователя.
  • Cookies — хранилище в котором хранятся куки.

На этой вкладке можно также просмотреть Cache Storage.
Если в приложении используется какие-либо из этих хранилищ, то их содержимое можно увидеть в этой вкладке.

7. Security — тут можно ознакомится, если он есть, с протоколом безопасности. Здесь имеется сертификат данного подключения.

8. Audits — на данной вкладке можно найти некоторые проблемы сайта. Проверяется включено ли сжатие, кэширование, и выявляются не использованные CSS правила. С помощь этой вкладки выявляются проблемные места страницы.

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