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",
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
のコードをステップ実行する。
Visual Studio Codeからサーバー起動、
npm startコマンドでのサーバー起動。開いたサファリで、developper tool > Resources
control + クリック > Inspect ElementResourcesタブ、Extra Scripts
コンパイル済みのwikipedia.service.ts!transpiled 37行目等にブレイクポイント設定。
WikipediaService.prototype.search = function (term) { var wikiUrl = 'http://en.wikipedia.org/w/api.php';
4.ブラウザで操作。
という手順でとりあえずステップ実行ができた。
TODO:
Visual Studio Codeで設定したブレイクポイントで止める方法を探す。