Come utilizzare Web Inspector per il debug di Mobile Safari (iPhone o iPad)

Lo sviluppo di pagine web per dispositivi mobili o il debug della vostra applicazione ibrida è spesso difficile. Ma fortunatamente per chi progetta su iOS, a partire da iOS 6, Apple offre una funzione di web inspector remoto in iOS.

Web Inspector permette agli sviluppatori di applicazioni web e mobile di utilizzare macOS e OS XSafari Developer Tools per il debug remoto di contenuti web o applicazioni ibride in mobile Safari su iPad o iPhone.

È un modo semplice e pratico per eseguire il debug, ottimizzare e modificare le pagine web o le applicazioni ibride su iOS.

Per accedere a questi strumenti di sviluppo, abilitare il menu Sviluppa sulle preferenze Avanzate del Mac’s Safari.

Consigli rapidi

Segui questi rapidi consigli per far lavorare l’ispettore web in modo da poter eseguire il debug del tuo sito o dell’applicazione per Safari

• Reimposta la tua posizione e le impostazioni di privacy sul tuo iPhone, iPad o iPod touch. Vai a Impostazioni; Generale; Reset; Reimposta posizione & Privacy
• Assicuratevi di inserire nel computer lo stesso Apple ID del vostro iPhone, iPad o iPod touch
• Attivare la sincronizzazione di Safari iCloud sia per il computer che per anyiPhone, iPad o iPod touch
• Su iPhone o iPad, andare su Impostazioni; Safari; Avanzato e attivare Web Inspector
• Sul computer, aprire Safari e andare al menu Safari; Preferenze; Avanzato e segno di spunta Mostra il menu Sviluppa nella barra dei menu

Computer Mac richiesto

Ci dispiace gente di Windows ma Safari’s Web Inspector è compatibile solo con i Mac!

Usa lo stesso Apple ID e iCloud Sync!

Assicurati che sia il tuo iDevice che il tuo Mac siano registrati con lo stesso Apple ID e che tu abbia attivato Safari in iCloud.

Per il vostro iDevice: Impostazioni ;Profilo ID Apple; iCloud; Safari ; attivazione ; attivazione

Per il vostro Mac: Menu Apple; Preferenze di sistema; Apple ID o iCloud; Safari; Checkmarked

E controllate che Safari sia anche nella stessa versione

Assicurati che Safari sul tuo Mac sia la stessa versione di Safari sul tuo iDevice. Potrebbe essere necessario aggiornare la versione per iOS o la versione di Safari in esecuzione sul Mac.

Reimpostare la posizione e le impostazioni della privacy

1. Andare a Impostazioni; Generale
2. Selezionare Reset
3. Scegliere di Resettare la posizione & Privacy

Pro Keyboard ShortCut Suggerimento ShortCut su Mac per Web Devs

Se si preme CTRL+Command+R in Safari, è possibile vedere come un sito web apparirebbe su un particolare dispositivo selezionando il dispositivo.

Attivare la scorciatoia da tastiera per uscire dalla vista web dev.

Utilizzare Web Inspector per il debug di Safari mobile

1. 2. Sul tuo iPad, iPhone o iPod touch, toccare Impostazioni; Safari; Avanzato e attivare Web Inspector. Andenable JavaScript se non è già attivo

2. Sul vostro Mac, lanciate Safari e andate su Menu Safari; Preferenze; Avanzate poi spuntate ” Mostra il menu Sviluppa nella barra dei menu ” se non l’avete già fatto

3. 3. Collegare il dispositivo iOS al Mac con il cavo USB. Questo è fondamentale: è necessario collegare i dispositivi manualmente, utilizzando un cavo. Non funziona via WiFi!

4. Ora sul vostro iPad, aprite il sito web che volete debuggare, poi, sul vostro Mac, aprite Safari e andate al menu ” Develop “.Ora vedete il vostro iDevice che avete collegato con il vostro Mac. Se non avete nessuna pagina aperta sul vostro iDevice, vedete un messaggio che dice “No Inspectable Applications.”

5. Ora eseguirete il debug della pagina aperta su mobile Safari proprio come fareste con il debug su Mac, ispezionerete gli elementi DOM, modificherete i CSS, misurerete le prestazioni della pagina ed eseguirete i comandi Javascript.

Utilizzate lo strumento di debugger per aiutarvi a trovare la causa di eventuali errori JavaScript sulla vostra pagina web. Potete aggiungere breakpoint, eseguire il debug del javascript e controllare il valore delle variabili a runtime.

Safari dovrebbe anche rilevare eventuali errori CSS, HTML e JavaScript. E vedrete i dettagli di ogni errore nel debugger.

iDevice non si presenta nel menu di sviluppo in Safari?

• Cancella la tua cache Safari e i cookie
• Aggiorna Safari sul tuo Mac e iDevice se è disponibile un aggiornamento
  • Se si esegue una versione beta iOS o macOS, potrebbe essere necessario eseguire l’ultima beta su tutti i dispositivi
• Prova un altro cavo e/o porta sul tuo Mac. Assicurati che il cavo sia un vero cavo fulminante Apple o certificato MFI (Made For iPhone)
• Controllare che Web Inspector sia attivato (ON). Gli aggiornamenti di iOS a volte riportano l’impostazione predefinita su OFF. Quindi assicuratevi di controllare Impostazioni ; Safari; Avanzate; Web Inspector
  • Provare a spegnere Web Inspector, attendere 10 secondi e riaccendere
• TrySafari Technology Preview browser invece
• Abbandona Safari sul tuo Mac e riavvialo. Vedi se il tuo Mac Safari riconosce il tuo dispositivo e permette il debug
• Verificate di non utilizzare la modalità di navigazione privata di Safari se il vostro iDevice appare solo brevemente nel menu Sviluppa di Safari e poi scompare
• Apri il monitoraggio delle attività e controlla cosa succede con Safari