web-dev-qa-db-ja.com

Androidブラウザーで要素を検査するにはどうすればよいですか？

AndroidブラウザーでWebサイトのCSS/HTML要素を検査したい。

ただし、スマートフォンまたはAndroid SDKを介します。

それを行う最良の方法は何ですか？

firebuggoogle-chrome-devtools
41
alnassre

Android上のChromeでは、デスクトップ上のChrome開発者ツールを使用して、ChromeデバイスのAndroidアプリケーションからロードされたHTMLを検査できます。

参照： https://developers.google.com/chrome-developer-tools/docs/remote-debugging

22
Michael Aaron Safyan

ネイティブAndroidブラウザー用にサイトをデバッグする必要があり、ここに来ました。そこで、OS X 10.9（weinreサーバーとして）とFirefox 30.0（weinreクライアント）およびAndroid 4.1.2（ターゲット）で weinre を試しました。その結果に本当に驚きました。

  1. http://nodejs.org/download/ からノードランタイムをダウンロードしてインストールします
  2. Weinreのインストール：Sudo npm -g install weinre
  3. [設定]> [ネットワーク]で現在のIPアドレスを確認します
  4. マシンにweinreサーバーをセットアップします：weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. ブラウザの呼び出しで：http://YOUR.IP.ADRESS.HERE:8080
  6. スクリプトスニペットが表示されるので、それをサイトに配置します：<script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. ローカルブラウザでデバッグクライアントを開きます。 http://YOUR.IP.ADDRESS.HERE:8080/client
  8. 最後に、Androidで：検査するサイト（スクリプトが含まれているサイト）を呼び出して、ローカルブラウザーで「ターゲット」としてどのように表示されるかを確認します。これで、「要素」または任意のものを開くことができます。

8080がデフォルトのポートではないのかもしれません。次に、ステップ4でweinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HEREを呼び出す必要があります。

そして、それがいつだったか正確には覚えていません。おそらく、ステップ5の後のどこかで、着信接続Promptを受け入れなければなりませんでした。

:)ハッピーデバッグ

追伸私はまだそれがどれほど良いかを圧倒しています。エレメントでもハイライト作業O_O°

34
leymannx

Androidブラウザーを使用して、ChromeデバイスでWebサイトの要素を検査できます。

Chromeブラウザーを開き、検査するWebサイトにアクセスします。

アドレスバーに移動し、「HTTP」の前に「view-source：」と入力して、ページをリロードします。

ページの要素全体が表示されます。

10
maa