Vue+Nuxt+TypeScript のプロジェクトを VSCode でデバッグ可能にする
vue 初心者です。 Angular のマネをしたら、なんだかできたのでメモしておきます。
vue のプロジェクトは tokyo-metropolitan-gov/covid19 から派生した code4nagoya/covid19: 愛知県 新型コロナウイルス感染症対策サイト を使います。
VSCode の拡張機能は、
- Vetur
- Debugger for Chrome
を入れています。
1. SourceMap を有効にする
nuxt.config.ts に sourceMap を有効にする設定を記述します。
＜省略＞
googleAnalytics: {
id: 'xxx'
},
build: {
//// 追加ここから
extend(config, { isClient }) {
if (isClient) {
config.devtool = 'source-map'
}
},
//// 追加ここまで
postcss: {
plugins: [
autoprefixer({ grid: 'autoplace' }),
purgecss({
content: [
＜省略＞2. VSCode のタスクを追加する
.vscode/tasks.json に、デバッグを開始するためのタスクを追加します。
{
"version": "2.0.0",
"tasks": [
{
"label": "yarn-dev",
"type": "shell",
"isBackground": true,
"command": "yarn dev",
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": "^$"
},
"background": {
"activeOnStart": true,
"beginsPattern": "yarn run.*",
"endsPattern": ".*Waiting for file changes.*"
}
}
}
]
}yarn dev でローカルサーバーを起動、Webアプリが配置されますが、それをバックグラウンドで行うタスクです。
yarn dev コマンドは、その開始時に yarn run という文字列が出力されるので、それをタスクの開始を示す beginsPattern に指定します。
同じく、yarn dev でローカルサーバーの準備ができたときに Waiting for file changes という文字が出力されるので、それを "endsPattern" に指定しておきます。
つまり Waiting for file changes が来たら、このタスクは終了となります。
3. VSCode の起動設定を追加する
.vscode/launch.json に、デバッグを開始する設定を記述します。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "yarn-dev"
}
]
}Chrome を起動して http://localhost:3000 を開くというコマンドですが、"preLaunchTask": "yarn-dev" とすることで、バックグラウンドで yarn dev の準備ができたらブラウザを起動する、という挙動になります。
4. デバッグ実行してみる
例えば pages/about.vue のタイトルを返す行あたりにブレークポイントを張って、
F5 キーまたはメニュー -> Debug -> Start Debugging を実行します。
しばらく待つとブラウザでページが表示されるので、「当サイトについて」を押すと、ブレークポイントで停まります。
（なぜか仕掛けた行で止まってくれないこともあるけど、大目に見よう）
vue.js は何もわからないので、もっと良いやり方があったら教えて下さい。
今回の修正差分は
です。
物足りないところ
F5 でデバッグ開始できるようになりましたが、Shift + F5（あるいはメニュー -> Debug -> Stop Debugging）すると、ブラウザは閉じますが、バックグラウンドで動いているローカルサーバーは停止しません。ファイル監視モードで常駐しているので放置でも問題ないですが、ちょっと気持ち悪いです。停止させるには Terminal で Ctrl+c しなければなりません。