javascript - Chrome-debuggern fungerar inte på TypeScript-filer

Jag använder WebStorm 2016.2, angular-cli, webpack2. På bilden kan jag inte skapa en brytpunkt på raderna 19, 20, 22, 23. När jag skapar en på rad 21 skriver inte konsolen ut det jag sade till den på rad 19.

Jag ser en ts-fil som borde debugga men det verkar som att jag debuggar en annan fil eller js-filen som jag inte har någon åtkomst till.

Jag skulle vilja felsöka ts-filen om möjligt och om inte, js-filen.

angular-cli.json:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "store-app-02"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+",
    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }
}

Svar #1

din ts-kod konverteras till js under kompilering och till slut är det en javascript-fil som laddas i webbläsaren. din webbläsare känner inte till typescript.

ts ---> js (es5).

När debuggningsprogrammet körs kommer det att köra respektive kompilerad js-fil. Om det finns något fel pekar det på js-filen och du är mappad till ts-filens radnummer (där felet uppstod) med hjälp av .d.ts internt.

om du vill felsöka kan du använda karma testkörning eller använda visual studio code som exklusivt erbjuder felsökningsalternativ.

Svar #2

Om du vill kunna använda verktyg på TypeScript-filer, behöver du vanligtvis generera kartfiler samtidigt som du kompilerar din TypeScript.

Kartfiler innehåller information om hur man länkar den ursprungliga .ts-filen med den kompilerade .js-filen. Verktyg som felsökare behöver ofta dessa filer för att kunna agera på .ts-filer.

Någon förklarade det här.

Om du dessutom inte vill generera en extra fil för dessa mappningar, låter TypeScript-kompilatorn dig lägga till denna information direkt i slutet av de kompilerade filerna, med hjälp av --inlineSourceMap.

Här tror jag att Chrome inte hittar kartfilerna.

Relaterade artiklar