Подтвердить что ты не робот

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, чтобы вы могли посмотреть на него здесь.

4b9b3361

Ответ 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, ДВК, ДЗВК "}

попробуйте заменить его и повторите попытку, не забудьте рассмотреть иерархию каталогов источников