Код 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) на вкладці "Налагодження", ця точка зупинки сірою, і кажучи: "Точку зупинки ігнорується, оскільки згенерований код не знайдений (проблема з вихідною картою?)". Я додав скріншот того, що спостерігаю:

Чого мені не вистачає?

Редагувати:

Привіт, я все ще затримався на цьому. Мені вдалося зробити один зразок проекту, який вражав точки розриву, але після того, як я спробував скопіювати цей проект в інше місце на моєму жорсткому диску, точки розриву знову стали сірими і не були вражені. У цьому тестовому проекті я по-різному використав вбудовані вихідні карти, компілюючи файли TypeScript зtsc app.ts --inlinesourcemap

Я завантажив згаданий зразок проекту на GitHub, щоб ви могли поглянути на нього тут .

Налаштування "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
        }
    ]
}

Ось невеликий проект, де ви можете побачити всі встановлені параметри https://github.com/v-andrew/ts-template

Я зіткнувся з цим запитанням, шукаючи рішення подібної проблеми, яка була у мене. Незважаючи на те, що вона відрізняється від проблеми OP, вона може допомогти іншим.

Контекст: Я наслідував приклад Visual Studio Code HelloWorld і виявив, що не можу зупинитися на точках розриву.

Я вирішив свою проблему, змінивши .vscode/launch.jsonтак, що "sourceMaps": trueатрибут у конфігурації Launch був встановлений (він за замовчуванням починається з false).

Я думаю, що проблема може бути у вашому розділі "програми" в 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}"
}

Зіткнувшись з тією ж проблемою та вирішивши її, виправивши шлях до .tsфайлів.
Мій проект містить srcі distдиректорії, і проблема полягала в тому, що згенеровані .mapфайли не мали правильного шляху до srcкаталогу.

Виправлення - tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "sourceRoot": "../src"
    }
}

Спочатку я sourceRootвказував на те, srcі srcвсередині немає жодного бруду dist.

Крім того, sourceMapsслід встановити trueвсередину launch.json.

Вирвавши волосся цілий день, я нарешті змусив його працювати.

Проблема в тому, що є три файли, з якими можна возитися - 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/*" }

мій tsconfig.json:

"outDir": "dist",
"sourceMap": true

мій 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",

Зіткнувшись з тією ж проблемою та вирішивши її, виправивши "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"
        }
    ]
}

Оновлення: Налагодження TypeScript тепер додано у версії 0.3.0 Оновлення: Завжди очищайте свої точки зупинки, потім приєднуйте, а потім додайте точки зупинки. Про цю помилку повідомляється.

Жодна з інших відповідей у ​​мене не спрацювала.

Потім я зрозумів, що programатрибут у моєму launch.jsonвказує на .jsфайл, але мій проект - це проект TypeScript.

Я змінив його, щоб вказати на .tsфайл TypeScript ( ), і встановив outFilesатрибут, щоб він вказував на те, де живе скомпільований код:

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}/src/server/Server.ts",
    "cwd": "${workspaceRoot}",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
}

Це вирішило проблему для мене!

Насправді існує лише один спосіб вирішити цю проблему, а саме подивитися на шлях вихідної карти, який фактично використовується.

Додайте наступний рядок до 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щоб шлях відповідав вашому фактичному вихідному шляху. Я виявив, що мені потрібна дещо інша конфігурація для різних проектів, тому розуміння того, як це налагодити, справді допомогло.

Пізно на вечірку, але ви можете перевірити цю публікацію на github Тест підтримки outFilesглобалізації атрибута в конфігурації запуску # 12254 .

В основному в новій версії vscode, ви тепер повинні використовувати шаблон glob із властивістю outFilesу вашому task.json.

У мене була проблема simlar. Я виправив, вказавши вихідний каталог ізoutFiles

Через багато часу, витраченого на вирішення цієї проблеми, виявилося, що найкращий спосіб - увімкнути трасування налагодження, додавши наступний рядок у launch.json.

"trace": true

І подивіться, де проблема насправді. Консоль налагодження видасть щось у рядках:

Verbose logs are written to: /Users/whatever/Library/Application Support/Code/logs/blah/blah/debugadapter.txt

Серед багатьох інших речей ваша консоль матиме такі рядки:

SourceMap: mapping webpack:///./src/index.ts => C:\Some\Path\index.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Some/Path/*"

Використовуйте sourceMapPathOverride, щоб виправити це так, щоб воно насправді відповідало вашому шляху. Властивість "трасування" раніше називалося "diagloglogging", яке більше не використовується.

Я змінив конфігурацію в launch.json для:

{ "name": "Debug tests in Chrome", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "sourceMapPathOverrides": { "*": "${webRoot}/*" }, "webRoot": "${workspaceRoot}" }

раніше було:

{ "name": "Debug tests in Chrome", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" }

Включити '"sourceMapPathOverrides"' було моїм рішенням

Ця конфігурація в launch.json спрацювала:

{ "type": "node", "request": "launch", "name": "Launch Program - app", "program": "${workspaceRoot}/src/server.ts", "cwd": "${workspaceFolder}", "outFiles": ["${workspaceRoot}/release/**"], "sourceMaps": true }

Я хотів би внести свій вклад, щоб витратити кілька годин на стукіт головою.

Я використовував код налагоджувача для Chrome для VS (це не потрібно для веб-шторму), я рекомендую витратити 10 хвилин на читання їх сторінки , це просвітить ваш світ.

Після встановлення розширення налагоджувача переконайтеся, що встановлена source-map , у моєму випадку мені також знадобився source-map-loader . Перевірте ваш package.json на це.

Мій launch.json, який є конфігурацією відладчика chrome (усі мої вихідні файли, де знаходиться 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}/*"
      }
    }
  ]
}

Додайте devtool: 'source-map'у свій webpack.config.js. Інші параметри, що генерують вкладені вкладиші, не працюватимуть із налагоджувачем Chrome (вони згадують це на своїй сторінці).

Це приклад:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Tutorial",
      inject: "body",
      template: "src/html/index.html",
      filename: "index.html"
    }),
    new DashboardPlugin()
  ],
  devtool: 'source-map',  
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        query: {
          presets: ["es2017", "react"],
          plugins: ['react-html-attrs']          
        }
      }
    ]
  },
  watch: true
};

Потім ви запускаєте свій webpack: `webpack-dev-server --devtool source-map --progress --port 8080, я використовував webpack-dev-server, але він має ті самі параметри, що і webpack.

Коли ви це зробите, ви повинні побачити a файл .map вашого створеного додатка. Якщо ні, поверніться та перевірте налаштування.

Тепер у VS Code перейдіть на Debug Console і запустіть .scripts . Це дуже корисна команда, оскільки вона показує, який згенерований код зіставляється з яким джерелом.

Щось на зразок цього: - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

Якщо це неправильно, вам доведеться перевірити свій sourceMapPathOverrides у вашому launch.json, приклади доступні на сторінці розширення

так! у моєму випадку зміна цього у файлі launch.json вирішить проблему:

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }

Використовуючи Angular, я виявив, що завжди вказую каталог папок на srcпапку - таким чином мій робочий простір не так захаращений кореневими файлами, якими я ніколи не користуюся. Але це дало мені кілька проблем у минулому, особливо при використанні VSCode, оскільки багато функціональних можливостей, здається мені, розглядають структуру папок і починають звідти запускати ваші файли. (Чекаючи деяких відсутніх файлів)

Тож у мене виникла така сама проблема з цим повідомленням про помилку, і, вивчаючи минулий досвід, я зрозумів, що відкрив свій проект глибоко в одну папку, а не в кореневу <app name>. Тож я просто закрив свій проект і відкрив його на одну папку (щоб усі інші файли також були включені в структуру папок), і моя проблема була негайно виправлена.

Я також вважаю, що багато з наведених вище відповідей щодо зміни файлів та структури папок є обхідними шляхами для вирішення цієї проблеми, пов’язаної з невідкриттям робочого проекту у кореневій папці, будь-якої іншої основи / мови, яку ви використовуєте.

Мені просто довелося перезапустити експрес-сервер, а потім знову підключити налагоджувач.

Прочитавши цей потік і спробувавши майже всі методи, які я не міг знайти безрезультатно, я ще трохи натрапив на Google і натрапив на цю цікаву зміну, яку вони внесли у VSCode 1.49.0, у вересні 2020 року. У суті, outFiles не працює раніше.

https://github.com/microsoft/vscode/issues/107615

якщо ви перемикаєтесь на проект сценарію типу visual studio, ви можете нормально налагоджувати файли ts, я думаю, що проблема у файлі генерації app.js.map тут є зразком з visual studio app.js.map

{"version": 3, "file": "app.js", "sourceRoot": "", "sources": ["app.ts"], "names": ["HelloWorld", "HelloWorld.constructor" ], "відображення": "AAAA; IACIA, oBAAmBA, OAAcA; QAAdC, YAAOA, GAAPA, OAAOA, CAAOA; IAEjCA, CAACA; IACLD, iBAACA; AAADA, CAACA, AAJD, IAIC; AAED, IAA, GAAA, IAA , UAAU, CAAC, kBAAkB, CAAC, CAAC; AAC / C, OAAO, CAAC, GAAG, CAAC, KAAK, CAAC, OAAO, CAAC, CAAC "}

проти коду Visual Studio app.js.map

{"version": 3, "file": "app.js", "sourceRoot": "", "sources": ["../ app.ts"], "names": [], "mappings": "AACA; IACI, oBAAmB, OAAc; QAAd, YAAO, GAAP, OAAO, CAAO; IAEjC, CAAC; IACL, iBAAC; AAAD, CAAC, AAJD, IAIC; AACD, IAAI, KAAK, GAAC, IAAA, UAA, CAA, UAA , CAAC, CAAC; AACxC, OAAO, CAAC, GAAG, CAAC, KAAK, CAAC, OAAO, CAAC, CAAC; AAC3B, OAAO, CAAC, GAAG, CAAC, OAAO, CAAC, CAAC "}

спробуйте замінити його та спробуйте ще раз, не забудьте врахувати ієрархію каталогів джерел