解決する課題

VSCodeでDebugger for Chromeのプラグインを使ってvue.jsのデバックする

https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html
この方法。

ソースコードでブレークポイントを設定しようとしても灰色のマルがついて設定できない。

解決策

webpackのdevtoolの設定を、'inline-source-map'にする。

devtool: 'source-map'
↓
devtool: 'inline-source-map'

inlineにする理由

RemoteDevelopmentを使用して開発していたため、source-mapがchromeブラウザ側で参照できてなかった様子。

Debugger for Chromeのドキュメントに次の記述がありました。

Usage with remote VSCode extensions
～～省略～～
Since the extension can't currently access the remote disk, sourcemaps can't be read from disk. If sourcemaps are inlined, they will still be used. If possible, they will be downloaded through your webserver.

remote のディスクにアクセスできないからsource-mapを参照できない。

vue.jsでは、webpackを使っていて、source-mapの設定をしていて、まさにこれに当てはまってました。

inlineだったら取得できる。