VSCodeで複数のデバッグを同時起動する（Django + TypeScript）

VSCodeでDjangoの開発を行う場合、拡張機能のPythonを入れておくと、Django用のデバッグが自動的に作成されます。

これがあると、キー一つでサーバーが起動できるため、とても助かります。

ただ、以下の点が若干不満です。

TypeScript等、別途コンパイル等が必要なものがある場合に、別作業が入って面倒
JavaScriptのデバッグはブラウザでやることになってしまう
サーバーにアクセスするには、ブラウザ等でURLを入力する必要があって面倒

というわけで、これらの不満を解消するために、

Djangoデバッグ前にTypeScriptをコンパイルする
TypeScriptとPythonのデバッグを、VSCode上で行えるようにする

の二つの設定を行って、デバッグを楽にしましょう。

バージョンや環境

たくさん使います。

ツール等	バージョン
OS	Windows 10 Pro 64bit 1803
Visual Studio Code	1.28.2
Python	3.7.0
Django	2.1.1
TypeScript	3.1.3
bootstrap	4.1.3

TypeScriptインストールのために、node.jsとnpmが入っていますが、今回は関係ないので省略しています。

Visual Studio Code 拡張機能

拡張機能	バージョン
Python	2018.9.1
Debugger for Chrome	4.10.2

その他、Django開発補助の拡張機能がいくつか入っていますが、今回は無関係なので省略しています。

TypeScriptのビルド

これに関しては、前回の記事に書きましたので、下記を参照ください。

hiroronn.hatenablog.jp

ブラウザのデバッグをVSCodeで行う

拡張機能インストール

これは、拡張機能Debugger for Chromeで行います。

まず、拡張機能をインストールします。その後launch.jsonを開きまして、Ctrl + Spaceで入力補完を呼び出すと、Chrome: Launchという項目が出るので、選択します。

f:id:hiroronn:20181028133901p:plain

f:id:hiroronn:20181028134005p:plain

デフォルトだと、URLが

"url": "http://localhost:8080",

となっているので、ポートはデバッグ環境に合わせて直します。Djangoのデフォルトは8000です。

サイトが起動するか確かめる

手段は問わないので、Djangoのサーバーを起動します。サイトのルートフォルダで

python manage.py runserver

とし、サーバーを起動します。

その状態で、VSCode上のデバッグでLaunch Chromeを選択します。
すると、Chromeが開いて、Djangoで作っているサイトが起動するはずです。

ただし、この状態ではTypeScriptのデバッグはできません。

マッピングの追加

今回のサンプルプロジェクトでは、TypeScriptやJavaScriptをstaticフォルダに入れています。

f:id:hiroronn:20181028140005p:plain

そして、static要素へアクセスするURLは

sampleapp/static/app_src/…

のようになっています。

現在のデバッグ構成では、このパスを解決できないので、先ほど作ったChrome: launchにpathMappingという項目を追加します。

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8090",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "/static": "${workspaceFolder}/sampleapp/static"
            }
        },