Hoe kan ik elementen in een Android-browser inspecteren?

Ik wil de CSS/HTML-elementen van mijn website in mijn Android-browser inspecteren.

Het zal echter via een smartphone of de Android SDK zijn.

Wat is de beste manier om dit te doen?


Antwoord 1, autoriteit 100%

Chrome op Android maakt het mogelijk om de Chrome-ontwikkelaarstools op de desktop te gebruiken om de HTML te inspecteren die is geladen vanuit de Chrome-app op het Android-apparaat.

Zie:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging


Antwoord 2, autoriteit 80%

Moest fouten opsporen in een site voor native Android-browser en kwam hier terecht. Dus probeerde ik weinreop een OS X 10.9 (als weinre-server) met Firefox 30.0 (weinre-client) en een Android 4.1.2 (doel). Ik ben echt, echt verrast door het resultaat.

  1. Download en installeer node runtime van http://nodejs.org/download/
  2. Weinre installeren: sudo npm -g install weinre
  3. Ontdek uw huidige IP-adres bij Instellingen > Netwerk
  4. Stel een weinre-server in op uw computer: weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. Bel in uw browser: http://YOUR.IP.ADRESS.HERE:8080
  6. Je ziet een scriptfragment, plaats het op je site: <script src="https://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. Open de debug-client in uw lokale browser: http://YOUR.IP.ADDRESS. HIER:8080/klant
  8. Eindelijk op uw Android: bel de site die u wilt inspecteren (die met het script binnen) en zie hoe deze wordt weergegeven als “doel” in uw lokale browser. Nu kunt u “elementen” of wat u maar wilt openen.

Misschien 8080 is niet jouw standaardpoort. Dan in stap 4 moet u bellen met weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE.

En ik weet het niet precies wanneer het was, misschien ergens na stap 5, moest ik natuurlijk inkomende verbindingen accepteren.

Gelukkige foutopsporing

P.S. Ik ben nog steeds overweldigd hoe goed dat werkt. Zelfs elementen-markering werk


Antwoord 3, Autoriteit 16%

U kunt elementen van een website in uw Android-apparaat inspecteren met behulp van Chrome-browser.

Open uw Chrome-browser en ga naar de website die u wilt inspecteren.

Ga naar de adresbalk en typ “View-source:” vóór de “HTTP” en laad de pagina opnieuw.

De hele elementen van de pagina worden getoond.


Antwoord 4, Autoriteit 2%

Als u HTML, CSS wilt inspecteren of misschien hebt u JS-console nodig in uw mobiele browser. U kunt Excelent Tool Eruda gebruiken die u gebruikt, u hebt dezelfde ontwikkelaarstools op uw mobiele browser zoals in uw desctop-apparaat. Vergeet niet op UPVote 🙂 Hier is een link https://github.com/liriliri/eruda


Antwoord 5

Vaak eenvoudig deze code als een link:

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Open de bladwijzer (met op zoek naar de opgeslagen naam in de zoekbalk) na het openen van de site. De bladwijzer verschijnt op uw zoekbalk, open het en u hebt een inspectie element op Android.

Other episodes