ChromeでJupyer-labをDebugする方法

正確には、Jupyter-labの拡張機能を作成するときにchrome上でデバッグする方法となります。

背景

Jupyter-labに関するドキュメントがまだまだ少ない。
インターンシップで触ったのでその記録のために

必要なもの

chrome
VSCode
jupyter-lab 0.33.12
Debugger for Chrome(vscodeの拡張機能)

手法

• 準備 デバッグしたいファイルの何処かにconsole.logを入れて出力を確認できるようにしておく(任意)
• Jupyter-labをwatchモードで開く
• 拡張機能を開発してるローカルフォルダのルートディレクトリちょっかに.vscode/launch.jsonというファイルを作成する。これがデバッガーの設定ファイル。
• 内容はこんな感じ（環境によって変わります）

{
    "version": "0.1.0",
    "configurations": [
      // ローカルにあるファイルをデバッグ
      {
        // デバッグ設定の名称
        "name": "Launch local file",
        // デバッグ種別を指定（chrome/node/monoなど）
        "type": "chrome",
        // lanunchまたはattachを指定
        "request": "launch",
        //URL
        "url":"ここにjupyer-labで起動したlocalhostから始まるurlを入れる",
        // 読み込むHTMLファイルを指定（プロジェクトからのパスを指定）
        "webRoot": "${workspaceFolder}",
          "sourceMapPathOverrides": {
            "webpack:///..//../../../*": "${webRoot}/src/*"
          }
      }
    ]
}

• 拡張機能のフォルダ内でnpm run buildをする
• VSCode上でshift+command+Dを押してデバッグ画面を開く。console.logのところにブレイクポイントをおいて、左上の再生マークでプログラム実行する
• chromeが新たに起動して、Jupyterlabが開く、デバッグしたい拡張機能を実行すると　VSCODEの方のコンソールログに出力がされるのでその右端にあるファイル名をクリックすると、VSCODE上でそのコードのところに飛べる。後は気になるところにブレイクポイントをおいてステップを進める。
• コードを修正したときは、一度デバッガを終了してからコードを修正して、npm run buildをしてからデバッガをもう一度起動する

何か疑問があればコメント欄にてお願いします。