Debug remoto iOS

Con la recente versione di Chrome per iOS, mi chiedevo come abilitare il debug remoto per Chrome iOS?

Aggiornamento: con il rilascio di iOS 6, ora è ansible eseguire il debug remoto con Safari .

Aggiornare:

Questa non è la migliore risposta, per favore segui i consigli di gregers .

Nuova risposta:

Usa Weinre .

Vecchia risposta:

Ora puoi utilizzare Safari per il debug remoto. Ma richiede iOS 6.

Ecco una rapida traduzione di http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

  1. Collega il tuo iDevice via USB con il tuo Mac
  2. Apri Safari sul tuo Mac e triggers gli strumenti di sviluppo
  3. Sul tuo iDevice: vai su impostazioni> safari> avanzato e triggers l’ispettore web
  4. Vai a qualsiasi sito web con il tuo iDevice
  5. Sul tuo Mac: apri il menu dello sviluppatore e scegli il sito dal tuo iDevice (è in alto nel menu Safari)

Come sottolineato da Simons, è necessario distriggersre la navigazione privata per eseguire il debug remoto.

Impostazioni> Safari> Navigazione privata> DISATTIVATO

La risposta selezionata è solo per Safari. Al momento non è ansible eseguire il debug remoto in Chrome su iOS, ma come con la maggior parte dei browser mobili è ansible utilizzare WeInRe per alcuni semplici debug. È un po ‘di lavoro da configurare, ma ti permette di ispezionare il DOM, vedere lo stile, cambiare DOM e giocare con la console.

inserisci la descrizione dell'immagine qui

Impostare:

  • Installa nodejs
  • npm install -g weinre
  • weinre --boundHost -all-
  • Aprire http: // {wifi-ip-address}: 8080 / e copiare il codice di script di destinazione
  • Incolla il tag dello script nella tua pagina (o usa il bookmarklet)
  • Fare clic sul collegamento all’interfaccia utente del client di debug (http: // {wifi-ip-address}: 8080 / client / # anonimo)
  • Quando si ottiene una linea verde sotto Client, il browser è connesso

Il bookmarklet è un po ‘più di una seccatura da installare. È più semplice se hai triggersto la sincronizzazione dei segnalibri sia per Chrome desktop sia per dispositivi mobili. Copia l’URL del bookmarklet dal server locale di weinre (come sopra). Sfortunatamente non funziona perché non è codificato in url correttamente. Quindi apri la console JavaScript e digita:

 copy(encodeURI('')); // paste bookmarklet inside quotes 

Ora dovresti avere il bookmarklet con codifica url negli appunti. Incollalo in un nuovo segnalibro sotto Segnalibri mobile . Chiamalo weinre o qualcosa di semplice da digitare. Dovrebbe essere sincronizzato con il tuo cellulare abbastanza velocemente, quindi carica la pagina che desideri ispezionare. Quindi digita il nome del segnalibro nella barra dell’URL e dovresti vedere il bookmarklet come suggerimento di completamento automatico. Fare clic per eseguire il codice bookmarklet 🙂

inserisci la descrizione dell'immagine qui

Al momento non puoi eseguire direttamente il debug remoto su Chrome su iOS. Utilizza uiWebView che può agire in modo leggermente diverso da Mobile Safari.

Hai alcune opzioni.

Opzione 1: Remote-debug Mobile Safari utilizzando l’ispettore di Safari. Se il problema si verifica in Mobile Safari, questo è sicuramente il modo migliore per andare. In effetti, passare attraverso il simulatore iOS è ancora più semplice.

Opzione 2: utilizza Weinre per un’esperienza di debug ridotta . Weinre non ha molte funzioni, ma a volte è abbastanza buono.

Opzione 3: eseguire il debug remoto di un uiWebView appropriato che funzioni allo stesso modo.

Ecco il modo migliore per farlo. Dovrai installare XCode .

  1. Vai su github.com/paulirish/iOS-WebView-App e “Download Zip” o clone.
  2. Apri XCode, apri il progetto esistente e scegli il progetto appena scaricato.
  3. Apri WebViewAppDelegate.m e modifica urlString in modo che sia l’URL che desideri testare.
  4. Esegui l’app in iOS Simulator.
  5. Apri Safari, apri il menu Sviluppo , scegli iOS Simulator e seleziona la tua webview.
  6. Safari Inspector ora ispezionerà il tuo uiWebView.

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

Da quanto ho capito, Google Chrome utilizza l’UIWebView di iOS piuttosto che un’implementazione completa di Chrome come la controparte di Android.

Molte console remote funzionano bene. http://farjs.com è il mio progetto, e sono stato in grado di eseguire correttamente il debug di problemi specifici di Crome iOS e non di quelli in Safari che lo utilizzano. (e probabilmente tutti gli altri browser mobili)

Il problema è che l’iniezione del codice di debug è leggermente complicata poiché Chrome non ti consente di installare bookmarklets.

Invece si potrebbe aprire una scheda sulla pagina che si dovrebbe eseguire il debug e un’altra su farjs.com e quindi fare clic su “il bookmarklet”

Copia il codice JS del bookmarklet, torna alla prima scheda, con la pagina da debugare e incolla il codice bookmarklet nella barra degli indirizzi.

L’ultimo passaggio consiste nello scorrere fino all’inizio della barra degli indirizzi e aggiungere “javascript:”, poiché Chrome lo rimuoverà.

Non l’ho provato, ma il proxy di debug di iOS WebKit (ios_webkit_debug_proxy / iwdp) presumibilmente consente di eseguire il debug di UIWebView in remoto. Dal README.md

Ios_webkit_debug_proxy (ovvero iwdp) consente agli sviluppatori di ispezionare MobileSafari e UIWebViews su dispositivi iOS reali e simulati tramite l’interfaccia utente di Chrome DevTools e il protocollo di debug remoto di Chrome. Le richieste DevTools sono tradotte nelle chiamate di servizio di Remote Web Inspector di Apple.

Raccomando Vorlon , funziona come Weinre. Mi piace l’interfaccia utente di Vorlon e supporta SSL , la mia applicazione è in HTTPS, ho provato weinre con ngrok, ghostlab e vorlon, solo vorlon funziona bene.

È inoltre necessario che la “Navigazione privata” sia distriggersta.

Impostazioni> Safari> Navigazione privata> DISATTIVATO

Vorlon.JS è la soluzione migliore per il debug remoto di iOS o di qualsiasi altro client.

  1. Basta installarlo globalmente usando npm i -g vorlon
  2. Avvia il server usando vorlon
  3. Con il server in esecuzione, apri http: // localhost: 1337 nel tuo browser per visualizzare il dashboard di Vorlon.JS
  4. L’ultimo passo è abilitare Vorlon.JS aggiungendo questo tag script alla tua app:
  5. Tutti i client connessi, ad esempio iPhone, Android, saranno disponibili nell’elenco dei clienti sul dashboard di Vorlon.JS inserisci la descrizione dell'immagine qui

Nota che questo approccio può anche essere usato per eseguire il debug di app non in esecuzione su localhost usando ngrok. Vedere https://stackoverflow.com/a/45443203/2073920 per i dettagli

Riferimenti

http://vorlonjs.com

https://ngrok.com

disconoscimento

Sono solo un utente e non sono affiliato con Vorlon.JS e ngrok

Anche io sto cercando la stessa funzionalità, e da oggi, è ancora da implementare. Posso pensare a due opzioni tuttavia,

  1. Ho notato che il comportamento di Chrome e Safari è abbastanza identico; Chrome supporta anche il Giroscopio e altri eventi correlati supportati da Safari. Al momento eseguo il debug della mia app Web abilitando la console di debug su Safari (Through Settings-> Safari)

  2. Prova anche Adobe Shadow, che consente il debug remoto / ispezione e sincronizzazione.

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) è un altro modo per eseguire il debug di tutti i dispositivi mobili IOS e Android (senza Windows Phone). Utilizza weinre per l’ispezione / modifica DOM remota. Non è il metodo più veloce, ma funziona su Windows.

C’è un bug aperto su Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Sfortunatamente dipendono da Apple per aprire un’API in WKView perché ciò accada, dopo di che forse il debug sarà disponibile da Safari.

Nota: non ho alcuna affiliazione con i creatori di Ghostlab Vanamco.

Per me era importante poter eseguire il debug di problemi specifici di Chrome, quindi ho deciso di trovare qualcosa che potesse aiutarmi. Ho finito per buttare felicemente i miei soldi in Ghostlab 3 . Posso testare i browser mobili Chrome e Safari come se li stessi visualizzando sul mio desktop. Mi dà solo un indirizzo LAN da utilizzare per qualsiasi dispositivo che mi piacerebbe eseguire il debug. Ogni applicazione che utilizza quell’indirizzo verrà visualizzata nell’elenco in Ghostlab.

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

Altamente raccomandato.

Sto usando remotedebug-ios-webkit-adapter, funziona bene per me con IOS e debugger aperto in Chrome su Windows 10.

Saremo lieti se aiuti qualche link

Disclaimer: lavoro su BrowserStack. [Confermato] se sono autorizzato a postare questo ( posso suggerire un prodotto dell’azienda in cui lavoro? )

Esegui il debug di Safari su iOS (non per Chrome al momento, leggi avanti per maggiori dettagli).

Come funziona?

  • È necessario avviare una sessione su qualsiasi dispositivo reale (ci sono emulatori ma è necessario avviare una sessione su un dispositivo reale) su BrowserStack, ad esempio iPhone 6S – Safari / Chrome (nessun devtools per Chrome ancora, ma è sulla nostra tabella di marcia)
  • Digita l’URL
  • È ansible triggersre DevTools per ispezionare la pagina Web aperta sul dispositivo remoto BrowserStacks. Ho condiviso gli schermi per lo stesso di seguito.

Usare DevTools con i telefoni reali

Passa il mouse sopra gli elementi, modifica HTML, CSS, proprio come funzionano gli sviluppatori di browser desktop.

DevTools su telefoni reali, eseguendo il debug di siti Web reattivi.


Esecuzione di JavaScript nel telefono reale usando DevTools

Passare alla scheda Console , eseguire codice JavaScript, verificare l’output di console.log() e così via …

eseguire JavaScript nei telefoni reali usando devtools


Scheda Rete, verifica intestazioni richiesta, risposta e così via …

Scheda Rete per controllare le richieste


Supporto per DevTools su BrowserStack?

  • DevTools sono disponibili su:

    • Real Devices – iOS – Safari (DevTools per iOS Chrome è sulla nostra Roadmap)
    • Dispositivi reali – Android – Chrome (solo Chrome è disponibile sui dispositivi Android per ora)
  • Il browser client deve essere Chrome o Firefox. Ciò significa che devi utilizzare il browser Chrome o Firefox su MacOSX o Windows per utilizzare BrowserStack Real Device DevTools.

Nota: è necessario acquistare un piano per testare su tutti i dispositivi reali, in quanto utente gratuito, si avranno due dispositivi Real Android (inclusi tablet) e un paio di dispositivi Real iOS (inclusi tablet). Inoltre, sottolineando la parola Real Devices perché forniscono anche emulatori.

Maggiori dettagli su questo, si prega di fare riferimento alla sezione DevTools sulla pagina Caratteristiche mobili .

Apri Safari Desktop iOS

Sviluppa -> Modalità di progettazione retriggers

Fai clic su “Altro” sotto il dispositivo

Incolla questo: Mozilla / 5.0 (iPad; CPU OS 10_2_1 come Mac OS X) AppleWebKit / 602.1.50 (KHTML, come Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Usa gli strumenti di ispezione di Safari.