Experiments Never Fail

Vue+Nuxt+TypeScript のプロジェクトを VSCode でデバッグ可能にする

vue 初心者です。
Angular のマネをしたら、なんだかできたのでメモしておきます。

vue のプロジェクトは tokyo-metropolitan-gov/covid19 から派生した code4nagoya/covid19: 愛知県 新型コロナウイルス感染症対策サイト を使います。

VSCode の拡張機能は、

を入れています。

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 を実行します。

しばらく待つとブラウザでページが表示されるので、「当サイトについて」を押すと、ブレークポイントで停まります。

image.png

(なぜか仕掛けた行で止まってくれないこともあるけど、大目に見よう)

vue.js は何もわからないので、もっと良いやり方があったら教えて下さい。

今回の修正差分は

です。

物足りないところ #

F5 でデバッグ開始できるようになりましたが、Shift + F5(あるいはメニュー -> Debug -> Stop Debugging)すると、ブラウザは閉じますが、バックグラウンドで動いているローカルサーバーは停止しません。ファイル監視モードで常駐しているので放置でも問題ないですが、ちょっと気持ち悪いです。停止させるには Terminal で Ctrl+c しなければなりません。

参考 #

published at tags: Vue.js TypeScript VSCode Chrome