この記事はMonaca Advent Calendar 2019 - Adventar、1日目の記事になります。
Monacaでは、アプリの表示確認やデバッグに際して様々な方法が存在します。あまりにも多いので、どれが最適なのか分からない人も多いことでしょう。
そこでデバッグ方式別に向き不向きを紹介します。
1. Web IDEのプレビュー
Web IDEを使って開発する際に最もよく使うのがプレビューでの表示確認でしょう。この方法は最も手軽な一方、アプリとの機能差もあるので注意が必要です。
- 表示はHTTPSで行われます
- MonacaアプリはHTMLファイルをfile://で読み込むので、URLスキームがアプリと異なります
- CORS制限があります
- プレビューではCORS制限があるので、リソースの取得に際して制限があります。CORS制限のないAPI、JSONPなどを使う必要があります
- ブレークポイント、コンソールはWebブラウザの開発者ツールのものが利用できます
- プラグインは利用できません
- プラグインが動く前提で作っているとエラーが出てしまうので、何らかの回避策が必要です
2. Monacaデバッガー
MonacaデバッガーはApp Store、Google Playで配布されています。Web IDEでのプロジェクトやLocalKit、Monaca CLI内でのプロジェクトもMonacaデバッガー上で確認できます。
- いくつかのプラグインは元々組み込まれています
- プラグインを使っていると、Monacaデバッガーで動くのにデバッグビルドでは動かないといったエラーが出ることがあります
- USBデバッグはできません
- iOSと母艦をUSBケーブルで繋いでSafariのインスペクタを使うような操作はできません
- 独自に追加したプラグインは利用できません
- Charlesを使えばネットワーク接続内容をモニタリングできます
3. カスタムビルドデバッガー
独自のプラグインを組み込んだMonacaデバッガーを作成します。独自のプラグインを使いつつMonacaアプリを開発する際には、カスタムビルドデバッガーを活用しましょう。
- プラグインはプロジェクト標準のものと独自に組み込んだものだけになります
- プッシュ通知のプラグインなどは動作しない場合があります
- USB接続でデバッグできます
- ブレークポイントを差し込むこともできます
- ネットワーク監視もできます
4. デバッグビルド
ある程度開発が進んできたらデバッグビルドに進みます。
- リリースビルドと変わらない使い勝手です
- この状態で正しく動いていないと、リリースは難しいでしょう
- アプリ内課金、プッシュ通知などはリリースビルドと異なります
- USBデバッグできません
- デバッグビルドではUSBケーブルを接続したデバッグは利用できません
- Charlesを使えばネットワーク接続内容をモニタリングできます
5. シミュレータビルド
iOSシミュレータ上で動作するように作られたデバッグビルドです。デバッグビルドと同等の機能ですが、証明書などの設定が不要です。macOSのiOSシミュレータ上で利用できます。
6. Localkitの開発者ツール
Localkitでは開発者ツール相当のインスペクタが利用できます。Web IDE上での開発者ツール相当の使い方ができます。
- プラグインのコードは動作しません
- ブレークポイントが利用できます
- ネットワークの監視もできます
7. Monaca CLIでのプレビュー
Monaca CLIではWebブラウザからのプレビューが可能です。これはMonaca IDEのプレビュー同等です。
まとめ
Monacaのデバッグ方法は意外と多いので、最適なものを選ぶようにしてください。個人的には以下の順序がいいかと思います。
- (Web IDEの場合) Web IDEの開発者ツール / （LocalKitの場合）LocalKitのインスペクタ / （Monaca CLIの場合）Webブラウザの開発者ツール
- 独自のプラグインを使い始めた場合：カスタムビルドデバッガー
- リリース前の動作確認：デバッグビルド
- リリースビルド