VS Код: ошибка "точка останова игнорируется, потому что сгенерированный код не найден"
Я повсюду посмотрел, и у меня все еще есть отладка TypeScript внутри кода VS. Я прочитал этот поток, но все же я не могу ударить по своим точкам останова, помещенным внутри файла TypeScript, попав в точки останова в .js файлах, все работает нормально.
Итак, вот самый простой проект "привет мир", который я создал.
-
app.ts:
var message: string = "Hello World";
console.log(message);
-
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
}
}
-
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
}
]
}
Я создал файлы js.map, запустив команду tsc --sourcemap app.ts
.
После всех этих шагов, когда я устанавливаю точку останова в строке console.log(message);
и запускаю программу (F5) со вкладки "Отладка", точка останова выделена серым цветом, говоря: "Ошибка останова игнорируется, потому что сгенерированный код не найден (проблема с исходной картой?)". Я приложил скриншот того, что я наблюдаю:
![введите описание изображения здесь]()
Что мне не хватает?
Edit:
Привет, я все еще придерживаюсь этого. Мне удалось создать один образец проекта, который попадал на точки останова, но после того, как я попытался скопировать этот проект в другое место на моем жестком диске, точки останова снова стали серыми и не пострадали. В этом тестовом проекте я использовал разные встроенные исходные файлы, компилируя файлы TypeScript с tsc app.ts --inlinesourcemap
Я загрузил упомянутый примерный проект в GitHub, чтобы вы могли посмотреть на него здесь.
Ответы
Ответ 1
Настройка "outFiles": ["${workspaceRoot}/compiled/**/*.js"],
решила проблему для меня.
Значение "outFiles"
должно соответствовать одному набору в tsconfig.json
для outDir
и mapRoot
, который в вашем случае равен ${workspaceRoot}
, поэтому попробуйте "outFiles": "${workspaceRoot}/**/*.js"
Вот мой tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"target": "es6",
"outFiles": ["${workspaceRoot}/compiled/**/*.js"],
"mapRoot": "compiled"
},
"include": [
"app/**/*",
"typings/index.d.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
и launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/compiled/app.js",
"cwd": "${workspaceRoot}",
"outDir": "${workspaceRoot}/compiled",
"sourceMaps": true
}
]
}
Ответ 2
Я столкнулся с этим вопросом, ища решение той же проблемы, что и у меня. Несмотря на то, что он отличается от проблемы с ОП, он может помочь другим.
Контекст: я следовал примеру кода Visual Studio Code HelloWorld и оказался неспособен остановиться на точках разрыва.
Я решил свою проблему, изменив .vscode/launch.json
так, чтобы атрибут "sourceMaps": true
в настройке Launch был установлен (он начинает по умолчанию на false).
Ответ 3
Я думаю, что проблема может быть в разделе "program" для launch.json. Попробуйте это следующим образом:
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch",
// Type of configuration.
"type": "node",
"request": "launch",
// Workspace relative or absolute path to the program.
"program": "${workspaceRoot}/app.ts",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": "${workspaceRoot}",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": true,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": "${workspaceRoot}"
}
Ответ 4
После разрыва моих волос весь день, я, наконец, получил его на работу.
Проблема заключается в том, что три файла для скрипта - launch.json, tsconfig.json и webpack.config.js, поэтому все комбинаторные.
диагностический журнал был ключом к тому, чтобы помочь мне разобраться.
Microsoft, пожалуйста, сделайте это проще... Действительно, vscode мог бы понять это или, по крайней мере, направил меня больше на процесс.
В любом случае, вот что, наконец, работало в моем launch.json:
"url": "http://localhost:8080/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" }
my tsconfig.json:
"outDir": "dist",
"sourceMap": true
my webpack.config.js:
output: {
path: 'dist/dev',
filename: '[name].js'
},
...
module: {
loaders: [...],
preLoaders: [{
test: /\.js$/,
loader: "source-map-loader"
}]
}
...
plugins: [
new webpack.SourceMapDevToolPlugin(),
...
],
devtool: "cheap-module-eval-source-map",
Ответ 5
Опираясь на ту же проблему и решив ее, исправив путь к файлам .ts
.
Мой проект содержит src
и dist
dirs, и проблема заключалась в том, что сгенерированные файлы .map
не имели правильного пути к директории src
.
Исправление - tsconfig.json
:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
"sourceRoot": "../src"
}
}
Изначально мой sourceRoot
указывал на src
и не было src
dir внутри dist
.
Кроме того, sourceMaps
должен быть установлен в true
внутри launch.json
.
Ответ 6
Обновление: TypeScript теперь добавлена отладка в 0.3.0. Обновление: всегда очищайте точки останова, затем присоединяйте, а затем добавляйте точки останова. Это ошибка, о которой сообщается.
Ответ 7
Опираясь на ту же проблему и решив ее, исправив "webRoot"
config в launch.json.
Здесь мой просмотр проводника рабочей области.
Поскольку результат компиляции main.js and main.js.map
находится в каталоге "./project/www/build"
, я меняю запись "webRoot"
на "${workspaceRoot}/project/www/build"
от "${workspaceRoot}"
, и она сработала!
Файл launch.json выглядит следующим образом:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/project/www/build"
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/project/www/build"
}
]
}
Ответ 8
Ни один из других ответов не работал у меня.
Затем я понял, что атрибут program
в моем launch.json
указывал на файл .js
, но мой проект - проект TypeScript.
Я изменил его, чтобы указать на файл TypeScript (.ts
), и установить атрибут outFiles
, чтобы указать, где живет скомпилированный код:
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/src/server/Server.ts",
"cwd": "${workspaceRoot}",
"outFiles": ["${workspaceRoot}/dist/**/*.js"]
}
Это решило проблему для меня!
Ответ 9
outFiles": ["${workspaceRoot}/compiled/**/*.js"],
Это спасло мою жизнь, потому что TS не искал sub-dirs. Большое спасибо
Ответ 10
Существует только один способ разрешить это, и это посмотреть на путь исходной карты, который фактически используется.
Добавьте следующую строку в launch.json
:
"diagnosticLogging": true,
Среди множества других вещей консоль будет иметь следующие строки:
SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*"
И затем вы просто настраиваете свой sourceMapPathOverrides
, чтобы путь соответствовал вашему исходному пути. Я обнаружил, что мне нужна была немного другая конфигурация для разных проектов, поэтому понимание того, как отлаживать это, действительно помогло.
Ответ 11
Поздно к вечеринке, но вы можете проверить это сообщение в github Проверить поддержку globbing для атрибута outFiles
в конфигурации запуска # 12254.
В основном в новой версии vscode теперь вы должны использовать шаблон glob с свойством outFiles
в вашей task.json.
У меня была проблема simlar. Я исправил, указав выходной диск с outFiles
Ответ 12
Эта конфигурация в файле launch.json:
{
"type": "node",
"request": "launch",
"name": "Launch Program - app",
"program": "${workspaceRoot}/src/server.ts",
"cwd": "${workspaceFolder}",
"outFiles": ["${workspaceRoot}/release/**"],
"sourceMaps": true
}
Ответ 13
Я хотел бы внести свой вклад, чтобы позаботиться о нескольких часах удара головой.
Я использовал Отладчик для Chrome для VS-кода (вам это не нужно для webstorm), я бы рекомендовал потратить 10 минут на чтение страница, он просветит ваш мир.
После установки расширения отладчика убедитесь, что карта источника установлена, в моем случае мне также понадобился загрузчик исходных карт. Проверьте package.json.
My launch.json, который является конфигурацией хром-отладчика (все мои исходные файлы, в которых src):
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}/src"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}/",
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*"
}
}
]
}
Ответ 14
Если вы переключитесь на проект visual studio type script, вы можете нормально отлаживать файлы ts
Я думаю, что проблема в файле поколения app.js.map
вот образец из визуальной студии app.js.map
{ "версия": 3, "файл": "app.js", "sourceRoot": "," источники ": [" app.ts "]," имена ": [" HelloWorld "," HelloWorld.constructor "]," отображения ":" АААА; IACIA, oBAAmBA, OAAcA; QAAdC, YAAOA, GAAPA, OAAOA, CAAOA; IAEjCA, CAACA; IACLD, iBAACA; AAADA, CAACA, AAJD, IAIC; AAED, IAAI, Kaak, Гааг, IAAI, UAAU, ДВК, kBAAkB, ДВК, ДЗВК; AAC/С, OAAO, ДВК, Гааг, ДВК, Каак, ДВК, OAAO, ДВК, ДЗВК "}
vs визуальный студийный код app.js.map
{ "версия": 3, "файл": "app.js", "sourceRoot": "," источники ": [".. /app.ts "]," имена ": []," отображения ":" AACA; IACI, oBAAmB, OAAc; QAAd, YAAO, GAAP, OAAO, CAAO; IAEjC, ДВК; IACL, iBAAC; AAAD, ДВК, AAJD, IAIC; AACD, IAAI, Kaak, GAAC, IAAI, UAAU, ДЗВК, AAAA, ДВК, ДЗВК; AACxC, OAAO, ДВК, Гааг, ДВК, Каак, ДВК, OAAO, ДВК, ДЗВК; AAC3B, OAAO, ДВК, Гааг, ДВК, OAAO, ДВК, ДЗВК "}
попробуйте заменить его и повторите попытку, не забудьте рассмотреть иерархию каталогов источников