Дек
17
2021
0

Исправить любой баг: инструменты дебага JavaScript

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

Otus

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

Разбираться будем с Javascript в браузере, серверный Node.js не трогаем.

Из инструментов, которые нам понадобятся, это только Google Chrome. В нем полно инструментов и пока вы не меняете логику приложения, даже не понадобится ваш текстовый редактор или IDE. Разберем инструменты браузера для анализа страницы сайта.

Видео

Введение

Чтобы открыть инструменты, нажмите на странице F12, либо нажмите правую кнопку мыши на странице и там просмотр кода элемента, либо нажмите три точки у браузера, там Дополнительные инструменты, далее Инструменты разработчика.

Как открыть инструменты разработчика Chrome
Третий вариант открытия инструментов

После открытия инструментов, у вас появится примерно такая панель:

DOM в Chrome

Рассмотрим все кнопки/вкладки:

  1. Курсор на квадратике - выбор HTML элемента на странице
  2. Отображение сайта под видом других устройств. Можно посмотреть как ваш сайт выглядит на планшете, смартфоне разных моделей.
  3. Elements - DOM структура текущей страницы
  4. Console - тут можно выполнять Javascript в контексте страницы
  5. Sources - все файлы, которые используются на странице
  6. Network - список интернет запросов
  7. Performance - анализ производительности страницы
  8. Memory - информация по потреблению памяти текущей страницей
  9. Security - информация о безопасности страницы (HTTPS, сертификаты SSL)
  10. Application - работа с данными страницы. (Cookie, Localstorage и другое)
  11. Lighthouse - тот же Google PageSpeed Insight, только в вашем браузере
  12. Network Conditions - настройки работы с сетью
  13. Вкладки установленных у вас расширений

Работа с DOM

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера. Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.

DOM в Chrome

Во вкладке Elements, выбрав какой-то элемент, вы увидите картину, как показано выше.

Выделенные области:

  1. Сам элемент
  2. Его стили в порядке приоритета, тут же указано из какого файла стили и с какой строки. Можно нажать на имя файла и перейти к объявлению стилей. Стили все редактируемые, можно в режиме онлайн добавлять, менять и удалять стили сразу видя как меняется элемент.
  3. Можно включить для элемента псевдоклассы (например, hover. Будет как будто над элементом всегда висит курсор). Можно добавлять другие стили с селектором.
  4. Вкладки со стилями, событиями JavaScript и свойствами элемента.

В области 4 есть очень полезная вкладка Event Listeners. Там показываются все события, которые будут обработаны на элементе

Скажем, есть у нас выбор языка на странице, при клике не него, открывается список. Надо понять как оно работает. Часто кнопки бывают не из 1 тега, а несколько. Придется смотреть события на всех тегах кнопки.

Событий часто бывает много, нужное скорее всего то, которое подходит по селектору. Есть события с объекта document, они тоже есть в этом списке.

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

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

Event Listeners на элементах в Chrome

Console

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

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

Выполнение Javascript кода в консоли браузера
Код, запущенный из консоли, в контексте страницы

Так же в консоли можно узнать где объявлена та или иная функция. Для этого введите имя функции без скобок в консоль и нажмите Enter.

Например, мы знаем что на странице есть функция initDropdown(), но не знаем где она объявлена. Вписываем имя в консоль, получаем часть кода функции и если нажать на первую строку, то можно перейти к файлу и строке с объявлением нужного элемента.

На картинке выше цифрами обозначены:

  1. Поле ввода команд
  2. Кнопка очистки вывода консоли
  3. Выбор контекста выполнения (можно например выбрать какой-то iframe на странице и работать в его контексте)
  4. Выражения для мониторинга. Можно вписать какую-то переменную и смотреть как меняется её значение.
  5. Выбор типов сообщений для показа в консоли

Sources

Вкладка для работы с файлами страницы.

Вкладка Sources в Chrome

Области на скриншоте:

  1. Все файлы, которые подключены на странице. Можно открывать и просматривать файлы.
  2. Область со списком открытых файлов и их просмотром. Нажатием на номер строки можно добавлять точку остановки скрипта (Breakpoint). Когда выполнение дойдет до точки, Js остановится и будет ждать нажатия кнопки Продолжить.
  3. Кнопка для форматирования кода. Очень удобно, если вы открываете минифицированный файл.
  4. Управление работой дебага. Приостановить выполнение Js, перейти на следующий шаг выполнения, пропускать все точки остановки...
  5. Данные контекста. Breakpoints - список всех точек остановки скриптов.

Ниже я вставил breakpoint на функцию открытия списка языков и нажал на кнопку на странице. Выполнение Javascript остановилось. Данные контекста заполнились (отображаются локальные переменные, стек вызова функции).

Сайт остановлен через дебаггер

В момент остановки в консоли доступны переменные из текущего контекста. Например, можно вывести их содержание или изменить их. Чтобы найти место, откуда вызвана функция - смотрите Call Stack в области контекста. Чтобы понять, что будет вызвано, посмотрите код, найдите функции, которые вызовутся, введите их имена в консоли по очереди (без скобок), вам браузер покажет код функции и если нажать туда, то вы перейдете к объявлению функции, куда уже можно поставить дополнительные breakpoint'ы.

Network

Сразу всем советую выставить настройки как у меня (отметить Use large request rows, а остальное снять):

Настройки Network Chrome
HTTP запросы в браузере

На картинку выше:

  1. Фильтрация запросов. (Fetch/XHR - это Fetch и XMLHttpRequest, которые используются для Ajax)
  2. Активация записи лога запросов
  3. Очистка списка
  4. Сохранять историю после перезагрузки страницы
  5. Отключать кеширование браузеров на время работы с инструментами разработчика
  6. Имитация типов соединений. Это на случай, если вам надо протестировать ваш сайт с медленным интернет соединением.

Открыв отдельный запрос вы увидите:

  1. Информацию по заголовкам браузера и сервера
  2. Ответ сервера
  3. Информация о том, какой скрипт создал запрос (очень удобно при работе с ajax)
  4. Время, затраченное на запрос.

В старых версиях данные, отправляемые в запросе (POST) показывались во вкладке Headers, под заголовками. В новых версиях появляется вкладка Payload.

Запрос в списке браузера

Headers

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

Preview, Response

Preview, Response - две вкладки, которые показывают ответ сервера. Отличие в том, что первый вариант форматирует ответ.

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

Initiator

Initiator Chrome
На картинке показана вкладка Initiator ajax запроса из формы.

Вкладка помогает разобраться кто создает запрос. Я использую её только при работе с ajax.

Скажем, есть на странице форма, нам надо её доработать. Для этого первым делом надо понять как она работает.

Открываем вкладку Network, заполняем форму, отправляем. В списке появляется запрос, смотрим куда он отправлен и что в нем. Если запрос от яндекс метрики или гугл аналитики, смотреть его нет смысла, ищите другие запросы. Запрос можно определить по отправляемым данным (в новых версиях Chrome - это вкладка Payload)

На нужном запросе открываем вкладку Initiator. На картинке выше видим работу двух файлов - jquery.min.js и dev.min.js. В коде jquery вы ничего интересного не найдете, а вот dev.min.js в конкретном случае должен нести логику. нажимаем на файл. В файле сразу жмем кнопку Форматировать (кнопка описана в разделе Sources).

Вот и наш ajax запрос как на ладони:

Вот что мы нашли при разборе Initiator

Network conditions

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

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

Вкладка позволяет:

  1. Отключать использование кеширования браузером (пока открыты инструменты разработчика)
  2. Имитировать слабое интернет соединение
  3. Представляться другими браузерами
  4. Выбирать тип сжатия, с помощью которого будут обрабатываться ответы сервера.

User agent

Разберем как нам может пригодиться пункт User agent. Этот пункт позволяет сменить имя браузера в запросах к серверу. Имя браузера передается в заголовках, это можно увидеть открыв запрос на вкладке Network, там Request Headers.

Бывает такое, что сайт у нас выполняет разную логику в зависимости от браузера.

Разберем пример из моей статьи про закрытие индексации сайта поисковиками по User agent. Там, если в имени браузера содержится какая-то запрещенная строка, то сайт тебе не показывается.

Один из вариантов запрещенной строки - YandexBot. Впишем это в имя браузера и попытаемся зайти на сайт - получим Forbidden, что говорит о том, что сервер нас не пускает. А если поставить галочку User browser default (Использовать браузер по умолчанию) - то доступ на сайт снова появляется.

Сайт закрыт по имени браузера

Потренироваться

Чтобы знания, полученные на этой странице, не остались у вас только в теории, я создал страницу на которой вы можете применить знания на практике!

Перейти

Пожалуйста, оцените на сколько вам понравилась статья!
Голосов: 1 Среднее: 5