Vue, Vuetifyがインストールされていない場合は、前の記事（Vue + Vuetifyでローカル開発環境をセットアップ）を参照しながら、Node.js, Vue, Vue CLI, Vuetifyのインストールをしてください。
この記事中のスクリーンショットはMacOSのものですが、Visual Studio CodeのTerminalを使えば、操作はほぼ同じです。
以下に入る前に、Visual Studio Codeをダウンロードしインストールしておいてください。
Debug環境の設定
まず、Visual Studio Codeで、Vueのソースコードに対して、ブレークポイントを設定し、ステップ実行しながらデバッグができることを確認します。
- Visual Studio Codeを起動し、Fileメニューから"New Window"を選択してWorkspaceを作る。
- Welcomeと表示されたページの、左側にある、Startの"Open Folder..."を選択するか、Fileメニューから"Add folder to workspace..."を選択し、前の記事で作成した、"test002"のフォルダーをWorkspaceに追加する。
- Debugの設定をするために、左側のデバッグボタンを押し、"create a launch.json file"を選択。Select Environment...で"Chrome"を選択。
- ファイルの作成場所を、workspaceに作成するかlaunch.jsonファイルを別途作成するかを聞かれる場合もあります。どちらでも構いませんが、ここでは、launch.jsonファイルを作成しました。これによって、test002/.vscode/launch.jsonファイルが作成されます。
Terminalでローカルのサーバを起動し、Debug開始
- Terminalメニューから"New Terminal..."を選択すると、下にshellあるいは、コマンドプロンプトが表示されます。作業ディレクトリは、test002になっているはずなので、ここで、
> npm run serve
と入力すると、開発用のローカルサーバが起動します。
- ローカルサーバが起動したことを確認して、左上の三角のボタンを押して、デバッグの開始をします。
- Chromeが起動して、自動的に localhost:8080に接続された状態になります。
- 停止するには、表示されているフロートメニューの停止を押します。
ステップ実行
デバッグには、ソースコード上でブレークポイントを設定し、ステップ実行が有効ですが、この環境でできるか確認してみましょう。
- main.jsファイルを選択して、ブレークポイントを設定します。ブレークポイントは、ソースコードの頭をクリックすると設定できます。ここでは、main.js内の、"Vue.config.productionTip = false"という行の頭をクリックします。赤い印がつけば、ブレークポイントが設定できています。
- 再度、左側のデバッグボタンを押し、左上の三角のボタンから、デバッガを起動すると、以下のように、ブレークポイントで停止した状態になることが確認できます。
- さっきのフローティングメニューから、ステップ実行、ステップイン、実行を続ける、などを選択してデバッグを行うことができます。
- ローカルのサーバを停止するには、Visual Studio Codeを終了するか、Terminalで、Cntl+C を入力すれば、サーバは停止します。
workspaceの作成
- 最後に、Visual Studio Codeのworkspaceを保存します。Fileメニューから、"Save Workspace As..."を選択します。
- test002ディレクトリに、"test002.code-workspace"として、保存します。
- WorkspaceファイルをGitの管理から除くために、".gitignore"ファイルを選択して、最後の行に、*.code-workspaceを追加しておきます。
まとめ
この記事では、Visual Studio Codeから、ローカルでサーバを起動し、Vueのアプリケーションの実行、ブレークポイントの設定ができることを確認しました。