フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

VSCode(TypeScript)でChromeのデバッグ(Debug)をする方法

スポンサーリンク

スポンサーリンク

 VSCodeでChromeをデバッグ(Debug)する方法をご紹介。

 

 

VSCodeにDebugger for Chromeをインストール

まず最初はVSCodeにDebugger for Chromeプラグインをインストールします。 

f:id:ksakae1216:20190318225132p:plain

 

①拡張機能を押下

②テキストボックスに"debugger for chrome"と入力

③Installボタンを押下でインストール完了 

 

launch.jsonの修正

次に、launch.jsonを修正します。

もしlaunch.jsonが存在しない場合は、".vscode"フォルダ配下に作成してください。

gist2352e32a404fe7eafd9c82e421d574bb

 

11行目のURLのみ、自分の環境用に修正してください。 

 

デバッグ(Debug)

 launch.jsonを修正したら一度ビルドして下さい。

VSCodeメニューの「ターミナル」→「Run Build Task」でビルドできます。

 

私はAngular CLI使ってるので"npm run build"でビルドします。

f:id:ksakae1216:20190318230202p:plain

 

次にデバッグしたい場所をクリック。

f:id:ksakae1216:20190318230438p:plain

 

サーバーを起動。

f:id:ksakae1216:20190318230604p:plain

 

デバッガを起動。

f:id:ksakae1216:20190318230812p:plain

①「Debug」を選択
②「Start Debugging」を押下

 

するとブラウザが起動します。

f:id:ksakae1216:20190318231110p:plain

ブレークポイントは「login」ボタン押下したとこにセットしてるのでログインID、パスワードを入力してloginボタンを押下すると

f:id:ksakae1216:20190318231436p:plain

このように35行目で処理が止まって、変数の内容も確認できます。

 

簡単ですね!!

この記事でデバッグしたソースと設定

github.com