VSCodeを使ったWio 3G/Wio LTE M1NB1のデバッグ

Wio 3G/Wio LTE M1NB1は、基板上に[CMSIS-DAP](http://arm-software.github.io/CMSIS_5/DAP/html/index.html)というのが載っていて、各種開発ツールで実行や一時停止、変数のウォッチといった、デバッグ操作が可能です。
ここでは、Visual Studio Codeを使ったデバッグ操作のやり方を紹介します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/ffcefb4c-976b-35bc-d22c-2193f3d951f3.png)

> 残念なことにArduino IDEではデバッグ操作ができません。IDEにこのような機能が無いからです。

# デバイス

現在、日本国内で入手、利用できるWioLTEシリーズは3製品あります。このうち、デバッグできるのはWio3GとWioLTEM1NB1の2製品だけです。

* ~~(WioLTE1)[Wio LTE JP Version](https://www.seeedstudio.com/Wio-LTE-JP-Version-v1-3-4G-Cat-1-Espruino-Compatible-p-3044.html)~~ ←CMSIS-DAPが載っていないためデバッグ不可
* (Wio3G)[Wio 3G SORACOM Edition](https://soracom.jp/products/module/wio_3g_soracom_edition/)
* (WioLTEM1NB1)[Wio LTE M1/NB1(BG96)](https://soracom.jp/products/module/wio_lte_m1_nb1/)

# パソコン

Windowsパソコンでデバッグ可能です。Macパソコンはデバッグできません。

> Macパソコンでデバッグできる方法を知っていたらぜひともコメントください！

* Windowsパソコン
* ~~Macパソコン~~

# セットアップ

まず、[Wio cell lib for Arduinoドキュメント](https://seeedjp.github.io/Wiki/Wio_cell_lib_for_Arduino/home-ja.html)の環境セットアップを実施して、Arduino IDEでWio3G/WioLTEM1NB1のコンパイル、実行ができるようにしてください。


[Visual Studio Codeサイト](https://code.visualstudio.com/)から、Visual Studio Codeをダウンロード、実行してインストールしてください。

次に、[MarketplaceのArduino](https://marketplace.visualstudio.com/items?itemName=vsciot-vscode.vscode-arduino)にある`Install`をクリックしてください。
すると、Visual Studio Codeが起動して拡張機能:Arduinoページが表示されるので、`インストール`をクリックしてください。インストールが終わったら、`再読み込みしてアクティブにする`をクリックしてください。
拡張機能（Ctrl+Shift+X）の有効の欄に、ArduinoとC/C++が表示されていれば正常です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/3321c7d6-9451-fff4-92e8-48655c9501ee.png)

# デバッグ

サンプルスケッチLedSetRGBをデバッグしてみましょう。

## デバッグ準備

コマンドパレット（Ctrl+Shift+P）の`Arduino: Examples`を選択して、Examples from Custom LibrariesのWio_cell_lib_for_Arduinoにある、basic/LedSetRGBをクリックしてください。Visual Studio Codeが新しいウィンドウで表示されます。（元のVisual Studio Codeは閉じても大丈夫です。）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/025c50b2-40e3-92ea-0698-20b97894a20e.png)

ステータスバーの`<Select Board Type>`をクリックして、Selected BoardとDebug、Uploadを選択してください。ここのDebugはOFFでも構いません。

> ここのDebugは、デバッグ機能の有効/無効ではなくて、ライブラリからデバッグ情報をシリアルコンソールに出力するか否かの設定です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/e5af686d-a2a5-cf51-5f9e-b99a6b03b64a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/57d67fb5-e50b-fb6c-f258-94ad4ce58686.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/895fd5c3-9d81-2747-5439-38acf86d0ff6.png)

デバッグ（Ctrl+Shift+D）に切り替えて、構成に`Arduino`を追加してください。
このときに、launch.jsonが開きますので、閉じてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/24177e04-9c1e-9a6a-7d5f-b32cf0f22a0e.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/12aaa951-4c92-6e9c-b1fb-9d77dab8bffe.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/e7c159fe-63f6-f043-b7a6-a4ee263798d6.png)

## デバッグ開始

エクスプローラー（Ctrl+Shift+E）で、`LedSetRGB.ino`をダブルクリックしてエディタに表示させてください。
そして、デバッグ（Ctrl+Shift+D）に切り替えてください。

ブレークポイントを試してみましょう。
31行目の左をクリックして、赤い丸印を付けてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/21af5681-c5e4-678e-2dc1-5614cd04e804.png)

パソコンにWio3G/WioLTEM1NB1をUSB接続して、デバッグの開始（F5）を実行してください。
デバイス上でプログラムが実行開始し、さきほど指定した31行目で停止（ブレーク）します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/0ea96625-1a94-28c0-b777-758172ff2b05.png)

一番左の続行ボタン（F5）をクリックすると、停止箇所から実行が続行され、ふたたび31行目で停止します。
loop()が一回実行されたので、デバイスのLEDが赤色に点灯します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109634/e8126556-5dfc-d8cb-07c4-b87fca871b47.png)