Android ブラウザーで Web サイトの CSS/HTML 要素を検査したいと考えています。
ただし、スマートフォンまたは Android SDK 以上になります。
それを行う最良の方法は何ですか?
Android ブラウザーで Web サイトの CSS/HTML 要素を検査したいと考えています。
ただし、スマートフォンまたは Android SDK 以上になります。
それを行う最良の方法は何ですか?
Android 上の Chrome を使用すると、デスクトップ上の Chrome 開発者ツールを使用して、Android デバイス上の Chrome アプリケーションから読み込まれた HTML を検査できます。
参照: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
ネイティブ Android ブラウザーのサイトをデバッグする必要があり、ここに来ました。そこで、Firefox 30.0 (weinre クライアント) と Android 4.1.2 (ターゲット) を使用して、OS X 10.9 (weinre サーバーとして) で weinreを試しました。この結果には本当に、本当に驚いています。
sudo npm -g install weinre
weinre --boundHost YOUR.IP.ADDRESS.HERE
http://YOUR.IP.ADRESS.HERE:8080
<script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
おそらく、8080 はデフォルトのポートではありません。次に、ステップ 4 で に電話する必要がありますweinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE
。
そして、それがいつだったのか正確には覚えていません。おそらく、ステップ 5 の後のどこかで、もちろん、着信接続プロンプトを受け入れなければなりませんでした。
楽しいデバッグ
PS私はまだそれがどれほどうまくいくかに圧倒されています。要素を強調する作業でも
このコードをリンクとしてブックマークするだけです:
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
サイトを開いた後、ブックマークを開きます(検索バーで保存された名前を検索して)。ブックマークが検索バーに表示されて開くと、Android で要素を検査します。