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

Существует несколько способов отладки приложения Angular или Node. Давайте сначала поговорим об Angular.

Угловой

Во-первых, проверенный временем способ:

console.log («моё сообщение»)

Никто не может быть более надежным, чем это, особенно в асинхронном Java-скрипте. Однако, если вы используете это, то вам не хватает многих вещей. Это самый простой и элементарный способ.

Во-вторых, это просто установка отладчика; строку в коде, и ваш код остановится на этой строке. Даст вам возможность просмотреть все значения переменных в функциях.

Третий способ — это правильный способ отладки вашего углового кода.

Создайте файл Launch.json

{
"version": "0.2.0",
"configurations": [
   {
    "type": "chrome",
    "request": "launch",
    "preLaunchTask": "Build-And-Start",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "urlFilter": "http://localhost:4200/*",
    "webRoot": "${workspaceFolder}/dist/",
    "sourceMaps": true,
   }
]
}

а затем создайте соответствующий файл task.json

{
"version": "2.0.0",
   "tasks": [
     {
       "type": "npm",
       "script": "start",
       "label": "Build-And-Start",
       "dependsOn":"build"
     }
   ]
}

и убедитесь, что у вас есть файл package.json со следующим в разделе скриптов.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
}

а затем просто нажмите «Отладка» в Visual Studio Code. он создаст и запустит Chrome с вашим веб-сайтом из-за launch.json. После запуска вашего веб-сайта вы можете открыть инструменты разработчика в Chrome (Ctrl + Shift + I), выбрать вкладку «Источник» вверху и начать расставлять точки останова в своем коде.

Возможно, вы не видите исходный код своего приложения в chrome. Для этого нажмите «Добавить папку в рабочую область» и перейдите к исходному коду.

Инструменты разработчика Chrome имеют множество опций. Потратьте некоторое время, играя со всеми вариантами, это окупится с лихвой. Напишите, нажмите на строку исходного кода и обратите внимание на множество опций меню. Узнайте об опции «Скрипт Blackbox».

Для службы узла

Установите расширение «Отладчик Chrome» в VS Code.

Создайте конфигурацию в файле launch.JSON как таковую.

{
"name": "Attach to Node Functions",
"type": "node",
"request": "launch",
"preLaunchTask": "npm: build",
"program": "${workspaceRoot}\\dist\\app.js"
}

Поставьте точку останова в сервисном коде. Нажмите F5 и запустите его. Нажмите свой сервисный код из пользовательского интерфейса или почтового менеджера. Точка останова будет достигнута.

Как отлаживать службу Node с помощью Mocha Test?

Создайте конфигурацию в Launch.JSON как таковую

{
      "name": "Debug Mocha Test",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha" ,
      "stopOnEntry": false,
      "args": ["-t", "10000", "dist\\Test\\*.js"],
      "cwd": "${workspaceRoot}",
      "preLaunchTask": "npm: build",
      "runtimeExecutable": "node",
      "runtimeArgs": [
          "--nolazy"
      ],
      "env": {
          "NODE_ENV": "development"
      },
      "console":"integratedTerminal",
      "sourceMaps": true
      
  }

Ctrl + Shift + P и введите отладку, выберите и начните отладку. Выберите «Отладка теста мокко» в раскрывающемся списке.