私はTypeScript初心者です。よろしくお願いします。m(_ _)m
今回tsconfig.jsonはこのような設定で行いました。sourceMapはtrueに設定しておきます。
{"compilerOptions":{"target":"es6","module":"commonjs","sourceMap":true,"outDir":"./dist","strict":true},"include":["src"],"exclode":["node_modules"]}ステップ実行するコードは、こちらの簡単なコードで行います。
https://gist.github.com/okumurakengo/8433019b8b525dd241c08cb357c414e7
functionfizzbuzz(n:number):number|"Fizz"|"Buzz"|"FizzBuzz"{if(n%15===0){return"FizzBuzz";}if(n%3===0){return"Fizz";}if(n%5===0){return"Buzz";}returnn;}leta:number=1;console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));// ...chromeでステップ実行する用にhtmlも作成
<!DOCTYPE html><metacharset="UTF-8"><title>Document</title><script src="dist/index.js"defer></script><p>ステップ実行のテスト</p>1-1. chromeでステップ実行をしてみた
yarn add -D typescript
yarn tsc # src/index.ts をコンパイルして、 dist/index.js が出力index.htmlを開き、開発者ツールのSourcesパネルでtypescriptのコードを確認できるので、ブレークポイントを設定してステップ実行することができました。
1-2. chromeでNode.jsのコードのステップ実行してみた
参考： ChromeDevToolを使ってNodeJSのデバッグ - Qiita
nodeで実行するときに --inspectフラグをつけて実行することで、chromeでステップ実行することができます。
node --inspect index.js
参考の通りに、ts-nodeを指定すると、typescriptをts-nodeで実行して、chromeでステップ実行することができました。--inspect-brkをつけると、1行目にブレークポイントをつけたように実行してくれるようなので、それもつけておきました。
$ yarn add -D typescript ts-node
$ node --inspect--inspect-brk--require ts-node/register src/index.ts
Debugger listening on ws://127.0.0.1:9229/d715288d-7d07-4576-834e-4787eecadb0b
chrome://inspect を開いて、Remote Targetの部分にある、inspectを押すと、開発者ツールが開いてステップ実行できました。
2-1. vscodeでステップ実行してみた
参考：https://code.visualstudio.com/docs/typescript/typescript-debugging
vscodeの左の虫のマークを押して、左上の歯車を押すと、launch.jsonが開きます。
参考ページのlaunch.jsonを自分のディレクトリに合わせて設定します。
{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"launch","program":"${workspaceFolder}/src/index.ts","preLaunchTask":"tsc: build - tsconfig.json","outFiles":["${workspaceFolder}/dist/**/*.js"]}]}この状態で左上にある緑色の三角の実行ボタンを押すとステップ実行できました。
2-2. vscodeでクライアントコードのステップ実行してみた
vscode拡張の Debugger for Chrome をインストールする
{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"chrome","request":"launch","name":"Launch local file","preLaunchTask":"tsc: build - tsconfig.json","url":"file:///Users/kengookumura/dev/sample/index.html","webRoot":"${workspaceFolder}"}]}この状態でデバッグの実行ボタンを押すと、chromeが起動し、デバッグすることができました。
↑の設定だと、ローカルファイルとしてデバッグしているので、例えば、自分でローカルサーバを起動していて、http://localhost:8000/として実行したい場合は、launch.jsonの設定を変更するか、追加すると実行できます。
{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"chrome","request":"launch","name":"Launch local file","preLaunchTask":"tsc: build - tsconfig.json","url":"file:///Users/kengookumura/dev/sample/index.html","webRoot":"${workspaceFolder}"},{"type":"chrome","request":"launch","name":"Launch localhost","preLaunchTask":"tsc: build - tsconfig.json","url":"http://localhost:8000","webRoot":"${workspaceFolder}"}]}jsonの"name"の部分でどれを実行できるか指定できるので、Launch localhostを指定した状態で実行すると
http://localhost:8000/を指定して、vscodeでクライアントコードのデバッグができました。
3-1. WebStormでステップ実行してみた
参考
- Getting started with Typescript debugging with Webstorm breakpoints
- TypeScriptの実行とデバッグ - ヘルプ | WebStorm
- Can support WebStorm breakpoint ? · Issue #188 · TypeStrong/ts-node
右上の「Add Configulation」を押す
左上の「+」を押して、「Node.js」 を選択
- Working directory
- JavaScript file
をそれぞれコンパイル後のJavaScriptを指定する。
Before launch: activate tool window に Compile TypeScriptを指定すると、
最初の一回はコマンドでtscと実行し(※最初の1回目をWebStormで実行するとdist/index.jsがないとエラーになる)、
それ以降WebStormで実行するときは自動でTypeScriptをコンパイル後にデバッグ実行してくれました。
この状態で右上のデバッグ実行のボタンを押すと、ステップ実行できました。
※私の環境ではなぜか不安定で、ブレークポイントを2つ設定しないと止まってくれなかったり、普通に動いてくれることもあったりで、よくわかりませんでした。
3-2. WebStormでクライアントコードのステップ実行してみた
右上の「Edit Configulation」から、
左上の「+」を押して、「JavaScript Debug」 を選択
URLにhttp://localhost:63342/<index.htmlへのパス>で設定すると、WebStormの組み込みのWebサーバーからステップ実行してくれました。
※もちろんhttp://localhost:8000などとして自分のローカルサーバーを指定しても大丈夫でした。
先ほどと同じように、Before launch: activate tool window に Compile TypeScriptを指定すると、
デバッグ実行するときは毎回自動でTypeScriptをコンパイルした後にデバッグ実行してくれました。
以上です。見ていただいてありがとうございました。m(_ _)m