Vue > Visual Studio Code デバッグ



基本的に以下の資料に沿って進めるメモです。

[VS Code によるデバッグ — Vue.js](https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html)


# 事前条件

## Debugger for Chrome

以下のDebugger for Chromeが入ってること。入ってなければ入れること。

[Debugger for Chrome - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/222f546d-59dd-5cff-a722-a8ebd08cca70.png)


edgeの場合は以下
[Debugger for Edge](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/2662847f-5603-2fb7-ac8d-c084d399aa84.png)




## vue-cli


# Vue-CLIにそってプロジェクトを作成

[Vue CLI Guide](https://cli.vuejs.org/) 内の手順に従い、[vue-cli](https://github.com/vuejs/vue-cli) を使ってプロジェクトをインストールして作成します。新しく作成したアプリケーションディレクトリに移動し、VS Code を開いてください。


## create project

```shell
vue create hello-world
```


## vue.config.js
vue.config.jsを作成する。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/90b41bdd-6eec-f75a-2b56-d6eeb60982c8.png)

内容を以下にする。

```js:vue.config.js
// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
```


## 設定ファイル

Activity Bar の Debugging アイコン をクリックして Debug ビューを表示
歯車アイコンをクリックして launch.json ファイルを作成する。

図では以下の順番。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/b4c7ad06-aa62-3509-a5e3-1cba1a080bea.png)

launch.jsonが表示されるので、以下のようにwebRoot以下を追記する。

```js:launch.json
{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
```

firefox の設定は以下

```js
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
```

edge の設定は以下

```js
        {
            "name": "Launch localhost",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "edge",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },
```


ちなみに、launch.jsonは.vscodeの配下に作成される。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/93037ab9-4a6b-d89b-b347-9b5fea12a2d3.png)


## ブレイクポイントを設定する

ブレイクポイントはコード行数の左側をクリックする事でON/OFF切り替える。
赤丸がついていればブレイクポイントが設定されている。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/cc1fb116-c9f3-16fb-9e3e-49439ba20c44.png)


上記画像では、src/components/HelloWorld.vue にdata()を追加してブレイクポイントを設定している。

```js
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      counter: 0
    };
  }
};
```


## デバッグの開始

### 起動

デバッグ前にアプリを起動する。

```shell
yarn run serve
```

### デバッグ

メニューからデバッグ→デバッグの開始を選択するか、
Debug ビューに移動し、緑の再生ボタンをクリックする。

ブラウザが開いて、ブレイクポイントにヒットする

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/24baa85a-9473-d284-b75c-86d5c3de0546.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/5706bfc7-dc13-2e44-05ff-95e33f945436.png)


# 代替え

## Vue Devtools

他にもデバッグの方法がありますが、最も人気がありシンプルなのは、[Chrome 向け](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) および [Firefox 向け](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) の優れた Vue.js devtools を使用することです。

## Vuetron
[Vuetron](http://vuetron.io/) は、vue-devtools が行った作業のいくつかを拡張した素晴らしいプロジェクトです。


## 単純なデバッグステートメント

上記の例は素晴らしいワークフローを持っています。しかしながら、[native debugger statement ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger)をあなたのコード内に直接使用できる代替オプションがあります。この方法を用いることを選択する場合、完了した時にそのステートメントを削除することを覚えておくことが重要です。

```js
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    const hello = 'Hello World!'
    debugger
    this.message = hello
  }
};
</script>
```


以上