原文
Debugging(外部サイト)
訳文
Visual Studio Codeの重要な機能の1つは、その卓越したデバッグ・サポートです。 VS Codeに組み込まれたデバッガは、あなたの編集を加速し、コンパイルとデバッグの繰り返しを支援します。
デバッガ拡張機能
Debugger Extensions
VS Codeは、Node.jsランタイムのための組み込みのデバッグ・サポートを持っており、 JavaScript、JavaScriptに変換されるTypeScriptと他のどんな言語でもデバッグすることができます。
他の言語とランタイム（PHP、Ruby、試み、C#、Pythonなどを含む）をデバッグするためには、私たちのVS Code Marketplaceで、デバッガ拡張を探してください。
以下は、デバッグ・サポートを含むいくつかの一般的な拡張です。：
ヒント：
上記の拡張機能は、動的に問い合わせられます。 どの拡張機能が、最も良いか決定するために説明とレビューを読み、そして、上記の拡張機能タイルをクリックします。
デバッグを開始します
Start Debugging
次のドキュメンテーションは、組み込みのNode.jsデバッガに基づいていますが、ほとんどの概念と特長は、他のデバッガにも当てはまります。
デバッグについて読む前に、まず、サンプルNode.jsアプリケーションを作成することは、役に立ちます。 あなたは、Node.jsチュートリアル(原文リンク)に従って、Node.jsをインストールすることができます。そして、簡単な、「Hello World」JavaScriptアプリケーション（app.js）を作成します。 あなたが、一旦、簡単なアプリケーションの設定をすべて行った場合、このページは、VS Codeのデバッグ機能について説明します。
デバッグ・ビュー
Debug View
Debugビューを起動するために、VS Codeの側にView Barでデバッグ・アイコンをクリックします。
Debugビューは、デバッグに関連するすべての情報を表示し、デバッグコマンドと構成の設定を持つ一番上のバーを表示します。
設定を起動します
Launch Configurations
VS Codeで、あなたのアプリをデバッグするには、あなたは、まず、起動構成ファイル(launch.json)を設定する必要があります。 Debugビューの一番上のバーの設定歯車アイコンをクリックします。 あなたのデバッグ環境を選択し、そして、VS Codeは、あなたの作業スペースの.vscodeフォルダの下のlaunch.jsonファイルを生成します。
ここに、Node.jsデバッグのための、作成されるものがあります。：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/app.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}これらの起動構成で利用できる属性は、デバッガからデバッグすることで変化することに、注意してください。 あなたは、特定のデバッガにどの属性が存在するか調べるために、インテリセンスを使用することができます。 加えて、ホバー・ヘルプは、すべての属性で利用できます。 あなたに、起動設定で緑色の塊が見える場合は、それらの上にカーソルを重ねると、 デバッグ・セッションを起動する前に、どんな問題があり、そして、それを修正しようと試すことができます。
VS Codeで、私たちは、デバッグモードで、あなたのアプリケーションを起動すること、あるいは、すでに実行アプリケーションに添付することをサポートしています。 要求（添付や起動）によって異なる属性が、そして、launch.json妥当性検証、そして、それに役立つはずの提案が必要です。
生成した値を再検討し、それらが、あなたのプロジェクトとデバッグ環境に意味があることを確認します。 あなたは、launch.json（ヘルプにホバーとIntelliSenseを使用します）へ追加された設定を追加することができます。
Debugビューで、Configurationドロップダウンを使用して、Launchという名前の設定を選択します。 あなたが、一旦、起動構成設定を取得した場合、F5で、あなたのデバッグ・セッションを開始します。
ブレークポイント
Breakpoints
一旦、デバッグ・セッションを開始すると、Debug操作枠が、エディタ上に表示されます。
- 継続/一時停止 F5
- ステップオーバー F10
- ステップイン F11
- ステップ・アウト Shift+F11
- 再起動 Ctrl+Shift+F5
- 停止 Shift+F5
Launch.json属性
Launch.json attributes
異なるデバッガとデバッグの筋書をサポートするための、多くのlaunch.json属性があります。 前述のとおり、あなたは、インテリセンス（Ctrl+Space）を使用して、利用できる属性のリストを見ることができます。
いくつかの属性は、ほとんどのデバッガで共通です。：
- Type－登録されたデバッグ拡張機能（node、php、go）にマッピングする設定の種類
- request－デバッグ要求、起動、あるいは、添付のどちらか
- Name－Debug起動構成ドロップダウンに表示される親しみやすい名前
- program－デバッガを起動するとき、実行可能なファイルや実行するファイル
- cwd－依存関係と他のファイルを見つけるための現在の作業ディレクトリ
- port－実行工程に添付するときのポート
- stopOnEntry－プログラムが起動するとすぐに中断する
- internalConsoleOptions－デバッグセッション中のDebug Consoleパネルの表示を制御する
それぞれのデバッグ・セッションを開始する前に、作業を起動するには、 tasks.jsonに指定されたタスクのいずれかの名前に、preLaunchTaskを設定します。 （作業スペースの.vscodeフォルダの下に配置されています）。
変数置換
Variable substitution
VS Codeは、launch.jsonで文字列の内側の変数置換をサポートし、そして、次の定義済み変数を持っています。：
- $ {workspaceRoot} VS Codeで開いたフォルダのパス
- ${workspaceRootFolderName} VSコードで開かれた斜線無し（/）のフォルダの名前
- ${file}現在開いているファイル
- $ {relativeFile} workspaceRootを基準とした現在開いているファイル
- ${fileBasename}現在開かれたファイルの元の名前
- ${fileDirname}現在開かれているファイルのディレクトリ名
- ${fileExtname}現在開かれているファイルの拡張子
- ${cwd}起動時のタスク実行環境の現在の作業ディレクトリ
また、あなたは、${env.Name}（例えば${env.PATH}）を通して、環境変数を参照することができます。 Windowsでの${env.Path}のように、環境変数名の大文字と小文字を一致させてください。
{
"type": "node",
"request": "launch",
"type": "node",
"name": "Launch Program",
"program": "${workspaceRoot}/app.js",
"cwd": "${workspaceRoot}",
"args": [ "${env.USERNAME}" ]
}また、あなたは、${config.NAME}を使用して、VS Codeの設定を参照することもできます。（たとえば：${config.editor.fontSize}）。
ブレークポイント
Breakpoint
ブレークポイントは、エディタの余白をクリックすることで、切り換えることができます。 細かいブレークポイントの制御（有効/無効/再適用）は、Debug viewのBREAKPOINTSの項目で行うことができます。
- 一般に、ブレークポイントは、赤く塗り潰された円として、エディタの余白に表示されます。
- 無効にされたブレークポイントは、灰色に塗り潰された円になります。
- デバッグセッションが開始されるとき、デバッガに登録できないブレークポイントは、灰色の塗り潰されていない円に変わります。
Reapply All Breakpointsコマンドは、再び、すべてのブレークポイントを最初の場所に設定します。 これは、あなたのデバッグ環境が「怠惰で」、まだ実行されていないソース・コードでブレークポイントを「置き忘れた」場合に、役に立ちます。
（詳細に付いては、以下のノードのデバッグを参照してください。：ブレークポイントの妥当性検証）
条件付きブレークポイント
Conditional breakpoints
強力なVS Codeのデバッグ機能は、式やヒット数に基づいて設定する機能があります。 あなたが、新しいブレークポイントを作成するとき、あなたは、ブレークポイントを追加や条件付きブレークポイントを追加する選択肢を持っています。 あなたが、条件付きブレークポイントを追加する場合、あなたは、式やヒット数の条件を選択するための、ドロップダウンを持っています。
備考
すべてのデバッガ拡張機能は、条件付きブレークポイントをサポートしています。 この場合、あなたは、条件付きブレークポイントを追加する動作を見ることはないでしょう。
式の条件
式がtrueと評価されるたびに、ブレークポイントが達成されます。
ヒット数の条件
Hit count condition
『ヒット数の条件』は、実行を「中断」する前に、ブレークポイントが、何回達成される必要があるかを制御します。
『ヒット数条件』が考慮されるかどうかに関係なく、そして、式の正確な構文がどのように探すかは、使用するデバッガ拡張機能に依存します。 この記念すべき到達点において、組み込みのNode.jsデバッガだけが、ヒット数をサポートしています。 （しかし、私たちは、他のデバッガ拡張機能が、すぐに続くことを願っています）。
Node.jsデバッガでサポートされるヒット数の構文は、整数、あるいは、演算子<、<=、=、>、>=、％の後に整数が続くかのどちらかです。
一部の例：
- ＞10 常に10ヒットの後に中断
- ＜3 最初の2回のヒットのあと中断する。
- 10は、≧10と同じ
- %2は、2回ヒットするたびに、中断します。
関数ブレークポイント
Function breakpoints
ソース・コードに、直接ブレークポイントを配置する代わりに、デバッガは、関数名を指定することによって、 ブレークポイントの作成をサポートすることができます。これは、ソースが利用できないが、関数名がわかっている状況で役立ちます。
「関数ブレークポイント」は、BREAKPOINTSの項目ヘッダで+ボタンを押すことで、作成します。：
注意：関数ブレークポイントのサポートは、以下の理由で制限されています。：
- すべてのデバッグ拡張機能は、関数ブレークポイントをサポートしています。（VS CodeのNode.jsデバッガ）。
- 関数ブレークポイントは、グローバルな、ネイティブでない関数に対してのみ動作します。
- 関数ブレークポイントは、一つだけ作成されることができます。関数が定義されている場合、（デバッガに表示されます）。
データ検査
Data inspection
変数は、DebugビューのVARIABLESの項目で 、あるいは、エディタ内で、それらのソースにマウスカーソルを上に重ねることによって調べることができます。 変数と式の評価は、CALL STACKの項目で、選択されたスタックフレームを基準にしています。
また、変数と式は、評価し、そして、DebugビューのWATCHの項目で監視できます。
デバッグ・コンソール
Debug Console
式は、Debug Consoleで評価されることができます。Debug Console開くために、 Debugペインの一番上、あるいは、Command PaletteのOpen Console動作を使用します。
ノードのデバッグ
Node Debugging
次のセクションは、Node.jsデバッガに固有のものです。
ノード・コンソール
Node Console
既定では、Node.jsデバッグ・セッションは、内蔵VS CodeのDebug Consoleで対象とするものを起動します。 Debug Consoleが、プログラムをサポートしないので、コンソールからの入力を読み込む必要があります。 あなたは、あなたの起動構成のそれぞれで、外部か、ネイティブ・コンソールや属性コンソールをexternalTerminal、 あるいは、integratedTerminalに設定して、VS Code統合ターミナルを使用するどれかを有効にすることができます。
ブレークポイントの妥当性検証
Breakpoint Validation
性能上の理由のため、Node.jsは、最初のアクセスで、ゆったりとJavaScriptファイルの中の関数を解析します。 結果として、ブレークポイントは、Node.jsによって見られ（解析され）なかったソース・コード領域内で、動作しません。
この動作は、デバッグには理想的ではないため、VS Codeは、自動的に、Node.jsに--nolazy オプションを渡します。 これが、遅延解析と確認を妨げます。ブレークポイントは、そのコードを実行前に検証することができます。（それで、それらはもはや「移動しません」）。
--nolazyオプションが、大幅にデバッグ対象の起動時間を増加させる可能性があるため、 runtimeArgs属性として--lazyを渡すことによって、あなたは簡単に脱出することができます。
その際、あなたは見つけるでしょう。あなたのブレークポイントのいくつかは、要求される行に「くっつきません」 しかし、その代わりに、これまでに解析されたコード内の次の可能な行に「移動します」。 混乱を避けるために、VS Codeは、常に、その場所にブレークポイントを表示します。 Node.jsが考える場所に、ブレークポイントがあります。BREAKPOINTSの項目では、 これらのブレークポイントは、要求されて実際の行番号の間で、矢印を表示します。：
このブレークポイントの検証は、セッションが開始すると発生します。そして、ブレークポイントは、Node.jsに登録されます。 あるいは、セッションが、既に実行されていて、そして、新しいブレークポイントが設定されるとき、 この場合、ブレークポイントは、異なる場所に「移動する」かもしれません。 後で、Node.jsは、すべてのコードを解析します（例えば、それを実行することによって）。 ブレークポイントは、BREAKPOINTS項目のReapplyボタンで、簡単に、要求された位置に再適用することができます。 これは、要求された場所に「戻る」ブレークポイントを作成する必要があります。
JavaScriptのソースマップ
JavaScript Source Maps
VS CodeのNode.jsデバッガは、JavaScriptソース・マッピングをサポートしています。 それは、transpiled言語のデバッグを助けます。例えば、TypeScriptやminified/uglified JavaScript。 ソースマップでは、それは、終わりまで、１ステップで可能です。あるいは、元のソースにブレークポイントを設定します。 ソースマップが、元のソースが存在しない場合、 あるいは、ソースマップが壊れていて、正常にマップできない場合、ソースと生成されたJavaScriptの間に、 ブレークポイントは、灰色の塗り潰されていない円として表示されます。
ソースマップ機能は、起動構成で、sourceMaps属性をtrueに設定することで、利用できます。 今、ソースファイルを指定できるようになりました。 （例えば、app.ts）プログラム属性で、作成された（翻訳された）JavaScriptファイルが、それらのソースの隣に存在しない場合、 しかし、別々のディレクトリで、あなたは、outDir属性を設定することによって、VS Codeデバッガが、それらを配置するのを助けることができます。 あなたが、ブレークポイントを元のソースにセットする時はいつでも、VS Codeは、outDirディレクトリに作成されたソースと関連するソースマップを捜し出そうとします。
ソースマップは、自動的に作成されないので、あなたは、それらを作成するために、TypeScriptコンパイラを設定する必要があります。：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch TypeScript",
"type": "node",
"request": "launch",
"program": "app.ts",
"sourceMaps": true,
"outDir": "bin"
}
]
}ソースマップは、インラインで、2種類で作成することができます。：
- インライン・ソース・マップ：
作成されたJavaScriptファイルは、最後にデータURIとして、ソースマップが含まれています（ファイルURIによってソースマップを参照する代わりに）。
- インライン・ソース：
ソースマップには、元のソース（パスでソースを参照する代わりに）が含まれています。
VS Codeは、インライン・ソースマップとインライン・ソースの両方をサポートしています。
VS CodeをNode.jsに添付する
Attaching VS Code to Node.js
あなたが、VS CodeデバッガをNode.jsプログラムに添付することを望む場合、以下のようにNode.jsを起動します：
node --debug program.js
or
node --debug-brk program.js--debug-brkオプションでは、Node.jsは、プログラムの最初の行で停止します。
対応する起動構成は、次のようになります。：
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Node",
"type": "node",
"request": "attach",
"port": 5858,
"restart": false
}
]
}ディバッグ・セッションが終了した後、Node.jsデバッガが、自動的に、再起動するかどうかに関係なく、restart属性は、制御します。 この機能は、あなたが、ファイル変更の上で、Node.jsを再開するために、nodemonを使用する場合、役に立ちます。 起動構成の属性をtrueに設定すると、Node.jsが終了し後、node-debugが、自動的に、Node.jsに、再接続を試みます。
コマンド・ラインで、nodemonを使用して、Node.jsプログラムserver.jsを起動します。：
nodemon --debug server.jsVS Codeでは、'attach'起動設定で、restart属性をtrueに設定します。
ヒント：
停止ボタンを押すと、デバッグ・セッションが停止し、 Node.jsとの接続を切断しますが、nodemon（そして、Node.js）は、実行し続けます。 nodemonを停止するためには、あなたは、コマンドラインから、それを削除する必要があります。
ヒント：
構文エラーの場合、nodemonは、エラーが修正されるまでNode.jsを正常に開始することができません。 この場合、VS Codeは、Node.jsに添付しようとし続けますが、最終的に、あきらめます（10秒後）。 これを回避するために、あなたは、より大きい値（ミリ秒単位）で、timeout属性を追加することによって、タイムアウトを増加させることができます。
コマンドの変数
Command variables
上記のように、VS Codeは、launch.json設定で変数置換をサポートします。 変数の高度なデータ型は、VS Codeのコマンドに結合されています。 デバッグ・セッションが開始されると、基盤となる起動構成で発生するすべてのコマンドの変数は、まず集められ、続いて、実行されます。 起動構成が、デバッグ・アダプタに渡される前に、すべての変数は、コマンドの結果で置き換えられます。
コマンドは、拡張機能内に実装され、登録されます。そして、その戻り値は、変数の値として使用されます。 コマンドの実装は、拡張APIで利用可能なUI機能に基づいた、いくつかの洗練された機能でUIなしで、簡単な式から並べることができます。
この機能の例は、node-debugにおいて見つかります。ここでは、変数${command.PickProcess}は、プロセス選択コマンドに結合されています。
例えば、下記の'Attach to Process'起動構成は、起動構成を実行するとき、ユーザーにNode.jsプロセスを選択させるために、変数を使用します。
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858
}次の手順
Next Steps
Node.jsの項目をまだ読んでいない場合は、以下を参照してください。：
Node.jsのデバッグの基礎に関する、チュートリアルを見るには、以下を確認してください。：
- イントロ・ビデオ－デバッグ－デバッグの基本を紹介する入門ビデオ。
サポートを実行するVS Codeのタスクについては、以下を参照してください。：
- 作業(原文リンク)－Gulp、GruntとJakeと一緒にタスクを実行します。エラーと警告を表示する
独自のデバッガ拡張機能を作成するには、次を参照してください。：
- デバッガ(原文リンク)－模擬サンプルから開始して、VS Codeデバッグ拡張を作成するための手順です。
一般的な質問
Common Questions
Q:サポートされたデバッグの筋書きは何ですか？
A:Node.jsに基づいたアプリケーションのデバッグは、素晴らしいVS Codeで、Linux、MacとWindowsでサポートされています。 多くの他のシナリオは、Marketplaceで利用可能なVS Codeの拡張(原文リンク)でサポートされています。
Q:私は、デバッグ・ビューのドロップダウンで、起動構成を表示させることができません。何が、間違っているのでしょうか？
A:最も一般的な問題は、あなたが、これまでにlaunch.jsonを設定していないことです。 あるいは、launch.jsonファイルに構文エラーがあります。
Q:Node.jsのデバッグには、どのNode.jsのバージョンが必要ですか？
A:最新のLTSバージョンのNode.jsをお勧めします。
原文 最終更新日 2016年11月2日
