Debugging TypeScript in VSCode
Published: 2019-08-20 22:51:40

---
title: Debugging TypeScript in VSCode
published: true
tags: 
canonical_url: https://www.geekytidbits.com/debugging-typescript-in-vscode/
---

<img src="https://www.geekytidbits.com/debugging-typescript-in-vscode/vscode-ts-node-debugging.png" alt="VSCode, ts-node, debugging" />
<p>
  I am a big fan of using
  <a href="https://github.com/TypeStrong/ts-node">ts-node</a> for working with
  TypeScript from within Node.js. During development I fire up my app with
  <code>ts-node src/index.ts</code> rather than doing an intermediate
  <code>tsc</code> build step and then pointing Node at the .js output. Sure,
  ts-node is still calling TypeScript under the hood but it makes the whole
  process smooth.
</p>
<p>
  I also like using the
  <a href="https://code.visualstudio.com/">VSCode</a> debugger for debugging my
  TypeScript. With the help of <code>ts-node</code> this is also a smooth
  process. Here’s how you do it.
</p>
<p>
  First, install the <code>ts-node</code> dependency into your Node.js app by
  running <code>npm install ts-node</code>.
</p>
<p>
  Then, create your entry TypeScript file. For this example, I’ll create
  <code>index.ts</code> in the project root and it looks like this:
</p>
<pre class="language-typescript"><code class="language-typescript"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>
  Now, add (or modify) a <code>.vscode/launch.json</code> file so that looks
  like this:
</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>
  <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"0.2.0"</span><span class="token punctuation">,</span>
  <span class="token property">"configurations"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Debug index.ts"</span><span class="token punctuation">,</span>
      <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"node"</span><span class="token punctuation">,</span>
      <span class="token property">"request"</span><span class="token operator">:</span> <span class="token string">"launch"</span><span class="token punctuation">,</span>
      <span class="token property">"cwd"</span><span class="token operator">:</span> <span class="token string">"${workspaceRoot}"</span><span class="token punctuation">,</span>
      <span class="token property">"runtimeArgs"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"-r"</span><span class="token punctuation">,</span> <span class="token string">"ts-node/register"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token property">"args"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"${workspaceRoot}/index.ts"</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span></code></pre>
<p>Now, add a breakpoint in your TypeScript code.</p>
<p>
  <img
    src="https://www.geekytidbits.com//debugging-typescript-in-vscode/vscode-breakpoint.gif"
    alt="Set Breakpoint in VSCode"
  />
</p>
<p>Now, start debugging in VSCode:</p>
<p>
  <img
    src="https://www.geekytidbits.com//debugging-typescript-in-vscode/vscode-debug.png"
    alt="Start Debug in VSCode"
  />
</p>
<p>
  <img
    src="https://www.geekytidbits.com//debugging-typescript-in-vscode/vscode-debugging.png"
    alt="Start Debug in VSCode"
  />
</p>
<p>
  Volila! You’re now debugging your TypeScript without having to fuss with an
  intermediate transpile step or fussing with sourcemap settings.
</p>
<p>
  I’ve created a repo called
  <a href="https://github.com/bradymholt/vscode-debugging-ts-code"
    >vscode-debugging-ts-code</a
  >
  that has all of the setup correctly. Using this project looks like this:
</p>
<p>
  <img
    src="https://user-images.githubusercontent.com/759811/54855051-db697a00-4cc2-11e9-94ea-43c56e96e04d.gif"
    alt="2019-03-22_16-51-09 (1)"
  />
</p>