XcodeでPhoneGapアプリのJavaScriptエラーを確認するにはどうすればよいですか？

回答:

83

Cordova / PhoneGapアプリでJavaScriptエラーを表示およびデバッグする最も洗練された方法は、SafariブラウザーからiOSアプリのWebビューにWeb Inspectorを接続することです（ただし、Tom Clarksonがすでに述べたように、少なくともiOS6が必要です。 ）。

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

OSXでのSafari開発メニューのスクリーンダンプ

これを設定するためのAppleのドキュメント

徹底的なサードパーティのチュートリアル

または、iOS WebKit Debug Proxyをインストールした後、ChromeのWebInspectorをiOSデバイスに接続することもできます。これにより、LinuxまたはWindowsから検査を実行できるようになります。

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

  • VisualStudioコード
  • Chrome DevTools
  • Mozillaデバッガ

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

iOSバージョンごとのDesktopSafariの最小バージョン

iOSのバージョンごとに、リモートWeb検査を使用するためにDesktopSafariの特定の最小バージョンが必要になります。以下のリストを参照してください。

iOS 6
Safari 6+
iOS 7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
Safari 9 + / 10 +？コメントしてください; 常にSafariテクノロジープレビューをお試しください
iOS 11
Safari 11+
iOS 12
Safari 12+
— ᴠɪɴᴄᴇɴᴛ
ソース
2
同意しました。サファリWebインスペクターの使用は、Weinreよりも堅牢であり、JSlintツールに貼り付けるよりもエラーを見つけるのにはるかに高速です。また、DOM要素を検査および操作することもできます。これは素晴らしいことです。このアプローチを使用することをお勧めします。
— elMarquis 2014
1
接続に時間がかかるため、最初の読み込みメッセージは表示されません。
— Adriano Spadoni 2016
生産エラーはどうですか？WebViewに関する限り、アプリがクラッシュすることはありませんが、内部のjsがエラーをスローする可能性があります。したがって、iTunes Connectでクラッシュレポートは表示されませんが、ユーザーには白い画面が表示されます。
— ミルコ
@Mirko Web Inspectorはデバッグにのみ役立ち、iTunesConnectとは関係ありません。
— ᴠɪɴᴄᴇɴᴛ
@Mirko Cordova Crashlyticsプラグインを使用してアプリをビルドするか、GoogleFirebaseを使用できます。
— ᴠɪɴᴄᴇɴᴛ
47

以下をドキュメントの先頭近くに貼り付けて、他の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');

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

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

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

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

うまくいけば、それはデバッグからいくらかの苦痛を取り除くでしょう。

— elMarquis
ソース
9

0.9.2（本日リリース）では、console.logがログ用にプラットフォーム間で標準化されていることに注意してください（debug.logは非推奨）。

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

考えられる構文エラーをすばやくキャッチするために、開発時にデスクトップSafariにページをロードし、Webkitエラーコンソールですばやく更新します。

— シャズロン
ソース
1
Phonegap 1.1.0、Xcode 4.2ベータ版、およびiPhone w / iOS4.3とiPhonew / iOS 5.0エミュレーターの両方で、これは私には機能しません。console.log（ "message"）;を追加します。alert（ "message"）;がある場所で呼び出します。動作しますが、ログには何も書き込まれません。誰かが何が悪いのか知っていますか？
— nmr 2011年
4
そして答えは... console.logは、Phonegapがそれ自体を初期化するまで機能しません。body.onloadで呼んでいましたが、早すぎました。
— nmr 2011年
3

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

— クリスエリクソン
ソース
3

ウェインレに出会ったばかり

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

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

— asgeo1
ソース
1
@ asgep1両方のリンクが無効になりました！:(
— MackieeE 2015
3

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

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

— トムクラークソン
ソース
1
これは、これを行うための最善の方法です。これは、プラグインされたデバイスとIOSシミュレーターの両方で機能し、Weinreで同じことを達成しようとするよりも信頼性があります。
— elMarquis 2013
3

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のsafariでアプリを実行し、safariのデバッガー（または両方が同様のレンダリングエンジンを実行しているためChrome）を利用できます。これは、高度なロジックエラーや多くのAPIの問題には影響しませんが、少なくとも多くの問題（基本的なJavaScript、HTML5など）のトラブルシューティングに役立つはずです。

— テレンス
ソース
2

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プラグインがインストールされていない限り、XCodeの「コンソール」には表示されません。プロジェクトフォルダに移動し、次のように入力します。

? cordova plugin add cordova-plugin-console

これにより、javascriptコマンド 'console.log（' some string '）をXCodeに表示できるようになります。

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

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

<script type="text/javascript" src="/cordova.js"></script>
— アービンアミール
ソース
0

これを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>
— ツールキット
ソース
1
質問は、ビューではなくコンソールに表示されます。
— nym 2015
-2

これが私のために働いた簡単な方法です：

  • ターミナルのindex.htmlファイルを含むディレクトリにcdします

  • 呼び出して、Pythonを使用してhttpサーバーを起動します（私はPython 2.7を使用しました）：

    python -m SimpleHTTPServer

  • ブラウザにHTTPServerのアドレスを入力して、Safariでページを表示します。私にとって、URLは次のとおりです。 

    http://0.0.0.0:8000/

  • オープン開発ツール：

    Chromeでは、これはalt + command + iです。コンソールタブを表示します。ページを更新する必要がある場合があります。

    Safariの場合：Safari-> [設定]-> [詳細]-> [開発メニューの表示]をオンにします。開発メニュー->エラーコンソールの表示（またはalt +コマンド+ c）。ページを更新。Ctrlキーを押しながら5キーを押すと、[問題]タブが開きます。

— storm_m2138
ソース
3
これは、アプリケーションが単純なWebアプリである場合にのみ機能します。PhoneGap /デバイス機能の呼び出しは、標準のブラウザーでは機能しません。
— ザビエルポイナス2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.