Debug, Typescript

Debugging multiple typescript files using vscode

So this was the question I asked on Stackoverflow , I hate to ask there but I was struggling to figure it out so I asked. But good I asked as I immediately got a response on what is wrong with my code. I also hate the guy who downvoted my question, but yeah that’s how SO works

Anyways,

If you want to see the code then it’s here https://github.com/sherry-ummen/TypescriptDebuggingExample

Let’s do it step by step

  1. Install vscode . I have been using 1.14.1
  2. Install nodejs. I have been using 8.1.4
  3. Install typescript. I have been using 2.4.1
  4. Create a folder TypeScriptExample
  5. Open the folder in vscode
  6. Create a file tsconfig.json. Its indicates that it’s the root directory of the Typescript project. More about it here . Paste the content from https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/tsconfig.json tsconfig
  7. Create a new file main.ts .  And the content of the file be
    console.log(‘Hello World!!’)
  8. Go to integrated terminal of vscode and type tsc . This would create a new folder out and will put the transpiled code here, they are just javascript files and map files (used for debugging typescript)
  9. To run the transpiled code , type node .\out\main.js . It should print HelloWorld

Build on changing Typescript files using Ctrl + Shift + B or by clicking the menu Tasks -> Run Build tasks

  1. Click Tasks -> Configure Tasks and then select other from the options. This will create tasks.json file, delete the content of it.
  2. Type the following code to it https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/.vscode/tasks.jsontasks
  3. Go to the file main.ts and press Ctrl + Shift + B . You should see in the output terminal Compilation complete. Watching for file changes.
  4. Now make a change change in main.ts , remove one exclamation from Hello World!! , you will see in the output that it compiles the code again.
  5. Now run the main.js file again node .\out\main.js you should see your changed text.

Debugging the typescript files

  1. Click Debug -> Open Configurations
  2. Replace the content of the file with this https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/.vscode/launch.json launch
  3. Put a breakpoint on line number 1 and press F5 or click Debug -> Start Debugging
  4. It should hit the break point.

Lets Add more files and set debug breakpoint and step in

  1. Create a file log.ts and keep the content of it as https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/log.tslog
  2. Change the main.ts to be https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/main.tsmain
  3. Put a break point on line 2 and press F5 , you should be hitting the breakpoint and now press F10 until line 4 and then press F11 to step into the code of log.ts file.

That’s it!