VS CodeでVue 3のソースにブレークポイントを設定してみる
Posted on
はじめに
VS Code でのデバッグ で記載していただいた内容を自分なりにやってみたことのメモになります。
ここでは、VueCliを使ってVue3をインストールして、ChromeとVS Codeでソースにブレークポイントを設定できるところまでを確認します。
環境
■OS
macOS BigSur
■ インストールしているソフト
node : v14.1.0
nmp : 6.14.8
yarn : 1.22.10
Vue CLI: 4.5.10
■ ブラウザ
Google Chrome : 98.0.4758.102
拡張機能:Vue.js devtools
Vue.js 3のサンプルを作成する
1) サンプルのインストール
Vue CLIを使ってVue 3のサンプルを作成します。 この記事でのサンプル名は vue3-sample とします。
作成には以下のコマンドを実行しました。
vue create vue3-sample上記のコマンドを実行すると
? Please pick a preset:という質問とどのバージョンをインストールするかの選択肢が出力されますので Default (Vue 3 Preview)を選びます。
2)サンプルの実行する。
コマンドを実行した直下にフォルダ「vue3-sample」ができているはずですので
yarn serveでプログラムを実行します。
cd vue3-sample
yarn serve3)ブラウザから画面を確認する。
ブラウザを開いて「http://localhost:8080/ 」 にアクセスします。
実行成功していれば以下のような画面が表示されているはずです。
デバックをする。
1)ファイル「vue.config.js」を作成してプロパティを設定する。
「vue3-sample」のフォルダの直下にファイル「vue.config.js」を作成して 以下の設定をします。
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}2)VSCodeを開いて「launch.json」を設定する。
VSCodeのアプリケーションを開いてフォルダ「vue3-sample」を開きます。
左の「実行とデバック」のアイコンをクリックして「実行とデバック」ボタンをクリックします。
「環境の選択」で「Chrome」を選択します。
ファイル「launch.json」が開くので以下のような設定になっていることを確認します。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}環境「Launch Chrome against localhost」を選んで「デバックを開始」をクリックすればchromeの新しいブラウザが開いて「http://localhost:8080/」が表示されます。
3)ブレイクポイントを設定してデバックする
VSCodeでファイル「src/components/HelloWorld.vue」を開いて scriptの要素の中にブレイクポイント用にdataを追加します。
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){ // 追加_ここから
return{
x:"debug"
}
} //追加_ここまで
}
</script>追加したdataのxにVsCodeのプレークブレークポイントを設定します。
ブレイクポイントを設定したら 再度VsCodeで「デバックを開始」をクリックすれば、下記の画像のようにブレークポイントを設定した箇所で処理がとまるようになります。
参考文献
[vscodeのブレークポイントを使ったデバッグ][2]