Отладка со сверхспособностями
Отладка - важная часть разработки приложения, в котором вы обнаруживаете и устраняете ошибки. В этом блоге мы увидим, как мы можем эффективно отлаживать код Node.js с помощью DevTools браузера Google Chrome и кода Visual Studio.
Многие новички используют console.log() для отладки кода, что неэффективно, так как нам нужно снова и снова добавлять console.log в строки кода.
Это заставляет нас остановить приложение, добавить console.log и снова запустить приложение. Этот процесс создает ненужный код и снижает нашу продуктивность.
Инструменты отладки - спасение в этой ситуации, поскольку они предоставляют нам такие функции, как точки останова, вход / выход в функции, перезапуск и многое другое.
При необходимости мы можем приостановить выполнение и проверить переменные / объекты, а затем изменить их без перезапуска нашего приложения в любой момент времени.
Использование Google Chrome DevTools для отладки
Google Chrome поставляется со стандартным инструментом отладки Node.js, поэтому предпочтительно использовать последнюю версию Chrome.
Чтобы начать отладку, запустим наше приложение с флагом --inspect-brk.
Пример: $ node --inspect-brk server.js
Следующий шаг - перейти в Chrome, открыть новую вкладку и ввести URL chrome://inspect/.
Щелкните «Открыть выделенный DevTools для узла», чтобы начать отладку приложения. Просмотр исходного кода в Chrome DevTools займет пару секунд.
Практическая отладка в Chrome
Теперь давайте поработаем с приведенным ниже кодом, запустим приложение с node --inspect-brk server.js и откроем Chrome DevTools.
Когда мы открываем DevTools, исходный код появляется в браузере, который загружается во время работы нашего приложения и будет приостановлен на первой строке.
Нажмите кнопку воспроизведения в правом верхнем углу, как показано на изображении ниже, чтобы возобновить выполнение скрипта.
Теперь Chrome или любой другой инструмент отладки предоставляет возможность добавлять точки останова, где вы можете приостановить приложение и проверить эти переменные и функции.
Чтобы добавить точку останова, щелкните по номерам строк или в желобе, или в пустом месте. Добавьте несколько точек останова в «Get API», где мы хотим исследовать объекты запроса.
Теперь давайте назовем Get API: http: // localhost: 3000 / sam, мы сможем обнаружить DevTools, который автоматически всплывает и отображает выполнение, приостановленное в этих точках останова.
Мы можем навести указатель мыши на эти строки, чтобы просмотреть переменные или объекты, полученные в области видимости, как показано ниже.
Давайте рассмотрим некоторые важные функции, доступные в отладчике Chrome справа:
- Наблюдайте: в этом разделе мы можем щелкнуть значок + и добавить переменные, которые мы хотим отслеживать, пока мы приостановлены на точке останова. Иногда они недоступны или не определены, в зависимости от области действия и от того, не присвоено ли им значение в этой точке останова.
- Стек вызовов: просмотр списка вызовов функций.
- Область действия: в разделе области действия мы можем просматривать или редактировать переменные с локальной и глобальной областью действия.
- Точки останова: просмотр списка точек останова.
Теперь давайте посмотрим на изображение выше с кнопками со стрелками, доступными в правой части Chrome. Эти значки помогут нам ориентироваться в выполнении кода.
Эти стрелки позволяют нам:
- Перейти к следующему вызову функции.
- Перейдите к следующему вызову функции, чтобы заглянуть в эту функцию и посмотреть.
- Выйти из текущей функции.
Примечание. Мы можем обойти их, поэкспериментировать и изучить дополнительные функции.
Отладка в VS Code
Теперь давайте посмотрим, как мы можем использовать нашу любимую IDE (интегрированную среду разработки) VS Code для отладки Node.js, что настоятельно рекомендуется, а не Chrome.
Откройте VS Code и нажмите Ctrl + Shift + D, это откроет вкладку отладчика в VS Code, как показано ниже.
Щелкните значок шестеренки в правом верхнем углу меню, откроется launch.json файл. Настройте JSON в соответствии со спецификациями, как показано на изображении ниже.
Измените значение программы с ${workspaceFolder}\\index.js на ${workspaceFolder}\\server.js, поскольку имя нашего файла - server.js.
Присвойте программе желаемое имя. Мы назвали нашу программу запускать программу Node.js на изображении ниже.
Чтобы запустить программу и открыть консоль отладки, нажмите кнопку запустить.
Теперь мы можем добавлять точки останова так же, как в вышеупомянутом инструменте отладчика Chrome.
В качестве альтернативы мы можем добавить ключевое слово debugger перед строкой кода, если мы хотим приостановить выполнение на этом этапе.
Например, я добавил отладчик в 12-ю строку на изображении ниже.
Отладчик VS Code состоит из других важных функций, таких как часы, стек вызовов, точки останова и палитра навигации.
В случае, если мы используем Nodemon для разработки, измените конфигурацию, как показано на изображении ниже, и запустите приложение с помощью Nodemon только из терминала VS Code.
Итак, наконец, теперь вы можете использовать Visual Studio Code или Google Chrome для отладки приложений Node.js.
Удачной отладки!
