angular2 + TypeScriptのステップ実行デバッグ メモ

Visual Studio Codeでステップ実行デバッグをする方法を調査中。
まずは、Visual Studio Codeからnode.jsのlite-serverを起動する方法を調べる。

${workspaceRoot}/.vscode/launch.json

            "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server",

story for launching lite-server as part of visual studio code launch.json settings · Issue #28 · johnpapa/lite-server · GitHub

vscode-angular-starter/launch.json at master · josiahpeters/vscode-angular-starter · GitHub

https://code.visualstudio.com/docs/editor/debugging

管理ツール

npm start でポート番号3000でサーバーが起動したけど、
http://localhost:3000

http://localhost:3001
にアクセスしたら、管理ツールっぽいウェブ画面が表示された。

VS Codeから起動

VS Codeからlite-serverを起動するためのメモ
https://github.com/johnpapa/lite-server/issues/28

https://github.com/myusrn/vscng2qs/blob/master/.vscode/launch.json

vscode - how to debug typescript files in visual studio code - Stack Overflow

node --debug-brk=35529 --nolazy node_modules\lite-server\bin\lite-server

VS Code Chrome Extension

F1キー。

>Extension 

ext install Debugger for Chrome

node debugger

node inspector で node.js 用のコードをステップ実行する - latest log

sudo npm install -g node-inspector

node --debug app/main.js
Debugger listening on port 5858
/Users/kub/Documents/test_angular/http_client/app/main.js:1
(function (exports, require, module, __filename, __dirname) { System.register(['angular2/platform/browser', 'rxjs/Rx', './wiki/wiki.component', './wiki/wiki-smart.component', './toh/toh.component'], function(exports_1, context_1) {
                                                              ^

ReferenceError: System is not defined
    at Object.<anonymous> (/Users/kub/Documents/test_angular/http_client/app/main.js:1:63)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3

https://github.com/angular/quickstart/issues/25

    <script src="node_modules/systemjs/dist/system.js"></script>

直らない。

Safariでステップ実行

Safariのdevelopper toolからならステップ実行できたので、とりあえず今回はこれでメモ終了。

https://angular.io/docs/ts/latest/guide/server-communication.html
のコードをステップ実行する。

  1. Visual Studio Codeからサーバー起動、
    npm startコマンドでのサーバー起動。

  2. 開いたサファリで、developper tool > Resources
    control + クリック > Inspect Element

  3. Resourcesタブ、Extra Scripts
    コンパイル済みのwikipedia.service.ts!transpiled 37行目等にブレイクポイント設定。

                        WikipediaService.prototype.search = function (term) {
                            var wikiUrl = 'http://en.wikipedia.org/w/api.php';
  1. 4.ブラウザで操作。
    という手順でとりあえずステップ実行ができた。

TODO:
Visual Studio Codeで設定したブレイクポイントで止める方法を探す。