web-dev-qa-db-ja.com

XcodeでPhoneGapアプリのjavascriptエラーを確認する方法は？

XcodeでPhoneGapアプリをデバッグしたいのですが、コンソールでjavascriptエラーを表示できません。

javascriptiosxcodedebuggingcordova
82
mockee

Cordova/PhoneGapアプリでJavaScriptエラーを表示およびデバッグする最もエレガントな方法は、WebインスペクターをSafariブラウザーからiOSアプリのWebビューに接続することです（ただし、前述のTom Clarksonのように、少なくともiOS 6 ）。

  • IPadまたはiPhoneの設定アプリを使用して、Safariの詳細設定でWebインスペクターを有効にします
  • デバイスをUSB経由でMacに接続します（Safariの[開発]メニューの下に表示されます）
  • アプリを開始する
  • デバッグするWebビューに移動します
  • Macでは、Safariの[開発]メニューから、サブメニューからデバイスの名前とアプリ（HTMLページ）を選択します。
  • Web Inspectorウィンドウが開き、DOMの閲覧、ブレークポイントの設定などが可能になります。

screen dump of Safari Develop menu on OS X

これの設定に関するAppleのドキュメント

完全なサードパーティのチュートリアル

または、 iOS WebKit Debug Proxy をインストールした後、ChromeのWebインスペクターをiOSデバイスに接続できます。これにより、LinuxまたはWindowsから検査を実行する機能も開かれます。

IOSのHTML、CSS、およびJavaScriptへのリモートアクセスは、前述のデバッグプロキシの上に RemoteDebug iOS WebKit Adapter をインストールできるため、今日ではさらに柔軟になっています。このアダプターはWebKit Remote Debugging ProtocolをChrome Debugging Protocolに変換するため、これらの（サポートされているすべてのプラットフォームで）として利用可能になります代替のデバッグおよび検査ツール：

  • Visual Studioコード
  • Chrome DevTools
  • Mozillaデバッガー

ところで、Safari Web Inspectorを使用したリモートデバッグは、iOSシミュレータと組み合わせても機能します。

IOSバージョンごとのデスクトップSafariの最小バージョン

IOSの各バージョンについて、リモートWeb検査を使用するには、特定の最小バージョンのDesktop Safariが必要になります。以下のリストを参照してください。

iOS 6
Safari 6以降
iOS 7
Safari 6.1以降
iOS 8
Safari 7.1以降
iOS 9
Safari 8以降
iOS 10
Safari 9 +/10 +？コメントしてください;常に試してください Safari Technology Preview
iOS 11
Safari 11以降
iOS 12
Safari 12以降
82
ᴠɪɴᴄᴇɴᴛ

文書の先頭付近に次を貼り付けて、他のJavaScriptの前に実行されるようにします。

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

XcodeコンソールウィンドウでJavascriptエラーの詳細を確認してください。

更新：上記の手法は、未定義の変数などのエラーをログに記録します。ただし、コンマの欠落などの構文エラーにより、何もログに記録されずにスクリプト全体が破損します。

したがって、次のコードをonDeviceReady関数の先頭に追加する必要があります。

console.log('Javascript OK');

アプリの起動時に「JavaScript OK」がログウィンドウに表示されない場合は、どこかに構文エラーがあることを意味します。

欠落しているコンマを探す手間を省くために、最も簡単な方法は、次のようなJavascriptバリデーターにコードを貼り付けることです。

http://www.javascriptlint.com/online_lint.php

エラーを見つけてもらいます。

うまくいけば、デバッグの手間が省けます。

46
elMarquis

0.9.2（本日リリース）では、console.logはロギング用にプラットフォーム間で標準化されています（debug.logは非推奨）。

すべてのエラーをキャッチするiOS UIWebViewで公開されていないデスクトップWebViewで使用可能な関数があります（プライベートAPIを使用するプラグインにその機能をハッキングしようとしていますが、プラグインは開発専用です） ）、しかし今のところ、クリスが上記で提案したことを行い、try catchブロックをコードに入れてconsole.logを使用します

発生する可能性のある構文エラーをすばやくキャッチするために、開発時にデスクトップSafariにページをロードし、Webkitエラーコンソールを表示してすぐに更新します。

9
Shazron

XcodeでJavaScriptのデバッグを機能させるには、以下をご覧ください。

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

追加のトラブルシューティングに関する限り...
最初に、PC上のサファリでアプリを実行し、サファリのデバッガーを使用できます（またはchrome両方が同様のレンダリングエンジンを実行しているため）。これはヒットしません高度な論理エラーと多くのAPI問題がありますが、少なくとも多くの問題（基本的なJavaScript、HTML5など）のトラブルシューティングには役立つはずです。

3
Terrance

debug.logはPhonegapのXCodeコンソールにメッセージを送信します（例外の結果をログに記録するか、デバッグを行うことができます）が、Safariで他のjavascriptエラーをデバッグする必要がある（デスクトップまたはデバッグコンソールがオンになっているiphoneで）。 Javascriptエラーはまだ見つかりません。これは、iPhoneで実行したために発生し、Safariでコンソールをオンにした状態ではデバッグできませんでした（iPhoneのWebViewとSafariにはいくつかの違いがあることはわかっています）。

3
Kris Erickson

私はちょうど出会いました Weinre

これは、phonegap用のリモートjavascriptデバッガーです。独自のWeinreサーバーをセットアップするか、 http://debug.phonegap.com/ にあるサーバーを使用できます。

それはうまく機能しているようです-これまでのところ非常に感銘を受けました。

3
asgeo1

IOS 6を使用する場合は、（デスクトップサファリの開発メニューにある）サファリWebインスペクタをアプリに添付するだけで、完全なjavascriptデバッグを取得できます。

少し制限されている領域がいくつかあります-起動エラーとプラグイン呼び出し-しかし、それは他のほとんどすべてにうまく機能します。

3
Tom Clarkson

JavaScriptコンソールですべてのエラーを表示するには、このイベントリスナーを使用することに同意します

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

ただし、cordovaプラグインがインストールされていない限り、XCodesの「コンソール」には表示されません。プロジェクトフォルダーに移動して、次のように入力します。

? cordova plugin add cordova-plugin-console

これにより、javascriptコマンド 'console.log（' some string '）がXCodeに表示されます。

Gitなどが必要になることに注意してください...しかし、xcodeでphonegapプロジェクトを編集している場合は、おそらくそれがあります！

PS console.logを使用する前に、必ずcordova.jsスクリプトプラグインを配置してください。

<script type="text/javascript" src="/cordova.js"></script>
2
Arvin Amir

これをindex.htmlの先頭に入れてください

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>
0
Toolkit