VSCodeでChromeをデバッグ(Debug)する方法をご紹介。
VSCodeにDebugger for Chromeをインストール
まず最初はVSCodeにDebugger for Chromeプラグインをインストールします。
①拡張機能を押下
②テキストボックスに”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”でビルドします。
次にデバッグしたい場所をクリック。
サーバーを起動。
デバッガを起動。
①「Debug」を選択
②「Start Debugging」を押下
するとブラウザが起動します。
ブレークポイントは「login」ボタン押下したとこにセットしてるのでログインID、パスワードを入力してloginボタンを押下すると
このように35行目で処理が止まって、変数の内容も確認できます。
簡単ですね!!
この記事でデバッグしたソースと設定
コメント