#node.js #typescript #debugging #webpack #visual-studio-code
#node.js #typescript #отладка #webpack #visual-studio-code
Вопрос:
Я трачу почти 6 часов, пытаясь заставить это работать, но, похоже, он отказывается всеми способами. Я создал простой API с NodeJS, используя Typescript и Webpack, но когда я попытался отладить его, поставил точки останова и все такое, VSCode поставил это очень сложно.
Запустите файл .json :
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"preLaunchTask": "npm: start - server",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\server\webpack.config.ts",
"outFiles": [
"${workspaceFolder}/server/dist/index.js"
],
"sourceMaps": true,
"trace": true
}
]
}
webpack.config.ts :
const webpack = require("webpack");
const path = require("path");
const nodeExternals = require("webpack-node-externals");
module.exports = {
entry: ["./src/index.ts"],
devtool: "source-map",
watch: true,
target: "node",
externals: [
nodeExternals({
allowlist: ["webpack/hot/poll?100"]
})
],
module: {
rules: [
{
use: "ts-loader",
exclude: /node_modules/
}
]
},
mode: "development",
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
plugins: [new webpack.HotModuleReplacementPlugin()],
output: {
path: path.join(__dirname, "dist"),
filename: "index.js"
}
};
index.ts моего приложения, которое использует промежуточное программное обеспечение с маршрутизаторами для перенаправления запросов URL.
import express from "express";
import cors from "cors";
import helmet from "helmet";
import { categoryRouter } from "./routers/category.router";
import { CategoryPostgre } from "./database/postgre/category.postgre";
dotenv.config();
/**
* App Variables
*/
if (!process.env.PORT) {
process.exit(1);
}
const PORT: number = parseInt(process.env.PORT as string, 10);
const app = express();
const router = express.Router();
/**
* App Configuration
*/
app.use(helmet());
app.use(cors());
app.use(express.json());
/**
* Service Initialization
*/
console.log(`Inicializando Servicios`);
app.use('/api/category', categoryRouter);
/**
* Server Activation
*/
const server = app.listen(PORT, () => {
console.log(`----------------------------------------------------------------`);
console.log(`--- App V 0.1 NodeJS Server Listening on port ${PORT} ---`);
console.log(`----------------------------------------------------------------`);
tsconfig.json :
{
"compilerOptions": {
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"sourceMap": true, /* Generates corresponding '.map' file. */ /* Enable all strict type-checking options. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
}
}
Я хочу, чтобы только отладчик продолжал прослушивать точки останова, поэтому, когда я запускаю запрос с помощью postman, он останавливается на моей функции categoryRouter, и я вижу, что происходит прямо там.
Теперь он просто ничего не делает, когда я его запускаю.
Ответ №1:
Насколько я знаю, существует 2 типа запросов при настройке launch.json
:
launch
: который сам запустит новый сервер.attach
: который сообщает vscode, когда вы нажимаете кнопку start debug, чтобы присоединить debbuger к существующему запущенному процессу.
Первый вариант в основном используется, когда вы хотите отключить скрипт в том смысле, что он может запускаться сам по себе и не ожидает внешнего ввода.
Второй можно использовать, если ваш сервер уже запущен на любом указанном вами порту.
Попробуйте следующее: package.json
:
{
"scripts": {
"build": "webpack",
"start": "nodemon --inspect=0.0.0.0:9229 lib/index.js",
...
}
}
Примечание lib/index.js это мой скомпилированный файл, так как я использую ts в своем проекте.
--inspect=...:9229
сообщает работающему серверу прослушивать клиентское соединение (отладчик) на указанном порту.
если ваш сервер работает внутри docker, оставьте адрес хоста равным: 0.0.0.0
но если вы его не используете, установите его равным: 127.0.0.1
Затем вам нужно настроить свой .vscode/launch.json
так, чтобы он мог подключаться к серверу. это конфигурация, которую я использую:
{
"version": "0.2.0",
"configurations": [
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"restart": true,
"port": 9229,
"address": "localhost",
"localRoot": "${workspaceFolder}",
"remoteRoot": "/application",
"protocol": "inspector"
}
]
}
Обратите /application
WORKDIR
внимание, что я определил в моем Dockerfile
, если вы не используете docker, вам, вероятно, не нужно это свойство.
При такой настройке у меня может быть docker, работающий на моем сервере, и в любой момент, когда мне нужно отладить конечную точку на моем сервере, я могу просто запустить отладчик из vscode и добавить точку останова в свой исходный код, затем из postman, когда я запускаю запрос, vscode приостанавливает выполнение наточка разрыва.
Удачи, надеюсь, это поможет. 🙂