Officeアドインの作り方 ー その4. アドインのデバッグ方法 (VS Code編)

officeアドイン
スポンサーリンク

基本操作でわからな部分は以前の記事を参考にして下さい。

スポンサーリンク

VS Code拡張機能のインストール確認

コマンドプロンプトで開発中のプロジェクトに移動(cdコマンド)します。VS Codeを起動。(“code .”コマンド使用)

左側のメニューの拡張機能のボタンを押してください。下記、画像の赤囲み部分。そして、検索領域にて”Microsoft Office Add-in Debugger”と入力して、Microsoft Office Add-in Debugger拡張機能を検索して下さい。

インストールがされていなかった場合は、インストールして下さい。

VS Codeによるデバッグ方法

VS Codeの開始

コマンドプロンプトで開発中のプロジェクトに移動(cdコマンド)します。VS Codeを起動。(“code .”コマンド使用) 先ほど行っていた場合は、不要。

VS Codeがプロジェクトを読み込んで起動します。

VS Codeのブレークポイントの設定

VS Codeの拡張機能によりブレークポイントが設定可能です。行番号の左側にある領域にマウスを持って行くと、濃い赤になります。

移動をしてホバーして色が変わったら、クリックを行ってください。赤に色が変化します。

デバッグの開始

上 メニューの実行⇒デバッグの開始をクリックしてください。

下のデバッグターミナル画面をご覧ください。

? Allow local host loop back for Microsoft Edge WebView?(Y/n)

とターミナルに表示されるので、”n”と入力してください。

自動で実行1
Webpackを自動で実行

エクセル起動後、「Show Taskpane」ボタンが表示されますので、こちらを押してください。

WebViewの読み込み中止画面で、「OK」を押してください。

“My Office Add-in” Taskpaneが表示されますので、Runボタンを押してください。

VS Codeでブレークポイントの設定を行っていると、以下のようにブレークポイントで止まります。

ブレークポイントの設定を行った箇所は、セルを黄色にする部分です。そこで止まっています。

そのままですと、ブレークポイントで動作が止まったままになりますので、VS Codeの上に表示されている以下のボタンのうち、一番左の続行ボタンを押してください。

続行をすると、エクセルの選択セルが黄色に塗られているのがわかります。

デバッグの終わり方

デバッグの終了は、エクセルを終了してください。自動でデバッグを終了する”npm run stop”が実行されます。

デバッグを終了したVS Codeの状態。

VS Codeでターミナルを閉じた場合

VS Codeのターミナルを閉じた場合は以下のようになっているかと思います。

上のメニューの「ターミナル」⇒「新しいターミナル」をクリックしてください。新しいターミナルが起動します。

参考資料

VSCode の拡張機能のおかげで、デバッグが大変便利になりました。どんどん開発していきたいと思います。

Office アドインをデバッグする - Office Add-ins
開発環境向けの Office アドインのデバッグ ガイダンスを見つける。

この記事で紹介した方法がかなり洗練されて簡単になっています。以下のコマンドプロンプトでnpm start等を打ってデバッグする方法も紹介しております。(以前に比べればこちらでもだいぶやりやすくなっています。)

タイトルとURLをコピーしました