Инструменты разработчика Google дают вам возможность заглянуть в самую душу вашего кода. С большой силой приходит большая ответственность, поэтому давайте рассмотрим ее внимательно.
Вкладка «Источники» в Google Dev Tools - отличная площадка для тестирования нового кода. Он позволяет выполнять код и отслеживать переменные и свойства на каждом этапе выполнения. Это неоценимо для отладки кода.
Попробуй
Вы можете попробовать:
- Открытие консоли разработчика (Hit
F12
) - Откройте вкладку
Sources
- Нажмите
+ New Snippet
- Теперь вы можете добавить любой код, который хотите.
В этом случае я пробую реализацию Фибоначчи с динамическим программированием. (Это взято из Руководства по реализации мемоизации в javascript.)
Допустим, я хочу посмотреть, как работает этот код. Я могу настроить код на паузу в определенных точках выполнения, используя точки останова. Я могу использовать несколько разных типов точек останова. Точка останова, на которую я обращаюсь сегодня, самая популярная: точки останова по строкам кода.
Примечание. Точки останова можно добавить только в определенные строки кода.
Теперь я могу запустить этот код, нажав Run snippet
.
У меня есть несколько вариантов на каждом этапе, когда он останавливается:
- Возобновить выполнение скрипта
- Перейти к следующему вызову функции
- Перейти к следующему вызову функции
- Выйти из текущей функции
Подробное описание различий этих действий можно найти на странице разработчика Google.
Самое важное, что нужно знать:
Используйте
step into
в качестве типичного действия «по одной строке за раз», поскольку оно гарантирует выполнение только одного оператора, независимо от того, в какие функции вы входите и выходите.
Step over
выполняет следующую строку и останавливается на следующей строке.Step out
завершает оставшуюся часть функции и останавливается на следующем операторе.
Как просматривать свойства и переменные
Весь смысл использования точек останова в том, что они позволяют вам проверять все определенные в настоящее время свойства. Вы даже можете редактировать свойства в скрипте на лету.
Например, я могу изучить свой memo
объект и проверить его свойства.
Важно отметить, что вы можете видеть только область видимости (и стек вызовов), когда программа приостановлена.
Стек вызовов
Я также вижу стек вызовов на левой панели выше. Стек вызовов перечисляет все вызванные функции, причем самые последние находятся вверху. В данном случае это может показаться бесполезным, потому что все недавно вызванные функции имеют одно и то же ничем не примечательное имя f
! Однако я могу щелкнуть эти ранее вызванные функции, чтобы увидеть состояние переменных и объектов в это время.
Заключение
Использование точек останова, проверка области видимости и стека вызовов - все это мощные инструменты для отладки программ. Но они также являются бесценными инструментами для понимания кода, который вы писали не сами! И они только поверхностно относятся к возможностям Google Dev Tools.
Вы можете найти больше сообщений о веб-разработке на моем сайте! 🔧🚀 😍