Отладка JS в VS Code, точки останова игнорируются - PullRequest
Новая
       14

Отладка JS в VS Code, точки останова игнорируются

0 голосов
/ 31 октября 2018

Я пытаюсь использовать отладчик VS Code с моим новым проектом Typescript. Я новичок как с отладчиком, так и с Typescript, так что это не облегчает задачу. Мне удалось запустить отладчик, но он только отлаживает index.ts, а модули игнорируются. Так как мой проект имеет Typescript + Babel 7, необходимо перенести мой источник в ./dist/ перед запуском отладчика.

Я настроил следующий скрипт: 

// package.json
"scripts": {
    "build:js": "babel src --out-dir dist --extensions \".ts,.js\" --copy-files --source-maps",
  },

Вот мой конфиг Babel 

// babel.config.js
module.exports = {
  presets: [
    "@babel/env",
    "@babel/typescript",
  ],
  plugins: [
    "transform-dynamic-import",
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    [
      "module-resolver",
      {
        alias: {
          "@": "./src",
        },
      },
    ],
  ],
};

И мой конфиг Typescript: 

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "commonjs",
    "allowJs": true,
    "noEmit": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "preserveSymlinks": false,
    "experimentalDecorators": true,
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

В моей папке ./src/ есть 2 файла index.ts и module.ts. Их содержание - базовый JavaScript, ничего особенного: 

// index.js
require("./module.js")();

let n = 0;
for (let i = 0; i < 3; i++) {
  n = n + 1;                   //there is a breakpoint on this line
  console.log(String(n));      //there is a breakpoint on this line
}

// module.js
module.exports = function() {
  let n = 0;
  for (let i = 0; i < 3; i++) {
    n = 10 - i;               //there is a breakpoint on this line
    console.log(n);           //there is a breakpoint on this line
  }
  return n;
};

Я поместил 4 точки останова в коде. 2 на каждый файл. Этот код работает по назначению и последовательно выводит 10, 9, 8, 1, 2 и 3 на консоль.

Для отладки кода я настроил отладчик кода VS следующим образом: 

"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Debug TypeScript in Node.js",
    "preLaunchTask": "npm: build:js",
    "program": "${workspaceFolder}/src/index.ts",
    "cwd": "${workspaceFolder}",
    "protocol": "inspector",
    "outFiles": [
      "${workspaceFolder}/dist/**/*.*"
    ],
    "sourceMaps": true
  }
]

Когда я запускаю эту конфигурацию в отладчике, учитываются только точки останова в index.ts. Точки останова в module.ts становятся серыми кругами с подсказкой Unverified breakpoint. Согласно документации VSCode это означает следующее:

Если исходная карта не существует для исходного источника или если исходная карта сломан и не может успешно отобразить между источником и сгенерированный JavaScript, затем точки останова отображаются как непроверенные (серый полые круги). Источник

Я так понимаю, что отладчик неправильно работает с моими исходными картами, но я понятия не имею, что об этом думать. Я посмотрел в своей папке ./dist/, и файлы .map были созданы, и их содержимое выглядит хорошо для меня. Я также сделал скриншот моего кода во время отладки. Screenshot

Есть идеи?

Большое спасибо!

...