Effettuare il debugging di un sito in versione mobile tramite il proprio computer desktop

Hai realizzato un bel sito? Bene, ma hai tenuto a mente che la maggior parte della navigazione dei siti web avviene tramite cellulari smartphone e tablet? Questo significa che la versione più importante del tuo sito è quella mobile! Fortunatamente i temi WordPress oramai hanno tutti una versione viewport, che si modifica a seconda del dispositivo utilizzato, mostrando al visitatore la versione giusta per lui. Ma cosa succede se la visualizzazione per smartphone ha qualche imperfezione da sistemare? Dobbiamo fare il debugging, ovvero controllare il codice del sito e localizzare il problema. In questo caso vediamo un esempio di problema CSS. I CSS sono i fogli di stile che permettono al nostro sito la visualizzazione “graficamente elegante” della struttura (colori, indentazioni, spazi, caratteri utilizzati, ecc.). Per fare il debugging di una pagina web (visualizzata dal desktop) ci basta visitare quella pagina, andare nella zona che ci interessa controllare (ad esempio in corrispondenza di un titolo che ha una dimensione o un carattere che vorremmo cambiare), cliccare col tasto destro e scorrere su “Ispeziona” (oppure usare la combinazione di tasti CTRL + Maius + I ), e si aprirà una schermata a lato che ci mostrerà il codice relativo a quella parte di sito (vedi sezione Styles).

Questo strumento ci permette di individuare quale proprietà di foglio di stile dobbiamo andare a modificare, ovvero come si chiamano i selettori identificativi all’interno del foglio di stile. Senza addentrarci troppo nello specifico (servirebbe un corso completo di CSS a parte), nell’esempio seguente ecco cosa viene visualizzato ispezionando la parte relativa al logo di questo sito (ad esempio vogliamo capire come ridurre lo spazio dall’alto o il margine sinistro, ecc.).

Se ad esempio volessimo ridurre lo spazio tra il logo e la parte sottostante, sappiamo che dobbiamo andare a modificare il codice <em>padding-bottom:15px</em> . Possiamo fare una prova immediata, cliccandoci sopra e modificandone il valore: ad esempio mettendo 50px, e vedremo subito come cambia la visualizzazione del sito. Ma questa è solo un’anteprima, se soddisfatti, ora dovremo andare nel foglio di stile del nostro sito, cercare (con F3) ad esempio .header oppure .logo o altro che ci permetta di individuare quella parte di codice CSS che vogliamo modificare, e una volta trovato fare la modifica e salvare.

E se dovessimo modificare la visualizzazione per cellulari? Sempre con Chrome Il procedimento è analogo, abbiamo sempre a disposizione strumenti potenti e completi, e possiamo fare così: in alto a destra clicchiamo sui 3 puntini –> scendiamo su altri strumenti –> strumenti per sviluppatori. Anche questa volta si aprirà la consolle di debug. Se guardiamo bene, in alto, c’è un’icona mobile: cliccando su questa “Toggle Device Bar” la consolle di commuterà in visione per cellulare. Se non trovate l’icona, potete usare il comando CTRL + Shift + M. Questa funzione, diventa utile anche per capire come si visualizza il vostro sito web su cellulare.

Questa consolle di debug per cellulari vi permetterà ora di ispezionare la versione mobile del vostro sito, e anche di cambiare tipo di visualizzazione (dimensione schermo) e tipo di dispositivo (Ios, Android, ecc.). Ora che lo sapete, sarà il compagno di ogni webmaster che realizza un sito o decide di cambiare il tema del proprio sito WordPress e non. Ricordatevi che per vedere le modifiche live dovete cancellare la cache del vostro browser oppure aprire una sessione in incognito.