Molti sviluppatori si trovano in difficoltà quando hanno bisogno di visualizzare il codice sorgente di una pagina web direttamente su dispositivi mobili come iPhone e iPad.
Ispezionare il codice sorgente direttamente dal dispositivo mobile è utile soprattutto quando la tecnica di sviluppo utilizzata per creare una pagina web prevede che il codice sorgente cambi a seconda del device in uso ad esempio a seguito di verifiche sullo User-Agent o altre variabili d’ambiente.
In queste situazioni, poter accedere al sorgente direttamente dal dispositivo mobile è essenziale durante le operazioni di debug per verificare se il sito riconosce correttamente il dispositivo e si comporta come previsto.
Purtroppo però Safari Mobile, il browser predefinito sui dispositivi di Apple, non offre una funzione nativa per visualizzare il sorgente della pagina e ciò può rappresentare un ostacolo per gli sviluppatori che necessitano di esaminare rapidamente il codice HTML durante il lavoro da mobile.
Fortunatamente, esistono soluzioni pratiche e semplici per superare questa limitazione. In questo articolo ti mostrerò come visualizzare il codice sorgente HTML su iPhone e iPad utilizzando strumenti nativi, come l’app Comandi Rapidi, e alternative come app di terze parti o (modalità per esperti) attraverso il collegamento via cavo tra dispositivo iOS e computer Mac.
Indice
Usare Comandi Rapidi per visualizzare il codice HTML di una pagina web
L’app Comandi Rapidi è uno strumento potente preinstallato su tutti i dispositivi iOS, che consente di creare automazioni e scorciatoie personalizzate.
Tra le tante possibilità offerte da questo strumento c’è anche quella di consentire agli sviluppatori di integrare la tanto agognata funzionalità all’interno del browser.
Vediamo, passo passo, come configurare un comando per visualizzare il codice sorgente di una pagina web:
Creare un Comando Rapido per visualizzare il sorgente HTML
Apri l’app Comandi Rapidi sul tuo iPhone o iPad.
Tocca il pulsante + nell’angolo in alto a destra per creare un nuovo comando.
Il comando viene creato con un nome di default. Puoi rinominarlo cliccando sulla frecciata accanto al nome che apre un menu con una serie di opzioni tra cui “Rinomina”.
Dai un nome significativo al comando, come “Visualizza Sorgente HTML”. Puoi anche scegliere un’icona e un colore personalizzati.
Aggiungere azioni al Comando Rapido
Per configurare il funzionamento del nostro comando “Visualizza Sorgente HTML” tocca “Aggiungi Azione”.
Cerca e seleziona l’azione “Crea HTML da RTF” (RTF è acronimo di Rich Text Format)
Aggiungi una nuova azione: cerca e seleziona “Visualizzazione Rapida”.
Ora clicca sul simbolo con la “i” che nell’iPhone si trova al centro in fondo.
Questa icona aprirà un pannello con diverse impostazioni dove dovremo attivare la voce “Mostra in Condivisione”.
Clicchiamo su “Fine” per salvare il nostro Comando rapido che comparirà in cima all’elenco dei nomadi attivi sul nostro dispositivo.
Testare il Comando Rapido per la visualizzazione del codice sorgente di una pagina web
Apri una qualsiasi pagina web in Safari e tocca il pulsante di condivisione (l’icona con una freccia rivolta verso l’alto) e poi seleziona il comando “Visualizza Sorgente HTML”.
Se il processo di configurazione del Comando rapido è stato eseguito correttamente, il sorgente HTML della pagina sarà mostrato in una finestra di anteprima.
Questo metodo è veloce, gratuito e non richiede app di terze parti. Tuttavia, ha alcuni limiti. Ad esempio il codice sorgente viene mostrato così com’è, non viene indentato e non ha colorazioni che ne agevolano la lettura e la comprensione.
Vediamo quindi quali altre opzioni esistono per raggiungere lo stesso risultato in modo più “raffinato” e usabile.
Visualizzare il Codice HTML su iPhone e iPad utilizzando app di terze parti
Come detto ci sono diverse alternative per visualizzare il sorgente di una pagina web sui dispositivi mobili Apple. Ecco alcune delle opzioni più popolari tra quelle disponibili sull’App Store:
Ecco una panoramica di alcune applicazioni iOS utili per visualizzare e analizzare il codice sorgente delle pagine web direttamente su iPhone e iPad, con le relative informazioni sui costi:
HTML Viewer Q
HTML Viewer Q è un’app leggera per la gestione di file HTML su dispositivi iOS. Consente di importare file tramite la condivisione file di iTunes e offre funzionalità per la visualizzazione e l’editing del codice. Le caratteristiche principali includono:
- Ricerca nel sorgente: trova rapidamente specifiche porzioni di codice.
- Evidenziazione della sintassi: migliora la leggibilità del codice.
- Navigazione a schede: permette di lavorare su più documenti contemporaneamente.
L’app è gratuita e compatibile con iPhone, iPad e iPod touch con iOS 11.0 o versioni successive.
SourceView Pro
SourceView Pro porta la potenza dello sviluppo web desktop sul browser Safari di iOS. Consente di visualizzare e analizzare il codice sorgente di qualsiasi pagina web attraverso un’interfaccia professionale e funzionalità avanzate, tra cui:
- Evidenziazione della sintassi: offre un tema personalizzabile per una migliore leggibilità.
- Formattazione avanzata: include opzioni come “Pretty Print” per una formattazione del codice più chiara.
- Copia con un clic: permette di copiare l’intero codice sorgente o parti selezionate con facilità.
- Funzionamento offline: non richiede una connessione internet per l’analisi del codice.
SourceView Pro è disponibile su App Store al prezzo di 0,99 USD e richiede iOS 15.0 o versioni successive.
Source Code Reader
Source Code Reader è un’app progettata per visualizzare il codice sorgente di pagine web su dispositivi iOS. Offre funzionalità come:
- Visualizzazione del codice sorgente: permette di vedere il codice HTML, CSS e JavaScript delle pagine.
- Evidenziazione della sintassi: migliora la leggibilità del codice.
- Supporto per più linguaggi: oltre all’HTML, supporta vari linguaggi di programmazione web.
L’app è disponibile su App Store e richiede iOS 11.0 o versioni successive. Nel momento in cui scriviamo il suo costo è sei 1,99 Dollari.
Web Inspector
Web Inspector è un’app che consente di ispezionare e debuggare pagine web direttamente su dispositivi iOS. Le sue funzionalità includono:
- Ispezione del DOM: permette di esplorare la struttura del documento.
- Console JavaScript: offre la possibilità di eseguire comandi JavaScript in tempo reale.
- Analisi delle risorse: visualizza le risorse caricate dalla pagina, come immagini e script.
- Analisi degli Headers
L’app è disponibile su App Store e richiede iOS 12.0 o versioni successive.
Debugging mediante Inspector web (collegando il dispositivo iOS ad un Mac)
Per gli sviluppatori che desiderano ispezionare e debuggare il codice sorgente di una pagina web su iPhone o iPad, Apple offre una funzionalità specifica che consente di utilizzare Safari su macOS per esaminare in tempo reale le pagine aperte su dispositivi iOS.
Questo metodo sfrutta il menu “Sviluppo” di Safari e il Web Inspector, strumenti potenti per l’analisi e il debugging del codice messi a disposizione da Apple all’interno dei propri prodotti.
Di seguito vi elencherò i passaggi da seguire per ispezionare il codice sorgente di una Pagina Web su iPhone o iPad utilizzando le funzionalità per le sviluppatori di Safari su macOS.
Per procedere abbiamo bisogno del nostro dispositivo iOS, di un computer macOS ed un cavetto USB/Tunderbolt (a seconda del dispositivo).
La prima cosa da fare è abilitare l’Inspector web sul nostro dispositivo. Per farlo apri l’app Settings all’interno del tuo dispositivo iOS e accedi alle impostazioni di Safari.
Scorri verso il basso e clicca su Avanzate e abilita Inspector web.
Ora apri Safari sul tuo Mac. Vai su Safari > Impostazioni > Avanzate e seleziona la casella Mostra funzionalità per sviluppatori web.
A questo punto è possibile collegare i due dispositivi mediante il cavo. Sul dispositivo iOS, potrebbe apparire una richiesta di conferma circa l’affidabilità del computer; tocca Autorizza e inserisci il codice di sblocco se richiesto.
Ora i due dispositivi sono collegati e pronti a lavorare insieme. la procedura da seguire è semplice:
- Sul dispositivo iOS: apri Safari e naviga verso la pagina web che desideri ispezionare.
- Sul Mac: nel menu di Safari, vai su Sviluppo: qui vedrai elencato il tuo dispositivo iOS con le pagine web attualmente aperte. Seleziona la pagina che desideri ispezionare.
Si aprirà una finestra del Web Inspector che mostra il codice sorgente della pagina visualizzata su iOS, il DOM, gli stili CSS, la console JavaScript e altre utili funzionalità per il debugging. Puoi interagire con gli elementi della pagina, eseguire script e monitorare le risorse di rete direttamente dal Mac, con le modifiche che si riflettono in tempo reale sul dispositivo iOS.
