iOSスマホアプリでCordovaログが出力されない – 解決方法 console.logで確認

Featured image

こんにちは。

Cordova でハイブリッドスマホアプリを作成する機会が多いのですが、iOS での動作確認時に Xcode でログが出力されず色々調べました。
その経緯と結果を残していきます。

作成したスマホアプリは
プラットフォーム:Cordova
言語:TypeScript/JavaScript

まず通常ネイティブスマホアプリを作成する際、Xcode のコンソールにて NSLog が出力されます。
なのでコンソールを見てみたものの console.log の内容は出力されず。

Safari 開発ツールで console.log を確認する方法

次に Safari の開発ツールで実機の Log を見ることができるらしいので確認しました。
手順は

  1. iPhone の設定で Web インスペクタを ON にする 設定 > Safari > 詳細 > Web インスペクタ ON

  2. Mac の Safari 環境設定にて「メニューバーに”開発”メニューを表示」にチェック入れる 詳細タブの最下部「メニューバーに”開発”メニューを表示」にチェック入れる

cordova-ios-console-log1

  1. Safari を開き上部バーの開発項目クリックし該当端末箇所を見る。

すると本来ならば、Log を確認したいアプリ名称が表示されるはず。
だが、「調査可能なアプリケーションがありません」と表示され、そもそも開発ツールを開くことができませんでした。

cordova-ios-console-log2

iPhone の Safari がプライベートモードでないこと確認済み。
iPhone の Safari を開くと、開発モードにすることができたので、Mac と iPhone 間の問題ではなさそう。
どうやら Cordova~iPhone 間の問題だと思われる。

cordova-plugin-console を導入し Xcode でログを出力する方法

調べてみると Xcode のコンソールに console.log を表示させる為には
「cordova-plugin-console」
を導入する必要があることがわかった。

cordova-ios v4.5.0 以降は「cordova-plugin-console」がプラットフォームの基本機能に取り込まれているが、私が使用していたのは v4.5.0 以前だったので別途インストールする必要があることがわかった。

cordova plugin add cordova-plugin-console

その後アプリインストールし console.log 出力されるか確認。

Window > Devices and Simulators > クリック > Open Console > 左側の対象デバイスをクリック > console.log 出力されているか確認する

出力されていたので OK。

comments powered by Disqus