Come fare il debug di una pagina web su iPhone, senza Mac

Parti dalla Diagnostica: il controllo automatico

Prima di mettere mano al DOM, lascia che la scansione automatica ti dica l'ovvio: la Diagnostica di OpenHTML elenca i file mancanti a cui la pagina fa riferimento, le risorse remote bloccate dall'impostazione predefinita sulla privacy, gli errori JavaScript in esecuzione e i problemi di codifica, ognuno con una correzione con un tocco dove esiste (consenti la rete, attiva il JS, passa al server locale).

In pratica questo risolve in pochi secondi la maggior parte dei casi «perché è vuota, senza stile o funziona a metà», soprattutto con le pagine generate dall'IA che fanno riferimento a file mai prodotti.

Console: cosa sta dicendo la pagina

La console raccoglie in tempo reale l'output di log, warn ed error del JavaScript della pagina. Le eccezioni non gestite finiscono qui con i loro messaggi: di solito è l'indizio più rapido quando l'interattività smette di funzionare.

Ispettore elementi: il DOM, sul dispositivo (Pro)

• Tocca un elemento qualsiasi per vederne tag, attributi e stili calcolati.
• Modifica gli attributi al volo per verificare un'ipotesi: il layout si sistema se togli quella classe?
• Passa da un elemento ispezionato direttamente alla sua riga nel visualizzatore del sorgente.

Pannello Rete: ogni richiesta, con i tempi (Pro)

Osserva il traffico fetch, XHR e WebSocket con URL, codici di stato, dimensioni e tempi: l'equivalente sul dispositivo della scheda di rete. Esporta l'intera sessione come file HAR per analizzarla poi nei DevTools desktop, in Charles o in Proxyman.

Ricorda l'impostazione predefinita sulla privacy: le pagine non possono raggiungere la rete finché non lo consenti per singolo documento, quindi un pannello Rete vuoto può semplicemente significare che la pagina viene tenuta offline — la Diagnostica te lo dirà.

Riprodurre le condizioni reali

• La modalità server locale (Pro) serve i progetti su 127.0.0.1 così fetch(), i moduli ES e il caricamento di JSON si comportano come in produzione: indispensabile per i progetti web ZIP.
• I preset viewport (Pro) mostrano la pagina alle larghezze di telefono, tablet e desktop per far emergere i bug del responsive.
• «Richiedi sito desktop» (Pro) carica il layout desktop quando una pagina si adatta al mobile in modo troppo aggressivo.

Una sessione realistica

1. Importi la pagina o il progetto; la Diagnostica segnala un foglio di stile su CDN bloccato e un errore in console.
2. Consenti la rete per il documento → gli stili arrivano, l'errore resta.
3. La console mostra una variabile non definita in app.js; il visualizzatore del sorgente salta a quella riga.
4. La correzione si conferma modificando l'attributo nel DOM dall'Ispettore elementi, poi sistemi il file per bene alla scrivania e lo reimporti per verificare.