【VSCode】Vue.jsのデバッグを行う方法 | IT土方の奮闘記
Vue.jsはブラウザ上でもデバッグすることが可能ですが、開発者コンソール上のsourceでは同じファイル名でいくつもファイル名が存在するので少し分かりづらく面倒臭く感じてしまいます…。 ですので、VSCode上のコードのブレークポイントをを貼ってデバッグする方法を紹介します。 ※Vue CLI3系での手順を記載します。2系は記載しませんのでページ下部の更新URLにてご確認ください。 開発者コンソール上ではファイルが分かりづらいことも… 冒頭で申し上げた通りですが、Chrome等の開発者コンソール上でデバッグを行うときにいくつもファイルが表示されてしまうことがあります。以下の画像は私が開発中のコードを開発者コンソール上で表示しているものです。 末尾のパラメータ以外は同じファイル名のファイルがいくつもあります。末尾にパラメータが付いていないものがオリジナルファイルかと思いきや、そういうわけで
Vue.jsの標準環境ではChrome上でBreakPointが発火しない - Qiita
解決策 devtoolを#cheap-module-eval-source-mapから#cheap-module-inline-source-mapに変更するだけ。 // eval-source-map is faster for development devtool: '#cheap-module-inline-source-map', //#cheap-module-eval-source-map', これでちゃんと.vueに貼ったブレークも発火します。 該当Issue 当方の環境 再発したときのために、一応環境も書いておく。 Windows10@1703(15063.138) Chrome@ 58.0.3029.96 (64-bit) vue@2.3.2 webpack@2.5.1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
