Как я отлаживал свой код в JavaScript, используя фрагменты из Chrome DevTools

Цель

Отладка кода JavaScript с помощью Chrome Devtools и добавление дополнительного кода на существующую страницу во время отладки. Он показывает новый способ внедрения кода и дает вам возможность не заходить в редактор.

График

Два дня назад я искал решение проблемы с алгоритмом. Я попал на страницу, где обнаружил функцию, но одновременно хотел протестировать код и понять, как он работает (отладка). Затем я стал еще более амбициозным: я хотел протестировать функцию на той же странице, над которой работал, поэтому мне нужно было найти способ ее отладки. А вот и решение, которым я с радостью поделюсь с вами.

Чтобы продемонстрировать, я разделю учебник на две части:
* Отладка кода JavaScript на реальном примере
* Внедряйте код JavaScript, используя фрагменты функций из Chrome DevTools.

PS: если вы уже являетесь продвинутым разработчиком и хорошо знакомы с отладкой кода на JavaScript, пропустите часть 1 и сразу переходите к части 2.

Требования

1. Для демонстрации я уже создал репозиторий GitHub (кликните сюда), где вы можете легко найти код, используемый в этой статье
2. Для отладки нам нужно исследовать сценарий с существующей ошибкой, как показано на рисунке ниже.

1. Отладка кода JavaScript на реальном примере

Давайте возьмем очень простой пример нашего способа отладки. Представьте, что мы создали простое интерактивное приложение, результатом которого является сумма из двух чисел: Номер 1 а также Номер 2. При нажатии Нажмите, чтобы подвести итоги кнопка, сумма входов будет отображаться. Наша ошибка показывает 1 + 1 = 11.О, нет!
Начнем отладку, я открываю панель инструментов разработчика с помощью сочетаний клавиш

Command+Option+J (MAC) or Control+Shift+J (Windows, Linux)

Настройте и упорядочите панель DevTools: если вы не знаете, как настроить, нажмите здесь
Мои настройки: правая сторона && мобильное адаптивное представление, Я хотел бы сделать веб-сайт адаптивным в мобильном представлении, чтобы все отображалось на одном экране. (экран моего ноутбука 14 дюймов)

В DevTools моя цель найти функцию, отвечающую за нажатие кнопки Нажмите, чтобы подвести итоги
* Перейдите на панель источников и проверьте, script.js существует
Предположим, script.js это большой файл, содержащий сотни строк кода. Самый простой способ отследить код — использовать Точки останова прослушивателя событий (проверьте картинку ниже)
* Точки останова прослушивателя событий → Мышь → щелчок
Я хочу поймать функциональность при нажатии кнопки и событие щелчка был запущен.

DevTools приостановит выполнение кода после нажатия кнопки.

я ударил Нажмите, чтобы подвести итоги Кнопка DevTools приостанавливает выполнение кода и выделяет строку кода. В этом примере выделенная строка отображается во второй строке. Если код не приостановлен в нужном месте, используйте Режим браузера инкогнито или панель «Источники» DevTools.
Для случая с Источники панель, нажмите Переход к следующему вызову функции или же Перейти к следующему вызову функции пока не найдет правильную строку. (Посмотрите на картинку ниже)

Почему?

При щелчке любого узла из DOM, и этот конкретный узел имеет обработчик щелчка, Chrome DevTools автоматически делает паузу в первой строке обработчика щелчка этого узла.
Я нахожусь в script.js файл (см. изображение ниже). Здесь мы видим две области.
В левой области отображается исходный код script.js файл. Я установлю две точки останова Щелчок в строке кода. Первая точка останова находится в 6 ряд как результат обновитьСумма() функция, а вторая находится в 19 ряд где функция обновитьСумма() называется.

Намекать:

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

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

Необходимо исправить выявленное ошибка. В этом случае, применяя выражение с использованием Число функция, я решил решить ее на вкладке консоли. Код работал отлично, поэтому я решил обновить его в коде. (строка 18) и убедитесь, что изменения были сохранены (Ctrl + S). Я также убедился, что я инвалид точки останова.

И последнее, но не менее важное: не забудьте проверить. В моем случае функция обновитьСумма() сработало, как и ожидалось 😊 и да, вы только что устранили проблему локально, убедитесь, что отредактированный файл также сохранен в проекте.

Теперь, что касается реализации, мы хотим протестировать еще одну функцию. В частности, мы хотим добавить функцию вычитания. Есть два способа реализации: либо вы можете вставить код в файл scripts.js и убедиться, что изменения не испортят существующий код. Или вы можете записать дополнительную функцию в новый файл, сохранив текущий код в чистоте и повторно используя новую функцию в разных вызовах. Это достигается с помощью функции «Фрагменты» на панели «Источники».

Для моего примера я написал новый JavaScript обновлениеВычитание() функцию и сохранил ее в начало разработки файл. Я также добавил точку останова, чтобы проверить, общий переменная работает правильно. Затем я позвонил в обновлениеВычитание() функция из script.js вместо обновитьСумма() и сохранил его.

После нажатия команды «Выполнить» начало разработки скрипт будет автоматически внедрен на сайт. Чтобы протестировать новую функциональность, я вставил два новых значения, 3 а также 2 и щелкнул Нажмите, чтобы подвести итоги кнопка. Это с более чем 10-летним опытом Freelancer Full-Stack Developer. Ранее трейнер React/NodeJS. Увлечен React, React VR и их экосистемой. Здесь также применяются те же правила отладки, описанные в части 1. Вывод функции покажет правильный результат 1. Имея это в виду, я более уверен в отладке, не так ли?

Что-то, что нужно взять на себя:

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

Мы все понимаем ограничения консоли: нет опыта отладки. С помощью Фрагменты вы можете легко отлаживать любую сложную функцию, которая вызывается в итерациях из нескольких случаев, и тратить свободное время на поиск альтернатив. По мере увеличения сложности приложений JavaScript разработчикам нужны мощные инструменты отладки, такие как сниппеты, чтобы помочь им найти проблему и быстро решить ее, и, пожалуйста, не используйте слишком много «console.log()»

**> **

Обо мне

Full-Stack Developer с более чем 10-летним опытом. Ранее трейнер React/NodeJS. Увлечен React, React VR и их экосистемой.