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

Lo sviluppo di pagine Web per dispositivi mobili o il debug dell'app ibrida è spesso difficile. Ma per fortuna per le persone che progettano su iOS, a partire da iOS 6, Apple offre una funzione di ispettore web remoto in iOS.

Web Inspector consente agli sviluppatori di app Web e mobile di utilizzare macOS e OS X Safari Developer Tools per eseguire il debug in remoto di contenuti Web o app ibride in Safari mobile su iPad o iPhone.

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

Per accedere a questi strumenti di sviluppo, abilita il menu Sviluppo nelle preferenze Avanzate di Safari del tuo Mac.

Segui questi rapidi suggerimenti per far funzionare Web Inspector in modo da poter eseguire il debug del tuo sito o della tua app per Safari

  • Ripristina le impostazioni di posizione e privacy sul tuo iPhone, iPad o iPod touch. Vai su Impostazioni> Generali> Ripristina> Ripristina posizione e privacy
  • Assicurati di accedere allo stesso ID Apple sul computer del tuo iPhone, iPad o iPod touch
  • Attiva la sincronizzazione di Safari iCloud sia per il computer che per qualsiasi iPhone, iPad o iPod touch
  • Su iPhone o iPad, vai su Impostazioni> Safari> Avanzate e attiva Impostazioni Web
  • Sul computer, apri Safari e vai al menu Safari> Preferenze> Avanzate e seleziona Mostra menu Sviluppo nella barra dei menu

Computer Mac richiesto

Mi dispiace gente di Windows ma Safari Web Inspector è compatibile solo con i Mac!

Usa lo stesso ID Apple e iCloud Sync!

Assicurati che sia iDevice sia il tuo Mac abbiano effettuato l'accesso con lo stesso ID Apple e di attivare o disattivare Safari in iCloud.

Per iDevice: Impostazioni> Profilo ID Apple> iCloud> Safari > attivato

Per il tuo Mac: Menu Apple> Preferenze di Sistema> ID Apple o iCloud> Safari> Segno di spunta

E controlla anche che Safari sia la stessa versione

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

Ripristina le impostazioni di posizione e privacy

  1. Vai su Impostazioni> Generale
  2. Seleziona Reimposta
  3. Scegli di ripristinare posizione e privacy

Pro Keyboard ShortCut Tip su Mac per sviluppatori Web

Se premi CTRL + Comando + R in Safari, puoi vedere come apparirebbe un sito Web su un determinato dispositivo selezionando il dispositivo.

Attiva o disattiva la scorciatoia da tastiera per uscire dalla vista di sviluppo web.

Utilizza Web Inspector per eseguire il debug di Safari mobile

1. Su iPad, iPhone o iPod touch, tocca Impostazioni> Safari> Avanzate e attiva Impostazioni Web. E abilita JavaScript se non è già attivo

2. Sul Mac, avvia Safari e vai al menu Safari> Preferenze> Avanzate, quindi seleziona " Mostra menu Sviluppo nella barra dei menu " se non l'hai già fatto

3. Connetti il ​​tuo dispositivo iOS al tuo Mac con il cavo USB. Questo è fondamentale: devi collegare i dispositivi manualmente, usando un cavo. Non funziona tramite WiFi!

4. Ora sul tuo iPad, apri il sito Web di cui desideri eseguire il debug, quindi, sul tuo Mac, apri Safari e vai al menu " Sviluppo ". Ora vedi il tuo iDevice connesso al tuo Mac. Se non hai alcuna pagina aperta su iDevice, viene visualizzato il messaggio "Nessuna applicazione ispezionabile".

5. Ora esegui il debug della pagina aperta su Safari mobile proprio come faresti per il debug su Mac, ispeziona gli elementi DOM, modifica CSS, misura le prestazioni della pagina ed esegui i comandi Javascript.

Utilizza lo strumento debugger per aiutarti a trovare la causa di eventuali errori JavaScript sulla tua pagina web. È possibile aggiungere punti di interruzione, eseguire il debug di JavaScript e ispezionare il valore delle variabili in fase di esecuzione.

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

iDevice non viene visualizzato nel menu Sviluppo in Safari?

  • Svuota la cache e i cookie di Safari
  • Aggiorna Safari sul tuo Mac e iDevice se è disponibile un aggiornamento
    • Se si esegue una versione beta iOS o macOS, potrebbe essere necessario eseguire la versione beta più recente su tutti i dispositivi
  • Prova un altro cavo e / o porta sul tuo Mac. Assicurati che il cavo sia un cavo Lightning Apple originale o certificato MFI (Made For iPhone)
  • Verifica che Web Inspector sia attivato. Gli aggiornamenti di iOS a volte ripristinano l'impostazione predefinita OFF. Quindi assicurati di selezionare Impostazioni> Safari> Avanzate> Impostazioni Web
    • Prova a disattivare Web Inspector, attendi 10 secondi e riattiva
  • Prova invece il browser Anteprima tecnologia Safari
  • Esci da Safari sul tuo Mac e riavvialo. Verifica se il tuo Mac Safari riconosce il tuo dispositivo e consente il debug
  • Verifica di non utilizzare la modalità di Navigazione privata di Safari se iDevice viene visualizzato solo brevemente nel menu Sviluppo di Safari e poi scompare
  • Apri Activity Monitor e controlla cosa succede con Safari

Suggerimenti per il lettore

  • Se stai utilizzando un iDevice più vecchio con iOS 6 o precedente, il browser web Safari del tuo dispositivo ha la sua console di debug integrata! Accedi alla Console di debug di Safari selezionando Impostazioni > Safari > Sviluppatore > Console di debug