2012-11-11 11 views
27

Voglio ispezionare gli elementi CSS/HTML del mio sito Web nel mio browser Android. Tuttavia sarà su uno smartphone o l'SDK Android.Come posso controllare l'elemento in un browser Android?

qual è il modo migliore per farlo?

+0

possibile duplicato di [Ispeziona elementi dell'interfaccia utente in Android] (http://stackoverflow.com/questions/8304358/inspect-ui-elements-in-android) – rid

risposta

11

Chrome su Android consente di utilizzare gli strumenti di sviluppo di Chrome sul desktop per ispezionare l'HTML caricato dall'applicazione Chrome sul dispositivo Android.

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

+5

Sto bene con questo, tuttavia sarei più felice se Sono riuscito a farlo nel browser Android, non in Chrome, principalmente perché Chrome funziona già benissimo e ... sai, i problemi di compatibilità mi costringono a eseguire il downgrade, ma non ho modo di testarlo :( – Goodwine

+2

@Goodwine Take uno sguardo su https://www.jshybugger.com/. Attualmente è la soluzione migliore per il debug del browser Android. –

+1

@PaulIrish Al momento di questo post, ho continuato a cercare e ho trovato [weinre] (http: // people. apache.org/~pmuellr/weinre/docs/latest/Home.html), e funziona davvero bene una volta che si è in grado di gestirlo :) – Goodwine

30

Ha dovuto eseguire il debug di un sito per il browser nativo Android ed è venuto qui. Così ho provato weinre su un OS X 10.9 (come server weinre) con Firefox 30.0 (client weinre) e Android 4.1.2 (target). Sono davvero molto sorpreso del risultato.

  1. Scaricare e installare il runtime nodo da http://nodejs.org/download/
  2. Installare weinre: sudo npm -g install weinre
  3. Trova il tuo attuale indirizzo IP in Impostazioni> Rete
  4. Imposta un server weinre sulla propria macchina: weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. Nella tua browser call: http://YOUR.IP.ADRESS.HERE:8080
  6. Vedrai uno snippet di script, inseriscilo nel tuo sito: <script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. Aprire il client di debug nel browser locale: http://YOUR.IP.ADDRESS.HERE:8080/client
  8. Infine sul vostro Android: chiamare il sito che si desidera controllare (quello con lo script all'interno) e vedere come appare come "Target" nel browser locale. Ora puoi aprire "Elementi" o qualsiasi cosa tu voglia.

Forse 8080 non è la porta predefinita. Quindi al punto 4 devi chiamare weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE.

E non ricordo esattamente quando era, forse da qualche parte dopo il punto 5, ho dovuto accettare prompt delle connessioni in arrivo, ovviamente.

:) Buon debug

P.S. Sono ancora sopraffatto da quanto sia bello. Anche elementi di evidenziazione dei lavori O_O °

+0

Semplicemente fantastico. Grazie per il passo dopo passo. – rsc

+1

Oppure utilizzare al punto 4 'weinre --boundHost -all-' per collegarsi a tutte le interfacce – awidgery

+1

Inoltre, ho dovuto usare ngrok per creare un tunnel da remoto. Assicurati di associare ngrok allo stesso indirizzo IP (e non a localhost) o non funzionerà 'ngrok http 192.168.0.104: 8080' Quindi usa l'url ngrok nel tag script. –

4

È possibile ispezionare elementi di un sito Web nel dispositivo Android utilizzando il browser Chrome. Apri il browser Chrome e vai al sito web che desideri esaminare.Vai alla barra degli indirizzi e digita "view-source:" prima di "http" e ricarica la pagina. Verranno visualizzati tutti gli elementi della pagina.