Clever Geek Handbook

モバイルデバイスでJavaScriptをデバッグする

最近、スマートフォン用の小さなhtml5アプリケーションを作成する必要がありました。

なぜhtml5なのか？ すべてが非常に簡単です：モバイルバージョンをお持ちの場合は、数日で必要な状態にサイトを完成させるか、ゼロから書きます（それほど重要ではありません）。さまざまなプラットフォームにスプレーすることなく、1つのバージョンのコードのみをサポートし続けます。



アプリケーションを作成するために、 Phonegapを使用しました（ハブには十分な記事があるので、ツールの説明には入りません）。 HTML、javascriptはデスクトップでデバッグされ、正常にアセンブルされてテストスマートフォンにアップロードされたようですが、すべてがスムーズではありません。 テストの過程で、特定のプラットフォームとブラウザのみに特有のいくつかの不具合に遭遇する必要がありました（特定のDOMの場所にイベントハンドラを使用して入力を挿入すると、ブラウザは単純に落ち、主なことは何もしません、それは純粋です）アンドロイドとそのブラウザのバグ、この問題は「たくさんの血をだめにした」。最初はデバッガーに接続してそこで起こっていることを見るまで、何が起こっていて電話ギャップ曲線に罪を犯していたのか理解できなかったからです）



問題は、モバイルブラウザーで何が起こるか、どのエラーがいつ発生するかをどのように確認するかという非常に現実的なものでした。 ミッドフィールダーで、window.onerrorを介して解決策を見つけましたが、私にとっては、このアプローチは長期的にバグを検出するのに適しています。何かがうまく機能しない場合は、より便利なツールが必要です



Android用のhtmlアプリケーションをデバッグするには、Eclipseが最適です（ほとんどの場合、Eclipseを使用してアプリケーションをビルドします）。 Android SDKとEclipseのプラグインをインストールしている場合（ リンクをクリックして修正することができます）、ビューにlogCatがあり、デバイスに接続すると、console.log（）メッセージを含む受信したすべての情報が表示されますjavascriptによる出力+電話で実行されたすべてのアクションが表示されます。これは、イベント処理に問題がある場合のデバッグに役立ちます。

LogCatは日食がなくても使用できます。これはAndroid SDKツールですが、私にとってこのオプションは完全に便利ではありません。



phonegapの連中が推奨しているように、 iphoneには優れたweinreユーティリティがあります。 参照により詳細を読むことができますが、本質はこれです。プログラムをダウンロードして実行し、コンピューターポートのリッスンを開始します。 jsをアプリケーションのコードに追加します。これは、実行中のサーバーによってロードされ、それに接続して、アプリケーションとの通信を開始します。 さらに、すべてのデバッグは、Chromeデバッガーの標準シナリオに従って行われます。 これはプログラムを実行しますが、これは最も便利なオプションです。 クイックスタートガイド：

  1. アーカイブをダウンロードして解凍する
  2. インストールする
  3. パパに行きます〜/ .weinre /（作成しない場合）このテキストでserver.propertiesファイルを作成します 

    boundHost: -all- httpPort: 8081 reuseAddr: true readTimeout: 1 deathTimeout: 5
    もちろん、設定は自分で変更できます。

  4. 次に、マシンのIPを確認し、アプリケーションにこの行を追加して、weinreサーバーと通信するjsコードをロードします。 したがって、電話とコンピューターが同じネットワーク上にあり、abcをIPに置き換える必要があります。 電話またはシミュレータでアプリケーションを起動し、使い慣れた環境でデバッグを開始します。




彼女が生成するコードを実験してAndroidアプリケーションに実装することは可能だと思われますが、そこでは何が使用されているかを理解するためにjsを掘り下げることはしていません。



結論として、私は別の興味深い方法についてお話ししたいと思います、私は最近それに出くわしました、操作の原理はワインルに似ています。 このようなjsconsole.com サイトには、リモートデバイス上のhtmlにアクセスし、console.logを介してそこからメッセージを受信し、そのDOMツリーを操作できるツールが用意されています。 wienreの場合のように、これは確かに完全なデバッガーではありませんが、メソッドのシンプルさとアクセシビリティにより、それに注意を払うことができます！ このサイトには優れたドキュメントといくつかのトレーニングビデオがあるため、誰も問題なく使用できます。

簡単に言うと、サイトにアクセスし、コマンド「：listen」を入力し、発行されたスクリプトをWebサイトまたはアプリケーションにコピーして、すべてを実行する必要があります。すべて機能します。



もちろん、これらはすべて可能なオプションではなく、他の説明もありましたが、それらを使用するのが難しいため、リストから除外しました。 誰かが立派な候補でリストを補うことができるなら、私はそれだけです！ （著者の著作権で記事に含めます）


More articles:


All Articles