SharePoint Frameworkのデバッグ方法

SharePoint Frameworkのデバッグを始める際にやや手間取ったので備忘を残しておきます。
プロジェクトの作成は済んでいるものとして記載しますので、やり方が不安な方は以前の記事を参考にしてください。

初めてのSharePoint Framework (略称：SPFx) : Hello World ! - 鍋綿ブログ

1.Visual Studio CodeにDebugger for Chromeをインストール

まだインストールしていない場合、推奨のポップアップがあがってくると思いますのでそれをクリックしてインストールします。拡張機能のページで検索してインストールしてもOKです。

拡張機能

2.プロジェクトをビルド

ターミナルタブでgulp buildとやってプロジェクトをビルドします。

ターミナルが表示されていない場合はメニューから追加できる

3.dist配下の「(Webパーツ名 or 拡張機能名).js」内にブレークポイントを設定

.tsファイルとか.tsxファイルとかにブレークポイントを作っても、私はうまく止めることが出来ませんでした。コンパイル結果であるjsファイルにブレークポイントを設定すると正常にブレークされます。標準設定から変更すると影響範囲が分かりづらいので、tsconfigファイルなんかはできるだけ触りたくないのですが。。。いずれ時間のある時に真面目に追ってみようと思います。

ソースは結合されていて見づらいので検索で見つけることを推奨

4.デバッグ

ターミナルでgulp serveとやってローカルサーバを起動します。
その後F5でデバッグを開始すると、設定した箇所でブレークする姿が確認できます。

以上、参考になれば幸いです。