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


If you want to see the code then it’s here

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 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
  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 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
  2. Change the main.ts to be
  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!

Debug, Tools

Debugging Rust on Windows using Visual Studio Code

Rust is the next super cool language I have seen after C# . Flame war… 😀 just kidding. But seriously the whole idea of Rust has just blown my mind and I just wanted to learn it.

But coming from C# + Visual Studio background. I am so spoil on using these massive super cool tool and excellent debugging experience. So selecting any language I also tend to see what tools are available.

Rust community is still not  as big as .Net, mainly because its so new language. So I did not find ONE great tool which will serve purpose. But I am sure things will change. There are things coming up, you can read more here

Ok so back to the original purpose of this post. Rust with Visual Studio Code.

The tools we will use :

  1. Visual Studio code here
  2. Rust Nightly (1.13) GNU 64bit here (Why we need this I’ll explain it a bit later )
  3. Rust Source here (I have used 7 zip to extract)
  4. GDB for Windows here
  5. Python here

Visual studio extensions:

  1. Rusty Code here
  2. Native Debug here


Now the steps to install or get things working.

  1. Install Rust Nightly 1.13
  2. Create a folder C:/rust/utils
  3. Open command prompt and CD to C:/rust/utils.
  4. Type cargo install racer
  5. Type cargo install rustfmt
  6. Type cargo install rustsym
  7. Put C:/rust/utils/bin in your environment variable PATH
  8. Install GDB for example in location C:/rust/debug
  9. Put this path C:/rust/debug/gdb64/bin in your environment variable PATH.
  10. Install Python
  11. Extract rust src for example in location c:/rust/src
  12. Create an environment variable RUST_SRC_PATH and assign value C:/rust/src/src to it. Its pointing to the actual source folder.
  13. Install Visual Studio Code
  14. Open Visual Studio Code. Press Ctrl + Shift + X which will open extensions pane. Type Rusty Code (install + restart). Then same way install Native Debug extension as well.

Thats all to setup the environment.

Now lets do some debugging.

  1. Code I will use is straight from Rust website.
    fn main() {
    // A simple integer calculator:
    // `+` or `-` means add or subtract by 1
    // `*` or `/` means multiply or divide by 2
    let program = "+ + * - /";
    let mut accumulator = 0;
    for token in program.chars() {
    match token {
    '+' => accumulator += 1,
    '-' => accumulator -= 1,
    '*' => accumulator *= 2,
    '/' => accumulator /= 2,
    _ => { /* ignore everything else */ }
    println!("The program \"{}\" calculates the value {}",
    program, accumulator);
  2. Lets use folder c:/rust/learning
  3. One thing Rusty Code does not support at the time of writing this blog is creating a new rust project so you have to do it manually by using cargo.
  4. Open command prompt and CD to C:/rust/learning.
  5. Type cargo new vscodetest –bin
  6. Open the new created folder C:/rust/learning/vscodetest from Visual Studio Code
  7. Press Ctrl + Shift  + P
  8. Type Cargo and select Cargo: Build Debug
  9. Press Ctrl + Shift + D
  10. Press the start button beside the Configurations drop down. Like thisdebug_config
  11. Select GDB
  12. It will create launch.json. Change it to look like this
        "version": "0.2.0",
        "configurations": [
                "name": "Debug",
                "type": "gdb",
                "request": "launch",
                "target": "target/debug/vscodetest",
                "cwd": "${workspaceRoot}"
  13. Now put a line break at line number 6
  14. Press F5. The breakpoint should hit. Like this debugging_without_pretty.png
  15. If you see in the above screenshot. I am trying to inspect the value of variable program but it seems to show some extra info. We can get rid of it with a small python script.
  16. Go to C:/rust/debug/gdb64/bin and open file gdbinit in VS code. And add this at the end of the file
    print "---- Loading Rust pretty-printers ----"
    sys.path.insert(0, "C:/rust/src/src/etc")
    import gdb_rust_pretty_printing
  17. Save it and go back to VS Code and again press F5. You should see cleaner inspect output like this debugging_with_pretty

That’s all. Not a very easy process but still good enough to start learning rust.

Now why I choose the nightly build mainly because with the version at the time of the post was 1.11 which had a small problem in debugging rust macros. To read about it more you can check my question in Rust user group here

Please let me know if this does not work or you find some problem so that I can help you if I could and also update the blog post. Also I have read various blog post and stack overflow post to get understanding about all this so thanks to all of them, its difficult to post all the link here as most of them I forgot 🙂