hvordan feilsøke kompilert TypeScript-kildekode?

etter å ha installert en typescript-pakke, ble den kompilert til js. siden da, kunne du bare se en rekke js-filer og x.d.ts og xx.js.map. men noen ganger vil jeg feilsøke den opprinnelige ts-filen. er det en måte å gjøre det på?

Svar #1

Generell

Hvis du jobber med en type src-mappe, kan du bruke vscode sine lanseringsinnstillinger. Som du allerede skrev, genererer du sourcemaps som kreves for å feilsøke applikasjonen.

Hvordan gjøre det på nettlesere?

  1. Skaff VSCode-utvidelsen som støtter nettleseren du bruker i utvikling.
    (Edge/Chrome/Firefox fungerer fint)
  2. Da må du opprette en "launch.json"-fil inne i prosjektet ditt under denne banen:

{projectRoot}/.vscode/launch.json

  1. Inne i denne json-filen kan du nå klikke på "Legg til konfigurasjon" hvor du vil finne mange forskjellige feilsøkere. Du bør velge en nettleserstart eller vedlegg. (start åpner åpenbart en ny forekomst og vedlegg kobler bare til en eksisterende forekomst av nettleseren din)

{browserName}: start

  1. Neste må du sette opp webroot-en din. Denne egenskapen bør peke til mappen der din index.html (eller index.js/.ts) rotfil for prosjektet ligger. (Du kan bruke $ {workspaceFolder} for å få banen til package.json)

Eksempel: webRoot: "$ {workspaceFolder}/public"

  1. (valgfritt) Nå kan det hende du må sette noen overstyringer for sourcemap-oppløseren din, ettersom de ikke alltid blir funnet. Her må du åpne applikasjonen din i nettleseren og søke i fanen "Kilder" i trevisningen på venstre side etter sourcemapene dine (filer som ser ut til å være TypeScript-filer) og se under hvilken sti de er tilgjengelige. Hvis du finner den stien, legger du den til i overstyringene dine og mapper den til kildebanen din.
"sourceMapPathOverrides": {
  "webpack://app/*": "${workspaceFolder}/src/*"
}

Hvis du nå starter den oppstartskonfigurasjonen ved å trykke F5, bør du få et nytt nettleservindu med fungerende bruddpunkter.

Hvordan gjøre det på NodeJS?

Trinn 1-3 er stort sett det samme, bortsett fra at du må velge node.js-konfigurasjonen som passer best for dine behov.

Avhengig av oppsettet ditt, bør det fungere når du trykker på F5. Hvis ikke, sørg for at du har brukt riktig inngangspunkt (index.js/.ts) i konfigurasjonen din.

Svar #2

Det finnes mange verktøy som kan utføre oppgaven, jeg bruker VS Code-debuggeren og den feilsøker over TS-filene.

Relatert til filene, brukes d.ts-filene bare for å gi typeinformasjon slik at du fortsatt kan jobbe med TypeScript med en kompilert versjon av ts-koden din. js.map brukes av feilsøkeren for å kartlegge den omvendte av den kompilert koden til originalen.

Relaterte artikler