質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

9005閲覧

Vue.js の TypeScript のコードを VS Code でデバックする方法

uttne

総合スコア17

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2020/01/22 15:44

お世話になっております。
タイトルのように Vue.js を TypeScript で書こうと思っているのですが、VS Code を使ったデバックができません。

TypeScript のコードにブレークポイントを設定し、VS Code のデバック機能で Chrome を立ち上げデバックしようとしても VS Code のブレイクポイントが
「Breakpoint set but not yet bound」
となっており、Chrome 上でコードを実行してもブレークポイントにヒットしません。

launch.json の sourceMapPathOverrides がおかしいのかとも思いましたが正直なところ何を設定すればよいのかわかりませんでした。

ご存じの方がいらっしゃればどうぞよろしくお願いいたします。

環境

  • OS : Windows 10 Pro
  • node : v11.11.0
  • npm : 6.7.0
  • vue : 3.12.1
  • Visual Studio Code : 1.41.1

launch.json

json

1{ 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "type": "chrome", 6 "request": "launch", 7 "name": "vuejs: chrome", 8 "url": "http://localhost:8080", 9 "webRoot": "${workspaceFolder}/src", 10 "breakOnLoad": true, 11 "sourceMaps": true, 12 "disableNetworkCache": true, 13 "sourceMapPathOverrides": { 14 "webpack:///./src/*": "${webRoot}/*" 15 } 16 } 17 ] 18} 19

vue.config.js

js

1module.exports = { 2 productionSourceMap: false, 3 configureWebpack: { 4 devtool: 'source-map' 5 } 6}

tsconfig.json

json

1{ 2 "compilerOptions": { 3 "target": "esnext", 4 "module": "esnext", 5 "strict": true, 6 "jsx": "preserve", 7 "importHelpers": true, 8 "moduleResolution": "node", 9 "esModuleInterop": true, 10 "allowSyntheticDefaultImports": true, 11 "sourceMap": true, 12 "baseUrl": ".", 13 "types": [ 14 "webpack-env" 15 ], 16 "paths": { 17 "@/*": [ 18 "src/*" 19 ] 20 }, 21 "lib": [ 22 "esnext", 23 "dom", 24 "dom.iterable", 25 "scripthost" 26 ] 27 }, 28 "include": [ 29 "src/**/*.ts", 30 "src/**/*.tsx", 31 "src/**/*.vue", 32 "tests/**/*.ts", 33 "tests/**/*.tsx" 34 ], 35 "exclude": [ 36 "node_modules" 37 ] 38} 39

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Debugging in VS Code does not work for Typescript Vue app
私もブレークポイントが「Unbound breakpoint」というメッセージでヒットしない事象が発生し、
上のリンクのコメント欄を参考にlaunch.jsonを以下のように変更したところヒットするようになりました。
(sourceMapPathOverridesのsrcの前に./を追加)
ご参考までに。

json

1{ 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "type": "chrome", 6 "request": "launch", 7 "name": "vuejs: chrome", 8 "url": "http://localhost:8080", 9 "webRoot": "${workspaceFolder}/src", 10 "breakOnLoad": true, 11 "sourceMapPathOverrides": { 12 "webpack:///./src/*": "${webRoot}/*" 13 } 14 } 15 ] 16}

投稿2020/12/01 00:38

wonder-brame

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問