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 è possibile eseguire il debug remoto con Safari .

Aggiornare:

Questa non è più la risposta migliore, 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 iDevice tramite USB al tuo Mac
2. Apri Safari sul tuo Mac e attiva gli strumenti di sviluppo
3. Sul tuo iDevice: vai su Impostazioni> Safari> Avanzate e attiva la finestra di ispezione web
4. Vai a qualsiasi sito Web con il tuo iDevice
5. Sul tuo Mac: apri il menu sviluppatore e scegli il sito dal tuo iDevice (si trova nel menu Safari in alto)

Come sottolineato dalla risposta di Simons, è necessario disattivare la navigazione privata per far funzionare il debug remoto.

Impostazioni> Safari> Navigazione privata> OFF

La risposta selezionata è solo per Safari. Al momento non è possibile eseguire il debug remoto reale in Chrome su iOS, ma come con la maggior parte dei browser mobili è possibile utilizzare WeInRe per un semplice debug. È un po 'complicato da configurare, ma ti consente di ispezionare il DOM, vedere lo stile, cambiare il DOM e giocare con la console.

Impostare:

• Installa nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Apri http: // {wifi-ip-address}: 8080 / e copia il codice dello 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 viene visualizzata una linea verde in Client, il browser è connesso

Il bookmarklet è un po 'più una seccatura da installare. È più semplice se hai attivato la sincronizzazione dei segnalibri per Chrome desktop e mobile. Copia l'URL del bookmarklet dal server weinre locale (come sopra). Sfortunatamente non funziona perché non è codificato correttamente nell'URL. 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 in Segnalibri per dispositivi mobili . Chiamalo weinre o qualcosa di semplice da digitare. Dovrebbe essere sincronizzato con il tuo cellulare abbastanza velocemente, quindi carica la pagina che vuoi controllare. Quindi digita il nome del segnalibro nella barra dell'URL e dovresti vedere il bookmarklet come un suggerimento di completamento automatico. Fare clic per eseguire il codice bookmarklet :)

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

Hai alcune opzioni.

Opzione 1: Safari mobile di debug remoto tramite l'ispettore Safari. Se il tuo problema si riproduce in Safari per dispositivi mobili, questo è sicuramente il modo migliore per procedere. In effetti, passare attraverso il simulatore iOS è ancora più semplice.

Opzione 2: utilizzare Weinre per un'esperienza di debug ridotta . Weinre non ha molte funzionalità ma a volte è abbastanza buono.

Opzione 3: eseguire il debug remoto di uiWebView corretto che funziona 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 progetto esistente e scegli il progetto che hai appena scaricato.
3. Apri WebViewAppDelegate.m e modifica urlStringl'URL che desideri testare.
4. Esegui l'app nel simulatore iOS.
5. Apri Safari, apri il menu Sviluppo , scegli iOS Simulator e seleziona la tua visualizzazione web.
6. Safari Inspector ora ispezionerà il tuo uiWebView.

Da quanto ho capito, Google Chrome utilizza UIWebView di iOS anziché un'implementazione completa di Chrome come la controparte 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 accadere in Safari utilizzandolo. (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 bookmarklet.

Invece è possibile aprire una scheda nella 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 debuggare e incolla il codice del bookmarklet nella barra degli indirizzi.

L'ultimo passaggio è scorrere fino all'inizio della barra degli indirizzi e aggiungere "javascript:", poiché Chrome lo rimuoverà.

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.

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

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

Vorlon.JS può essere utilizzato per il debug remoto di iOS o di qualsiasi altro client.

1. Basta installarlo a livello globale utilizzando npm i -g vorlon
2. Avviare il server utilizzando vorlon
3. Con il server in esecuzione, apri http: // localhost: 1337 nel browser per visualizzare la dashboard di Vorlon.JS
4. L'ultimo passaggio è abilitare Vorlon.JS aggiungendo questo tag di script alla tua app:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Tutti i client connessi, ad esempio iPhone e Android, saranno disponibili nell'elenco dei client sulla dashboard di Vorlon.JS

Si noti che questo approccio può essere utilizzato anche per eseguire il debug di app non in esecuzione su localhost utilizzando ngrok . Vedi https://stackoverflow.com/a/45443203/2073920 per i dettagli.

disconoscimento

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

Devi anche disattivare 'Navigazione privata'.

Impostazioni> Safari> Navigazione privata> OFF

Anche io sto cercando la stessa funzionalità e, ad oggi, deve ancora essere implementato. Posso pensare a due opzioni, tuttavia,

1. Ho notato che il comportamento di Chrome e Safari è abbastanza identico; Chrome supporta persino il giroscopio e altri eventi correlati che sono supportati da Safari. Attualmente sto eseguendo il debug della mia app Web abilitando la console di debug su Safari (tramite Impostazioni-> Safari)

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

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 del DOM remoto. Non è il metodo più veloce, ma funziona su Windows.

Esiste 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 affinché ciò avvenga, dopodiché forse il debug sarà disponibile da Safari.

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

Sarà contento se aiuta qualcuno Link

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

È stato importante per me essere in grado di eseguire il debug di problemi specifici di Chrome, quindi ho deciso di trovare qualcosa che potesse aiutarmi in questo. Ho finito per buttare felicemente i miei soldi su 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 vorrei eseguire il debug. Ogni applicazione che utilizza quell'indirizzo apparirà nell'elenco in Ghostlab.

Altamente raccomandato.

Apri Safari Desktop iOS

Sviluppa -> Modalità progettazione reattiva

Fai clic su "Altro" sotto il dispositivo

Copia 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

Utilizza gli strumenti di ispezione di Safari.

Disclaimer: lavoro su BrowserStack. ^{[Confermato] che sia autorizzato a pubblicare questo messaggio ( posso suggerire un prodotto dell'azienda a cui sto lavorando? )}

Debug Safari su iOS (non per Chrome al momento, leggi in avanti per maggiori dettagli.)

Come funziona?

• Devi avviare una sessione su qualsiasi dispositivo reale (ci sono emulatori ma devi avviare una sessione su un dispositivo reale) su BrowserStack, ad esempio iPhone 6S - Safari / Chrome (non ci sono ancora devtools per Chrome, ma è sulla nostra Roadmap)
• Digita l'URL
• È possibile attivare DevTools per ispezionare la pagina Web aperta sul dispositivo remoto BrowserStacks. Ho condiviso gli schermi per lo stesso di seguito.

Utilizzo di DevTools con telefoni reali

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

Esecuzione di JavaScript nel telefono reale utilizzando DevTools

Passa alla Consolescheda, esegui il codice JavaScript, controlla l' console.log()output e così via ...

Scheda Rete, controlla intestazioni richiesta, risposta e così via ...

Supporto per DevTools su BrowserStack?

• DevTools è disponibile su:

  • Dispositivi reali - iOS - Safari (DevTools per iOS Chrome è sulla nostra tabella di marcia)
  • Dispositivi reali - Android - Chrome (per ora è disponibile solo Chrome sui dispositivi Android)

• Il browser del client deve essere Chrome o Firefox. Ciò significa che è necessario utilizzare il browser Chrome o Firefox su MacOSX o Windows per utilizzare DevTools dispositivo reale BrowserStack.

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

Maggiori dettagli al riguardo, fare riferimento alla sezione DevTools nella pagina Funzioni mobili .