web-dev-qa-db-ja.com

デスクトップマシンで(Chromeではなく)Androidネイティブブラウザをデバッグする方法

GoogleのChrome DevTools(chrome:// inspect)whenを使用して、モバイルデバイスで実行されているWebアプリケーションのフロントエンドを正常にデバッグできます。 Chromeのブラウザー(ポート転送を使用)。Androidのネイティブブラウザーを使用して同じことを実行できるかどうか疑問に思っていました。つまり、Androidにプリインストールされているブラウザーは、このように見えます、より明確にするために、:-)

enter image description here

それを行う方法はありますか?このブラウザでchrome:// inspect内のタブを開くと、当然、開いたタブが表示されず、デバイスがネイティブブラウザから表示しているコンテンツを検査できません。

実際にchromeでネイティブブラウザーにバインドされているいくつかのUI関連の問題(CSS、JS)を見つけたため、これを行う方法が必要ですが、ネイティブブラウザーでは動作しません。

私も weinre を使用してみましたが、非常に便利ですが、LANのコンテキストでのみ使用できます。つまり、デバイスをLAN IPアドレスにバインドする必要があり、実際に必要です。 http://localhost(Chrome DevTools with port forwardingで行われるように)からWebアプリケーションにアクセスするには、ローカルホストのみに厳密に依存するサーバー側ソフトウェアを使用しているため(私の場合、できればそれはしません)。

Androidデフォルトのネイティブブラウザ?weinreやChrome DevTools?

注目してくれてありがとう!

PS:AndroidブラウザーはもうネイティブではないAndroid 4.4とにかく、互換性のためにそれが必要ですが、もちろん可能です(それはあるはずです)。

15
tonix

about:debugは少なくともJavaScriptコンソールで機能します。ネイティブのWebViewベースの限られたブラウザーで機能しない理由を理解するのに役立ちました。

2
stamster

Chrome開発者ツールを使用して、在庫で実行されているモバイルWebサイトをデバッグできますAndroidブラウザ、Webサイトが実行されているときにデバッグできるのと同じような方法でChrome Androidの場合:

これをまだ行っていない場合は、ここで認められている回答のすべての手順に従って、Chrome開発ツール(デスクトップコンピュータ))を使用してデバッグを有効にします。

プラグイン時にChrome DevToolsデバイスはデバイスを検出しません

  • デバイスがコンピュータに接続された状態で、在庫のWebページを開きますAndroidブラウザ。Chrome開発ツールにアクセスすると、デバイスを接続すると、次のように表示されます(通常の[検査]ボタンが右側に表示されます)。[検査]ボタンをクリックすると、在庫をデバッグできますAndroid Chrome dev tools!

enter image description here

0
Chris Halcrow

これにはchrome:// inspectも使用できます。そのページからchromeのように起動できないため、ネイティブブラウザが実行されていることを確認してください。

また、adbを使用してリストに表示されない場合、デバイスは通常これを修正します。

adb devices

完全な手順については、Androidこのトピックに関するドキュメント https://developer.chrome.com/devtools/docs/remote-debugging をご覧ください。

0
Delconis