Автор оригинала: Lucian Daniel Crisan.
Цель
Отладка JavaScript Code с Chrome devtools и добавьте больше кода на существующей странице во время отладки. Он показывает новый способ инъекций кода и дает вам возможность не прыгать в редактор.
График
Два дня назад я искал, чтобы найти решение для проблемы алгоритма. Я приземлился на странице, где я обнаружил функцию, но одновременно хочу проверить код и понять, как он работает (отладки). Тогда я стал еще более амбициозным: я хотел проверить функцию на той же странице, на которой я работал, поэтому мне пришлось найти способ отладить его. И вот идет решение, которое я бы счастлив поделишься с вами.
Чтобы продемонстрировать, я разделил учебник на две части: * отладка в JavaScript Code в реальном примере * Загрузить код JavaScript с использованием функций фрагментов из Chrome devtools
PS: Если вы уже являетесь продвинутым разработчиком и были довольно знакомы с отладкой кода на JavaScript, пропустить часть 1 и перейти прямо к части 2
Требования
- Для демонстрационных причин я уже создал репозиторий GitHUB ( Нажмите здесь ), где вы можете легко найти код, используемый в этой статье
- Для отладки нам необходимо исследовать сценарий и существующую ошибку, как показано на рисунке ниже.
1. Отладка в JavaScript Code на реальном примере
Давайте возьмем очень простой экземпляр на нашем способе отладки. Представьте, что мы создали простое интерактивное приложение, которое приводит к сумма из двух чисел: Номер 1 и Номер 2 Отказ При нажатии Нажмите на сумму Кнопка, сумма входов будет отображаться. Наша ошибка раскрывает 1 +. О нее! Давайте начнем отладку, я открываю панель инструментов разработчика с сочетаниями клавиш
Command+Option+J (MAC) or Control+Shift+J (Windows, Linux)
Настройте и организуйте панель Devtools: в случае, если вы не знаете, как настроить нажмите здесь Мои настройки: Правая сторона && Мобильный отзывчивый взгляд Я хотел бы сделать сайт отзывчивым на мобильном представлении, чтобы получить все на одном экране. (Мой дисплей ноутбука – 14 “)
В Devtools моя цель – найти функцию, ответственную за нажав кнопку Нажмите на сумму * Перейдите в панель источников и проверьте, если файл Script.js существуют Давайте посоветуем Script.js это большой файл и содержит сотни линий кода. Простой способ отслеживать код, используя Прослушиватель событий прозверенные точки (Проверьте картинку ниже) * Прослушиватель событий прослушивателя → Мышь → Нажмите Я хочу поймать функциональность, когда кнопка нажала и Нажмите событие был стремительно.
Devtools Приостановит приостановку кода после нажатия кнопки.
Я ударил Нажмите на сумму Кнопка devtools делает паузу выполнения кода и выделяет строку кода. В этом примере выделенная строка показана во второй строке. Если код не приостановлен в правильном месте, пожалуйста, используйте Режим браузера Incognito или панель источников devtools. Для случая с Источники Панель, нажмите Шаг в следующую функцию Вызов или Шаг по следующей функции Вызов пока не найду правильную строку. (Проверьте картинку ниже) Почему?
Когда любой узел из DOM нажимается, и этот узел имеет обработчик щелчков, Chrome devtools автоматически делает паузу на первой строке обработчика этого узла. Я в Script.js Файл (см. Ниже образа). Здесь мы можем увидеть две области. Левая область отображает исходный код Script.js файл. Я настрою два точка останова от нажав на линии кода. Первая точка останова находится в 6 ряд Как вывод Обновления () Функция и второй в 19 ряд где функция Обновления () называется.
Намекать:
Позиционирование точки останова – Если вы хотите убедиться, что код блока внутри функции работает нормально, вставьте точку останова в конце функции для просмотра переменных Правая область отображает информацию и используется для отладки (проверьте изображение выше). Там вы могли бы увидеть дополнительную информацию, такую как: стек вызова, состояние переменных (глобальных и локальных), количество точек останова в вашем приложении и т. Д. (Хотите знать функции действий отладчика, проверьте официальный видео )
После того, как я вставил точку останова, я проследил код и проверил сумма Переменная. Для отладки я использовал функциональность Смотреть Чтобы проверить в режиме реального времени, скрепляя операцию конкатенации и не численно.
Необходимо исправить идентифицированные Ошибка Отказ В этом случае, применяя выражение с использованием Номер Функция, я решил решить ее на вкладке консоли. Код отлично работал, поэтому я решил обновить его в коде (линия 18) и убедитесь, что изменения были сохранены (Ctrl + S) Отказ Я также убедился, что я отключено точки останова.
Последнее, но не самое меньшее, не забудьте проверить. В моем случае функция Обновления () Работал как ожидаемый 😊 и да, вы только что исправили проблему на местном уровне, убедитесь, что отредактированный файл также сохранен в проекте.
2. Введите код JavaScript с использованием функций фрагментов из Chrome devtools
Теперь, по реализации, которую мы хотим проверить другую функцию. Более конкретно, мы хотим добавить вычесть функциональность. Существует два способа реализации: либо вы можете выбрать вставить код в файл Scrapts.js и убедитесь, что изменения не испортивают существующий код. Или вы можете записать дополнительную функцию в новый файл, сохраняя текущий код очистить и повторно использовать новую функцию в разных вызовах. Это достигается с помощью функции фрагментов из панели источников.
Для моего примера я написал новый JavaScript UpdatesUbtract () функционировать и сохранить ее в Dev-start файл. Я также позаботился о добавлении точки останова, чтобы проверить ли Всего Переменная работает должным образом. Тогда я позвонил UpdatesUbtract () Функция из Script.js вместо Обновления () и сохранил это.
Как только команда запуска была поражена, Dev-start Сценарий будет автоматически вводиться на сайт. Чтобы проверить новую функциональность, я вставил два новых значения, 3 и 2 и нажал на Нажмите на сумму кнопка. Это с 10+ годами опыта работы с полным стеком разработчика. Ранее тренер реагирует/nodejs. Увлечен реагированием, реагировать VR и их экосистему .akpoint там уже. Так же применяются же правила отладки, описанные в части 1. Вывод функции покажет правильный результат 1 Отказ С этим в виду, я более уверен в отладке, не имеет?
Что-то, что нужно взять:
Ну, любой из вас может предложить, чтобы я мог легко писать и проверить новую функцию непосредственно в консоли.
Мы все понимаем ограничения консоли: Там нет опыта отладки Отказ Используя Фрагменты Функция, которую вы можете легко отладки любой сложной функции, которая вызывается в итерациях из нескольких случаев и свободное время, ищенное альтернативы. По мере увеличения сложности приложений JavaScript разработчики нуждаются в мощных инструментах отладки, в качестве случая фрагментов, чтобы помочь им найти проблему и решить ее быстро и, пожалуйста, не использовать так много “console.log ()”
**> **
Обо мне
Полнораздел разработчик с 10+ лет опытом. Ранее тренер реагирует/nodejs. Увлечена реакцией, реагировать VR и их экосистему.