В нашу компанию мы нанимаем много новых разработчиков 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 и введите отладку, выберите и начните отладку. Выберите «Отладка теста мокко» в раскрывающемся списке.