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
If you want to see the code then it’s here https://github.com/sherry-ummen/TypescriptDebuggingExample
Let’s do it step by step
- Install vscode . I have been using 1.14.1
- Install nodejs. I have been using 8.1.4
- Install typescript. I have been using 2.4.1
- Create a folder TypeScriptExample
- Open the folder in vscode
- 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
- Create a new file main.ts . And the content of the file be
- 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
- Click Tasks -> Configure Tasks and then select other from the options. This will create tasks.json file, delete the content of it.
- Type the following code to it https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/.vscode/tasks.json
- Go to the file main.ts and press Ctrl + Shift + B . You should see in the output terminal “Compilation complete. Watching for file changes.“
- 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.
- Now run the main.js file again node .\out\main.js you should see your changed text.
Debugging the typescript files
- Click Debug -> Open Configurations
- Replace the content of the file with this https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/.vscode/launch.json
- Put a breakpoint on line number 1 and press F5 or click Debug -> Start Debugging
- It should hit the break point.
Lets Add more files and set debug breakpoint and step in
- Create a file log.ts and keep the content of it as https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/log.ts
- Change the main.ts to be https://github.com/sherry-ummen/TypescriptDebuggingExample/blob/master/main.ts
- 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.