Продолжаем тему инструментов разработчика в Google Chrome. Если вы не знакомы с основами, посмотрите два вводных ролика по этой теме:
Вашему вниманию предлагается набор различных функций о которых вы, возможно не знали. В этой части про то, что касается работы со скриптами на вкладках Console и Sources.
Сразу скажу, что там где я в горячих клавишах говорю Command для MacOS, на Windows вы просто заменяете это на Control.
Сгруппируем все рассматриваемые фичи в условные смысловые блоки:- то что касается DOM-дерева и общих полезных функций- функции, связанные с сетью и вкладкой Network, затем все про вкладки Console и Sources, про скрипты, в общем, и, наконец, остальные полезные фичи.
Вкладка Console
Функция Eager Evaluation (предпросмотр результатов выражений) — очень удобно при работе в консоли. Просто начинаем вводить любое выражение — типа 1 + 1 или функцию, например для конкатенации массивов [1,2].concat([3,4]), и сразу видим результат внизу. Если нажать Enter, то этот результат запишется в консоль. Если вы экспериментируете, то согласитесь, удобнее и быстрее сразу видеть результат, нежели постоянно тыкать туда-сюда команды и изменять их.
Но есть момент — предпросмотр результатов выражений не работает для тех инструкций, что меняют что-то в DOM-дереве или стилях. Такое изменение innerText покажет результат только после нажатия Enter.
Также, удобно что в консоли показываются аргументы стандартных функций браузера, типа document.body.addEventListener, [].push и CSS.supports. Для document.querySelector заселекченные ноды в режиме предпросмотра сразу подсвечиваются на странице.
И еще, можно использовать ключевое слово await, позволяющее подождать завершения выполнения асинхронной операции — например сетевого запроса через fetch:
const res = await fetch(‘https://jsonplaceholder.typicode.com/todos/1’); console.log(res)
Без await мы тут получим промис, находящийся в состоянии ожидания:
const res1 = fetch(‘https://jsonplaceholder.typicode.com/todos/1’); console.log(res1)
Обычно, чтобы использовать await, необходимо чтобы функция была объявлена с ключевым словом async. В консоли, как вы видите, это не обязательно.
Кстати, теперь в консоли можно выделять строки и осуществлять навигацию стрелками вверх и вниз. Чтобы после ввода начать навигацию, жмем Shift+Tab. Когда выделена ссылка или ресурс страницы, Enter вызывает переход в указанное место. Раскрывать вложенные сообщения можно нажатием на стрелку вправо, а закрывать — влево. Все в принципе интуитивно понятно.
Глянем теперь на некоторые возможности встроенного в браузер объекта console.
console.table выводит массив с объектами, состоящими из одного и того же набора полей, как таблицу.
console.assert выводит то, что передано вторым аргументом, если выражение или функция, переданные первым аргументом, равны false.
console.count считает каждый вывод одного и того же содержимого. Так можно посчитать сколько раз мы, скажем, заходим в цикл или функцию.
console.group … console.groupEnd позволяют сгруппировать вывод данных в раскрывающийся список, если их много.
Можно быстро сохранить ноду как глобальную переменную — буквально в один клик. Для этого жмем правой кнопкой на интересующую ноду в ДОМ-дереве и выбираем Store as global variable. По умолчанию присвоится имя temp1 и так далее при создании новых подобные переменных. Раньше же для этого приходилось выбирать ноду и писать что-то типа var node = $0, и выделенная нода помещалась в эту переменную. Сейчас же с этим проще, как вы видели.
Обратите внимание на вот эту иконку с изображением глаза. Эта функция называется Live Expresion. Буквально — живое выражение. Сюда мы можем ввести нужную нам инструкцию и в реальном времени видеть, во что она превращается при вычислении. Введем сюда например document.activeElement — показывает ноду, которая сейчас является активной, то есть в фокусе. И при нажатии клавиши Tab мы видим сфокусированную ноду — при наведении на нее курсора мыши происходит подсвечивание ее на странице. Создавать можно более одного такого выражения. Применений Live Expression можно придумать множество, так что держите эту фичу в голове.
Имеется возможность логировать в консоль все события, происходящие на той или иной ноде. Для этого сохраняем ноду в переменную и передаем в функцию monitorEvents. Все, теперь все, чтобы ни происходило с нодой, будет провоцировать вывод сообщений в консоль с названием события. Тут и хаверы, и клики, и фокусы и все остальное. Чтобы убрать это логирование, ту же ноду передаем в функцию UNmonitorEvents.
В monitorEvents вторым аргументом можно передать массив с именами событий, в которых вы заинтересованы. Или группу событий, например, мыши.
Подробности работы функции смотрите например тут https://briangrinstead.com/blog/chrome-developer-tools-monitorevents/)
В консоли можно фильтровать сообщения по вхождению того или иного слова или части слова. В поле Filter можно писать как нужное вхождение — и тогда мы получим только те, сообщения, которые его содержат, — так и НЕнужное вхождение — тогда мы получаем те сообщения, которые его НЕ содержат. Полезно, когда сообщений в консоли слишком много и нужно убрать мусор с глаз. Обращаю внимание, что в поле фильтрации входит и название файла, из которого был вызван вывод сообщения.
Кстати, у вкладки Console есть еще и выпадающая панель слева, где можно как раз фильтровать сообщения. Тут у нас все сообщения (в том числе и сообщения от сгенерированных браузером скриптов) с общим числом их. Ниже только сообщения только подключенных скриптов. Далее только ошибки — No Errors это если ошибок нет. Предупреждения.. Информационные сообщения, вроде console.log. И наконец verbose, то есть сообщения от сгенерированных браузером скриптов.
На window имеется функция queryObjects, которая позволяет собрать и выдать массив со всеми нодами, инстанцированными от одного класса. Например, input-элементы сконструированы классом HTMLInputElement. Поэтому, если мы передадим в queryObjectsссылку на HTMLInputElement, то получим массив из нод-инпутов.
Вкладка Sources
Теперь переместимся на вкладку Sources — это фактически встроенная в Хром IDE — интегрированная среда разработки. Тут тоже много полезного и интересного.
Local Overrides — это возможность модификации кода прямо на странице и показа этих изменений даже после перезагрузки. Вы знаете, что если сменить например стили в консоли на странице и перезагрузить ее, то изменения сотрутся. Для того, чтобы они сохранялись, нужно сделать следующее: на вкладке Sources, показываем панельку Overrides и добавляем папку, в которой Хрому разрешаем права на чтение и запись. А затем, все изменения в стилях будут записываться в эту локальную папку и грузиться оттуда же. Это видно по значку вот тут — наводим и видим, что оригинальный стиль указывает на локальный файл, где и сохранены наши переопределения. Чтобы отключить это, просто удаляем папку со вкладки Overrides.
Когда вы в дебаггере остановили выполнение скрипта, есть возможность не просто выполнять команды с заходом или без захода в функции, а выполнить код до конкретной строчки. Это чрезвычайно удобно при отладке, возьмите себе это на вооружение. Либо выбираем нужную инструкцию и правой кнопкой Continue to here, либо зажимаем Command и кликаем в желаемое место.
Начиная с версии Хрома под номером 65, поведение при пошаговом выполнении скрипта для асинхронных функций типа setTimeout — иное.
Как это работало ранее..
Ставим на кнопку обработчик клика и устанавливаем брейкпоинт на setTimeout, который находится внутри обработчика. Собственно, кликаем и начинаем пошаговое выполнение кода. Видно, что после первого перехода, мы попадаем на следующую за setTimeout инструкцию, так как функцию таймаута, будет выполнена не сразу, а через некоторое время. Это логично. Ну и в конце выполнения функции-обработчика клика, запускается отсчет таймаута и мы вполняем колбэк setTimeout.
А вот как это работает в новом варианте..
После остановки на setTimeout, весь код обработчика клика ниже setTimeout, выполняется без останова. А тормозимся мы на колбэке самого setTimeout, по истечении указанного вторым аргументом, времени.
Если же вы хотите в новой версии Хрома старое поведение, то нужно использовать вот эту кнопочку — Step.
А теперь очень полезная фича. Предотвращение бесконечных циклов. Если вы вошли в такой цикл, то нужно перейти на вкладку Sources и остановить скрипт, а затем его вновь запустить. Это позволит из бесконечного цикла выйти. Хотя бывает так, что все подвисло капитальнейшим образом. И тут поможет встроенный в Хром диспетчер задач. Он позволяет снести любую вкладку и получить возможность закрыть ее, без необходимости убивать основной процесс браузера со всеми остальными открытыми вкладками.`
Функция Add logpoint позволяет поставить в любом месте кода поставить вывод сообщения в консоль. Можно конечно и в исходном коде поставить console.log, но это далеко не всегда удобно и даже возможно.
Поэтому, правой кнопкой на нужной строке в любом JS-файле и вводим сообщение. В фигурные скобки можно помещать выражения и переменные, которые вы хотите вывести в этом месте. Строка с лог-поинтом помечается желтым бейджиком. Если кликнуть по нему правой кнопкой мыши, то можно временно деактивировать log-поинт — он пометится полупрозрачностью. Все проставленные лог-поинты находятся справа на панели Breakpoints, откуда их можно удалить.
В редакторе вкладки Sources есть возможность сворачивать блоки кода, как это делается в Sublime Text и других редакторах кода и IDE. Для активации этой возможности, сходим в настройки, на вкладку Preferences, там секция Sources и опция Code Folding. После отметки данного чек-бокса, можно пользоваться этой удобной фичей в редакторе.
Вкладку Sources можно использовать фактически как редактор кода, но конечно более ограниченный, чем популярные программы для этих целей.
Рассмотрим эти возможности. Откроем вкладку Filesystem на Sources и из папки на рабочем столе перетянем проект. Далее дадим доступ на запись в эту папку. Там у нас простейшие файлы index.html, style.css, script.js. Теперь откроем в браузере index.html и на вкладке Elements мы можем менять стили нод — они тогда будут записываться в style.css нашего проекта.
Также, изменение любого файла на вкладке Filesystem ведет к его перезаписи в реальном файле. Обратите внимание, что измение нод на Elements к записи в файл не приведет, так как это уже результат парсинга HTML-файла, а сам этот файл можно изменить в Sources.
Весь неиспользованный код скрпитов можно вывести через вкладку Coverage. Добраться ло нее можно или через палитру команд (Cmd+Shift+P) или через три точки в верхнем правом углу девтулзов и там More Tools. Или нажав Esc и выбрав нужную вкладку.
В общем, если нажать на иконку перезагрузки, то страница перезагрузится и мы увидим процент кода, который не был использован.
Остановим логирование и теперь можем перейти в любой файл в списке двойным кликом и увидеть какие конкретно строки были использованы, а какие нет. В целях оптимизации, код, который характерен только для определенных страниц, можно в них заинлайнить в тег <script></script>, то есть прямо в HTML. Либо некоторые части кода подгружать не сразу, а асинхронно и тогда первоначальная загрузка пройдет быстрее.
А параметр скорости первоначальной загрузки очень важен для систем анализа качества страниц, например, Google SpeedTest, что в итоге влияет на ранжирование сайта в результатах поиска.
Остальные функции
User Timing API предназначен для замеров времени. Нас интересует функция performance.mark(), позволяющая начать запись своего поименнованного определенным образом промежутка времени, показа его на вкладке Performance и отправки, скажем в сервис аналитики.
Допустим, у нас есть форма, и мы хотим замерять, сколько у пользователя занимает времени заполнение формы. Ставим обработчик ввода на все поля формы и при первичном изменении любого из них, вызваем performance.mark, начиная запись нашего таймлайна. На кнопку же отправки форма, запись заканчиваем. Далее можно вызвать отправку данных куда надо.
Метод же performance.measure (аргументы — название замера, начальная точка, конечная точка), создает на вкладке Perfomance, нашу линию, после чего мы можем ее лицезреть. Извлечение длительности производится через performance.getEntriesByName и передачу названия замера — там в массиве у элементов есть свойство duration.
Очень забавная фишка — есть возможность смотреть как анимации производятся браузером, причем делать это замедленно и видеть 3D-визуализацию.
https://material-ui.com/demos/drawers/
Здесь у нас открыта страница из документации к библиотеке Material UI. Чтобы увидеть анимации на данной странице, на вкладке Animations, уменьшаем скорость анимаций до 10%. Теперь идем на вкладку Layers и выбираем инструмент поворота. Зажимая левую кнопку мыши и двигая курсор, мы поворачиваем 3D-представление страницы и видим все слои анимации. Например, прицепленные к вьюпорту сайдбары и меню. Колесиком мыши можно зуммировать представление. А при попытке показать боковое меню компонента Material UI, мы увидим, как Хром создает новые слои анимации. Этот инструмент опять же полезен для оптимизации анимаций, однако, нужно для этого надо глубже понять, как работает браузер при их выполнении.
Вкладка Performance Monitor позволяет наблюдать за параметрами производительности на странице:- использование центрального процессора,- размер памяти, выделенной под кучу для создания переменных на странице- количество DOM-нод- количество привязанных обработчиков событийи другие метрики, с которыми можно ознакомиться в документации к Performance Monitor.
Обратите внимание, что Frames это количество iframe-ов, а не кадров в секунду. Для просмотра FPS есть отдельный инструмент — можно вывести через палитру команд.
Панель Audits это инструмент, позволяющий провести полноценный аудит страницы и выявить ее слабые места. Построена фича на основе опесорсного LightHouse.Перед проверкой выбираем, бет ли это мобильный или десктопный аудит, далее типы проверок, и задержку сети. Clear storage позволяет проверить, как страницы работает для первого визита посетителя. Если хранилище не очищать, то мы будем видеть как все работает при повторном заходе.
Ну и количество различных опций в этом отчете огромно и выходит за рамки данного видео. Возможно, мы вернемся к этой теме в других роликах.
И последнее для этого ролика — фича под названием Third Party Badges — цветные бейджики для сторонних скриптов. Активируем опцию через палитру команд. И теперь в консоли и на вкладке Network, вы будете видеть цветные бейджики напротив ресурсов и сообщений в консоли, принадлежащих сторонним относительно данной страницы доменам. Опять же — может быть полезно для того, чтобы ориентироваться в длинном списке.