Contents
基本操作でわからな部分は以前の記事を参考にして下さい。
VS Code拡張機能のインストール確認
コマンドプロンプトで開発中のプロジェクトに移動(cdコマンド)します。VS Codeを起動。(“code .”コマンド使用)
![](https://office-fun.com/wp-content/uploads/2021/10/01-3.png)
左側のメニューの拡張機能のボタンを押してください。下記、画像の赤囲み部分。そして、検索領域にて”Microsoft Office Add-in Debugger”と入力して、Microsoft Office Add-in Debugger拡張機能を検索して下さい。
![](https://office-fun.com/wp-content/uploads/2021/10/03-3.png)
インストールがされていなかった場合は、インストールして下さい。
![](https://office-fun.com/wp-content/uploads/2021/10/04-2.png)
VS Codeによるデバッグ方法
VS Codeの開始
コマンドプロンプトで開発中のプロジェクトに移動(cdコマンド)します。VS Codeを起動。(“code .”コマンド使用) 先ほど行っていた場合は、不要。
![](https://office-fun.com/wp-content/uploads/2021/10/01-3.png)
VS Codeがプロジェクトを読み込んで起動します。
![](https://office-fun.com/wp-content/uploads/2021/10/09-3.png)
VS Codeのブレークポイントの設定
VS Codeの拡張機能によりブレークポイントが設定可能です。行番号の左側にある領域にマウスを持って行くと、濃い赤になります。
![](https://office-fun.com/wp-content/uploads/2021/10/06-2.png)
移動をしてホバーして色が変わったら、クリックを行ってください。赤に色が変化します。
![](https://office-fun.com/wp-content/uploads/2021/10/07-2.png)
デバッグの開始
上 メニューの実行⇒デバッグの開始をクリックしてください。
![](https://office-fun.com/wp-content/uploads/2021/10/05_実行.png)
下のデバッグターミナル画面をご覧ください。
![](https://office-fun.com/wp-content/uploads/2021/10/09_red-frame.png)
? Allow local host loop back for Microsoft Edge WebView?(Y/n)
とターミナルに表示されるので、”n”と入力してください。
![](https://office-fun.com/wp-content/uploads/2021/10/10-2.png)
![](https://office-fun.com/wp-content/uploads/2021/10/11-3.png)
![](https://office-fun.com/wp-content/uploads/2021/10/12-2.png)
エクセル起動後、「Show Taskpane」ボタンが表示されますので、こちらを押してください。
![](https://office-fun.com/wp-content/uploads/2021/10/13-2.png)
WebViewの読み込み中止画面で、「OK」を押してください。
![](https://office-fun.com/wp-content/uploads/2021/10/14-2.png)
“My Office Add-in” Taskpaneが表示されますので、Runボタンを押してください。
![](https://office-fun.com/wp-content/uploads/2021/10/15-3.png)
VS Codeでブレークポイントの設定を行っていると、以下のようにブレークポイントで止まります。
![](https://office-fun.com/wp-content/uploads/2021/10/16-2-1024x653.png)
ブレークポイントの設定を行った箇所は、セルを黄色にする部分です。そこで止まっています。
![](https://office-fun.com/wp-content/uploads/2021/10/16_2.png)
そのままですと、ブレークポイントで動作が止まったままになりますので、VS Codeの上に表示されている以下のボタンのうち、一番左の続行ボタンを押してください。
![](https://office-fun.com/wp-content/uploads/2021/10/17_1.png)
続行をすると、エクセルの選択セルが黄色に塗られているのがわかります。
![](https://office-fun.com/wp-content/uploads/2021/10/18-1.png)
デバッグの終わり方
デバッグの終了は、エクセルを終了してください。自動でデバッグを終了する”npm run stop”が実行されます。
![](https://office-fun.com/wp-content/uploads/2021/10/19_エクセル閉じる.png)
デバッグを終了したVS Codeの状態。
![](https://office-fun.com/wp-content/uploads/2021/10/20-2-1024x652.png)
VS Codeでターミナルを閉じた場合
VS Codeのターミナルを閉じた場合は以下のようになっているかと思います。
![](https://office-fun.com/wp-content/uploads/2021/10/22_ターミナル閉じた場合-1024x655.png)
上のメニューの「ターミナル」⇒「新しいターミナル」をクリックしてください。新しいターミナルが起動します。
![](https://office-fun.com/wp-content/uploads/2021/10/23.png)
参考資料
VSCode の拡張機能のおかげで、デバッグが大変便利になりました。どんどん開発していきたいと思います。
![](https://office-fun.com/wp-content/uploads/cocoon-resources/blog-card-cache/62becbf9e66edbd7a674a2191e28faef.png)
この記事で紹介した方法がかなり洗練されて簡単になっています。以下のコマンドプロンプトでnpm start等を打ってデバッグする方法も紹介しております。(以前に比べればこちらでもだいぶやりやすくなっています。)