デバッガを用いたTypeScriptのデバッグ方法

モチベーション

最近viteのコードを読みたくなった

型がついている方が読む時に嬉しいので、TypeScriptのまま読みたい

そもそもTypeScriptでデバッグを実行する方法を知らないので調べてみた

はじめに

そのため、jsコードのデバッグは可能

ところで、TypeScriptはトランスパイラ(コンパイル)によってjsコードへと変換した後に実行される

そのため素直にデバッグできない

SourceMapという設定があるらしいので調べる

SourceMap

These files allow debuggers and other tools to display the original TypeScript source code when actually working with the emitted JavaScript files.

これらのファイルにより、デバッガやその他のツールは、実際に生成されたJavaScriptファイルを扱う際に、オリジナルのTypeScriptソースコードを表示できるようになる。

実際にjsがfileが動いている時に、元のTypeScriptファイルを表示することができる。

なので、見せかけ上Debugできるという話

setup

まずはnodeの環境構築をする

code:init

$ pnpm init

code:setup

$ pnpm add typescript -D

$ pnpm tsc helloworld.ts

終わったらトランスパイル

code:helloworld.ts

$ cat helloworld.ts

const hello:string = 'world'

console.log(hello)

例えば、tsファイルにdebbugerを仕込んでトランスパイルする

code:helloworld.ts

const hello:string = 'world'

debugger

console.log(hello)

code:helloworld.js

var hello = 'world';

debugger;

console.log(hello);

code:debug

$ node --inspect-brk helloworld.js

Debugger listening on ws://127.0.0.1:9229/e38a607d-7ea1-4682-a9cd-cb167db9e942

1行目で止まってくれている

エディタ経由でデバッガーを操作する方法があるが、簡単なブラウザ経由でのデバッグを行う

なければどこか間違ってそう。もしくはブラウザのバグ

https://gyazo.com/c7197ad7d1c0b30de89f7e9bd066191c

別画面でデバッガが立ち上がるのでいい感じにデバッグできることを確認する

ここら辺でもう一度目的を書いておくと、tsのデバッグである

そのため、sourceMapの設定をこれから行っていく

それで、tsconfigを作る

code:create-ts-config

$ pnpm tsc --init

Created a new tsconfig.json with:

TS

target: es2016

module: commonjs

strict: true

esModuleInterop: true

skipLibCheck: true

forceConsistentCasingInFileNames: true

それで、sourceMapの設定をする。

それで、再度トランスパイルすると、mapファイルができている。

code:create-mapfile

$ pnpm tsc helloworld.ts

$ ls

helloworld.js helloworld.ts package.json tsconfig.json

helloworld.js.map node_modules pnpm-lock.yaml

それで、mapファイルの中身を確認する

code:cat

$ cat helloworld.js.map

$ cat helloworld.js

"use strict";

const hello = 'world';

debugger;

console.log(hello);

//# sourceMappingURL=helloworld.js.map

それで、jsファイルにもsourceMapの設定のようなやつが吐かれているので、この2つはセットで扱いそう

ここで、再度Debugすると、今度はtsファイル側でデバッグすることができる。

debugのコマンドは

node --inspect-brk helloworld.js

https://gyazo.com/3d7bac331a365e54e2d6d2e50f0a1e76

これでTypeScriptのデバッグを行うことができる。

リポジトリはこちら