VSCodeでvue.jsのプログラムがデバッグできない

# 事象
VSCodeでvue.jsを開発しようとしたが、デバッグができない。
実行前は、以下のようにブレークポイントが設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/fbcb95c8-db73-5741-5972-84d9c6679acd.png)

実行すると以下のようにブレークポイントが設定できない。そしてとまらない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/145e7e41-0384-d054-a867-5b43b600215c.png)

# 調査

### 以下手順で起動した
以下のように「実行とデバッグ」-「Webアプリ(Edge)」（chromeの場合は「Webアプリ(Chrome)」）を選択し、launch.jsonファイルを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/1a679055-8dc8-b627-932b-d6ba50ca8c4c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/38fd8321-db23-54c0-6525-df179b3c6feb.png)

この状態だと、実行してもブラウザは起動するが、ブレークポイントがグレーになる。

### 試したこと

色々調べると、VSCode上の設定で「debug:javascript.usePreview」の設定をオフにしたり、
「Allow Breakpoints Everywhere」のチェックが外れているからONにしたり↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/e46e3235-d4be-58a6-a324-9cda640732b7.png)

等があったが、「debug:javascript.usePreview」という設定項目はないし、「Allow Breakpoints Everywhere」の設定をONにしても変わらず、自分の使っているVSCodeのバージョン（1.77.3）で発生する事象とはどれも異なるみたい。

# 解消方法（Chromeの場合）
以下手順で、VSCode上でデバッグができるようになった。

- launch.jsonにsourceMapsの設定を有効にする。
    ```json:launch.json
    {
        // IntelliSense を使用して利用可能な属性を学べます。
        // 既存の属性の説明をホバーして表示します。
        // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "localhost に対して Chrome を起動する",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}",
                "sourceMaps": true
            }
        ]
    }
    ```
- vue.jsのアプリケーションを起動
`npm run serve`
- VSCode上で実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/ac3783db-1256-9372-3f9d-eae910e5e3be.png)
- VSCode上にブレークポイントを設定する。　※chromeの開発者ツール上で設定してもよい。
- 該当箇所に来ると、VSCode上のブレークポイントの箇所が来るとVSCode上でデバッグされる。同時に裏でchromeの開発者ツールでもデバッグができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/f213a3c6-e2ca-d423-5406-aaa9ea0d4fe3.png)


# 解消方法（Edgeの場合）

Chromeと同じ手順でデバッグできた。
launch.jsonの設定はこんな感じです。
```json:launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "localhost に対して Edge を起動する",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true
        }
    ]
}
 ```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2698682/4d27e5e9-169a-ee61-2e29-18c156f374bc.png)

# 参考サイト
https://qiita.com/westhouse_k/items/da4ae3eea8eaacb646ce
https://qiita.com/peisan/items/a33fd4073a020d4d0dfe
https://github.com/microsoft/vscode/issues/102493
https://www.tasc.co.jp/work/vue-js-vscode-%e3%81%a7%e3%83%87%e3%83%90%e3%83%83%e3%82%b0%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84%e6%99%82%e3%81%ae%e8%a7%a3%e6%b1%ba%e7%ad%96

# 最後に
AWSでの開発や、プログラミングの便利情報など「とやまTechカフェ」というブログで紹介しています。
よろしければこちらもぜひご覧ください。

https://toyama-tech-cafe.z-a-k-i.com/vscode-counter/

https://toyama-tech-cafe.z-a-k-i.com/vscode-plant-uml-wbs/

https://toyama-tech-cafe.z-a-k-i.com/terraformer-install/