Glitch for VS Code で アプリをデバッグ！

GlitchではVS Codeのプラグイン(Glitch for VS Code)が公式に提供されています。コード補完やLint、フォーマットといったVS Codeならではの機能のほか、VS Code上でのデバッグも可能です。

以下にその手順と一部設定の注意点を記しておきます。
なお、現状Glitchのデバッグ機能はnode.jsのプロジェクトしか動作しません(公式サポートがnode.jsのみなので当然といえば当然ですね)。

前提

1. VS Code をインストール済みであること。
2. Glitch にサインアップ済みであること。
3. Glitch for VS Code をインストール済みであること。

手順

VS Codeでコマンドパレットに glitch と入力し、表示された候補から Glitch: Show Commands をクリックします。

Sign inをクリックします。

Sign in on glitch.com をクリックします。

ブラウザGlitchにサインインします。その後確認ダイアログが表示されるので リンクを開く をクリックします。

VS Codeで Sign in successful! と表示されればOKです。

再度コマンドパレットで Glitch:Show Commandsをクリックし、 Open Project をクリックします。

デバッグしたいプロジェクトを選択します。

Glitch上のリソース一式が表示され、これでライブコーディングができる状態になりました。

続いて任意のソースコード上にブレイクポイントを設定して、コマンドパレットから Glitch:Show Commands→Debugをクリックします。

アプリケーションを実行すると、ブレイクポイントで止まります。あとは思う存分デバッグするのみです。

なお、VS Codeの設定によってはデバッグ実行時に Error processing attach: Error: Could not connect to debug targetというエラーが発生し、デバッグができないことがあります。

その場合には、VS Codeの 基本設定→設定→JavaScript Debuggerにある Use Preview をOffにすることで回避できました。同じ現象が発生した方はお試しください。

まとめ

VS CodeでのGlitchプロジェクトのデバッグの流れをご紹介しました。デバッグそのものはGlitch上(Webブラウザ上)でも動作しますが、やはり使い慣れたエディタが使えるという開発体験はとてもリズムがよく、アプリの継続的な開発・メンテナンスにも繋がりそうです。
興味がある方はぜひお試しください。