Edited at

Vue > Visual Studio Code デバッグ

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

VS Code によるデバッグ — Vue.js


事前条件


Debugger for Chrome

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

Debugger for Chrome - Visual Studio Marketplace

image

edgeの場合は以下

Debugger for Edge

image


vue-cli


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

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


create project

vue create hello-world


vue.config.js

vue.config.jsを作成する。

image

内容を以下にする。


vue.config.js

// vue.config.js

module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}


設定ファイル

Activity Bar の Debugging アイコン をクリックして Debug ビューを表示

歯車アイコンをクリックして launch.json ファイルを作成する。

図では以下の順番。

image

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


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 の設定は以下

    {

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

edge の設定は以下

        {

"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


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

ブレイクポイントはコード行数の左側をクリックする事でON/OFF切り替える。

赤丸がついていればブレイクポイントが設定されている。

image

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

export default {

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


デバッグの開始


起動

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

yarn run serve


デバッグ

メニューからデバッグ→デバッグの開始を選択するか、

Debug ビューに移動し、緑の再生ボタンをクリックする。

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

image

image


代替え


Vue Devtools

他にもデバッグの方法がありますが、最も人気がありシンプルなのは、Chrome 向け および Firefox 向け の優れた Vue.js devtools を使用することです。


Vuetron

Vuetron は、vue-devtools が行った作業のいくつかを拡張した素晴らしいプロジェクトです。


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

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

<script>

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

以上