Я часто вижу коллег, плохо знакомых с тестовым кодом JavaScript, которые вводят журналы консоли почти в каждую строку. Хотя журналы консоли являются классическими, их просто недостаточно, поскольку ваш код становится сложным.
Фрагменты в Chrome Dev Tools позволяют отлаживать JavaScript аналогично тому, как вы отлаживаете другие популярные языки с их соответствующими IDE, например C # с Visual Studio или Java с IntelliJ IDEA.
Стоит упомянуть такие функции, как вставка (условных) точек останова, просмотр стека вызовов / локальной области видимости, оценка выражений в консоли во время отладки.
Как запускать сниппеты
- Перейдите к настройкам ›дополнительные инструменты› Инструменты разработчика. (Или просто cmd + shift + i / ctrl + shift + i)
- На внутренней вкладке нажмите на крошечную двойную стрелку (››) рядом с источниками и выберите «фрагменты».
- Нажмите «+ New Snippet» и начните писать свои функции / скопируйте и вставьте свою функцию из текстового редактора.
Вот что у вас должно получиться:
Использование отладчика
Программа, которую мы будем отлаживать, содержит функцию swapNumbers, которая принимает два числа, меняет их местами и вызывает другую функцию printResults для записи их в консоль.
Установите точку останова на любой строке, щелкнув номер строки. Другой вариант - включить оператор ‘debugger;’ над строкой, выполнение которой нужно приостановить.
- Нажмите Command + Enter, чтобы запустить программу. Программа остановится на выбранной вами точке останова.
- Нажмите «перейти» (вверху справа рядом с кнопкой возобновления), чтобы перейти к следующей строке кода. Если следующая строка является функцией, вы можете нажать «шаг вперед», чтобы пройти через выполнение функции.
- В любой момент во время выполнения вы можете навести курсор мыши на переменные / объекты, чтобы просмотреть их состояние. Если вы работаете с объектами, вы можете просмотреть ВСЕ их свойства.
- В любой момент в процессе отладки мы можем оценить выражения JavaScript в консоли.
- В приведенном ниже случае мы можем ввести «y» в консоль, чтобы оценить его.
- Стек вызовов показывает, какая функция вызвала текущую функцию. Это может быть очень полезно при отладке рекурсивных функций.
- На изображении ниже интерпретатор в настоящее время выполняет функцию printResults. Поэтому на панели Стек вызовов справа есть синяя стрелка рядом с «printResults».
- printResults был вызван swapNumbers. Следовательно, в стеке вызовов swapNumbers отображается под printResults. Я считаю, что это особенно полезно в рекурсивных функциях, чтобы отслеживать, сколько рекурсивных вызовов было сделано.
- Панель область справа показывает переменные в лексической области видимости текущей функции, а также переменные в глобальной области видимости. В лексической области видимости printResult a = 2 и b = 1.
- Мы также можем видеть, к чему относится ключевое слово «this».
Недостатки
Есть несколько ограничений на использование сниппетов.
- Вы не можете напрямую загружать файл javascript (.js) со своего локального компьютера во фрагменты. Обычно я копирую и вставляю функцию, над которой работаю, во фрагменты, тестирую ее там, а затем копирую и вставляю окончательные результаты обратно в свой редактор, когда закончу.
- Один из способов решения указанной выше проблемы - включить файл .js в тег скрипта файла index.html, а затем открыть файл index.html. После загрузки index.html запускается файл .js, который можно просмотреть на вкладке источников.
- Хотя фрагменты кода сохраняются внутри Chrome Dev Tools, я не знаю, как сохранить их на локальном жестком диске.
Подводить итоги
Фрагменты могут быть чрезвычайно мощными при работе с функциями более высокого порядка, замыканиями, рекурсией и концепциями, которые мне еще предстоит изучить!
В этом посте был продемонстрирован простой пример, демонстрирующий основные функции сниппетов. Но можно сделать гораздо больше. У Google отличная документация, и в Интернете есть масса учебных ресурсов.
Лучший способ учиться - это делать. Если вы достаточно долго поиграетесь с сниппетами, вы можете стать таким же, как я, и даже начать жить там!
