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

Вкладка «Источники» в Google Dev Tools - отличная площадка для тестирования нового кода. Он позволяет выполнять код и отслеживать переменные и свойства на каждом этапе выполнения. Это неоценимо для отладки кода.

Попробуй

Вы можете попробовать:

  • Открытие консоли разработчика (Hit F12)
  • Откройте вкладку Sources
  • Нажмите + New Snippet
  • Теперь вы можете добавить любой код, который хотите.

В этом случае я пробую реализацию Фибоначчи с динамическим программированием. (Это взято из Руководства по реализации мемоизации в javascript.)

Допустим, я хочу посмотреть, как работает этот код. Я могу настроить код на паузу в определенных точках выполнения, используя точки останова. Я могу использовать несколько разных типов точек останова. Точка останова, на которую я обращаюсь сегодня, самая популярная: точки останова по строкам кода.

Примечание. Точки останова можно добавить только в определенные строки кода.

Теперь я могу запустить этот код, нажав Run snippet.

У меня есть несколько вариантов на каждом этапе, когда он останавливается:

  1. Возобновить выполнение скрипта
  2. Перейти к следующему вызову функции
  3. Перейти к следующему вызову функции
  4. Выйти из текущей функции

Подробное описание различий этих действий можно найти на странице разработчика Google.

Самое важное, что нужно знать:

Используйте step into в качестве типичного действия «по одной строке за раз», поскольку оно гарантирует выполнение только одного оператора, независимо от того, в какие функции вы входите и выходите.

  • Step over выполняет следующую строку и останавливается на следующей строке.
  • Step out завершает оставшуюся часть функции и останавливается на следующем операторе.

Как просматривать свойства и переменные

Весь смысл использования точек останова в том, что они позволяют вам проверять все определенные в настоящее время свойства. Вы даже можете редактировать свойства в скрипте на лету.

Например, я могу изучить свой memo объект и проверить его свойства.

Важно отметить, что вы можете видеть только область видимости (и стек вызовов), когда программа приостановлена.

Стек вызовов

Я также вижу стек вызовов на левой панели выше. Стек вызовов перечисляет все вызванные функции, причем самые последние находятся вверху. В данном случае это может показаться бесполезным, потому что все недавно вызванные функции имеют одно и то же ничем не примечательное имя f! Однако я могу щелкнуть эти ранее вызванные функции, чтобы увидеть состояние переменных и объектов в это время.

Заключение

Использование точек останова, проверка области видимости и стека вызовов - все это мощные инструменты для отладки программ. Но они также являются бесценными инструментами для понимания кода, который вы писали не сами! И они только поверхностно относятся к возможностям Google Dev Tools.

Вы можете найти больше сообщений о веб-разработке на моем сайте! 🔧🚀 😍