JetBrains系IDEおよびVSCodeでAWS CDK(TypeScript)をデバッグする方法

JetBrains系IDEおよびVSCodeでAWS CDK(TypeScript)をデバッグする方法を説明します。

加藤諒

2021.04.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

おはようございます、加藤です。小ネタですがJetBrains系IDEおよびVSCodeでAWS CDKをデバッグする方法を説明します。

普通に書いている際はデバッグが必要になることはありませんが、高レベルコンストラクトに変更できないプロパティがある場合に、低レベルコンストラクトを抽出してプロパティを変更するといったような高度なことをする場合にはデバッグ機能で確認が出来ると便利です。

準備

CDKプロジェクトを生成します。

mkdir cdk-debug-demo && cd cdk-debug-demo
cdk init sample-app --language typescript

JetBrains系IDEの場合

Intellijを使ったデバッグの方法を説明します、最初にプロジェクトをIntellijで開きます。

Add Configuration...をクリックします。

+ボタンを押してリストを開きNode.jsをクリックします。キーボードでNode.jsと入力する事でリストをフィルタできます。

Node parameter: —require ts-node/register
JavaScript file: bin/cdk-debug-demo.ts

と入力してOKを押します。JavaScript fileはプロジェクトに応じて変更する必要があります、エントリーポイントのファイルを指定してください。(binディレクトリ配下のファイル)

適当にブレークポイントを設定して、?アイコンをクリックしてデバッグを開始します。

パラメータを確認したり、

デバッグコンソールを使って、defaultChildの確認を行ったりできます。

VSCodeの場合

.vscode/launch.jsonを下記のような内容で作成します。argsはプロジェクトに応じて変更する必要があります、エントリーポイントのファイルを指定してください。(binディレクトリ配下のファイル)

{
  "version": "0.1.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "CDK Debugger",
      "skipFiles": ["<node_internals>/**"],
      "runtimeArgs": ["-r", "./node_modules/ts-node/register/transpile-only"],
      "args": ["${workspaceFolder}/bin/cdk-debug-demo.ts"]
    }
  ]
}

適当にブレークポイントを設定して、▷CDK Debuggerの三角部分をクリックしてデバッグを開始します。