2 Aprile, 2021 | Di

Estensioni browser per sviluppatori…BACKEND?!

backend developer

Estensioni browser per sviluppatori…BACKEND?!

Nell’immaginario comune, Frontend e Backend developer utilizzano specifiche tecniche di sviluppo e testing per le fasi evolutive del software: siamo abituati a figurarci il primo costantemente impegnato a premere F5 per aggiornare l’interfaccia sul browser, e il secondo - ripudiando tutto ciò che ha una GUI – supportato da test automatizzati e strutturati eseguibili da CLI.

“In teoria lo condivido, in teoria” cit.

Nella realtà dei fatti anche il backend developer, SOPRATTUTTO il backend developer, ha comunque bisogno spesso di una visibilità più ampia del risultato di insieme, in particolare all’interno di un sistema MVC, dove il testing automatico dei servizi garantisce l’integrità del dato a livello di modello e controllo, ma non di visualizzazione. Non solo: diverse features, la cui valorizzazione e fruizione avviene lato interfaccia utente, sono in verità sviluppate e configurate principalmente lato applicativo da un dev BE (servizi REST, server mobile detection, caching gestito degli header HTTP e relativa interazione con sistemi terzi, come ad es. Fastly, autenticazione basata su sessione e chi più ne ha più ne implementi). Ecco quindi che semplici chiamate cURL o una suite di consumo di API con Postman cominciano a diventare stringenti, o troppo onerose da predisporre in modo completo per mantenere lo sviluppo veloce e consistente. Insomma: anche noi utilizziamo il browser per sviluppare, e non dobbiamo vergognarcene, anzi dobbiamo sfruttare al meglio anche questo strumento. Vi presento qui una carrellata di estensioni (senza un particolare ordine) che possono evitarci complicate e ridondanti routine, o di doverci appoggiare a una moltitudine di applicazioni diverse per operazioni anche a volte banali.

Un nome una garanzia, il titolo spiega perfettamente il suo scopo: convertire timestamp in date “umane” e viceversa. Sappiamo tutti quanto spesso ci imbattiamo in timestamp e quando spesso convertirli in una data leggibile possa essere fastidiosamente lungo. Niente di nuovo e niente di fantascientifico quindi, ma avere un convertitore pronto all’uso è sempre comodo. Bidirezionale, e tiene conto anche della timezone: semplice ed efficace.

Permette di simulare lo User-Agent di una infinità di sistemi operativi, browser o device (o imporre il proprio valore personalizzato), e di applicare questa modifica solo per determinate tab e gestire black/whitelist di domini, oltre che diverse altre configurazioni. Fondamentale per chi si sta cimentando in sistemi di device management lato server, o per eventuali tracciamenti di navigazione differenziati per tipologia di navigazione. Disclaimer: se lo dimenticate attivo scoprirete un sacco di siti che implementano la device detection per l’esperienza utente.

La quantità e varietà di operazioni che possiamo fare tramite gli header HTTP è nota a praticamente tutti, e avere la possibilità di gestirli tramite un’estensione apposita per questo scopo può essere davvero cruciale. Anche qui sono disponibili profili e configurazioni per gestire in modo specifico diversi domini e casistiche particolari. Si possono perfino aggiungere i commenti che noi Backend Dev amiamo tanto.

Ispeziona, crea, modifica – in ogni attributo – e rimuovi i cookie del dominio/pagina corrente. Ottimo per eseguire debugging di sistemi di tracciamento o autenticazione basati su sessione o cookie. Fantastica la possibilità di importare ed esportare set di cookie massivamente. Particolarmente ben organizzata, a mio avviso, la navigabilità del popup del tool, semplice e intuitiva.

MAI PIU’ (cit.) copiare e incollare le risposte dei web service JSON nei soliti tool di pretty-print online: questa estensione è in grado di intercettare autonomamente i payload di risposta formattati JSON e trasformarli in una alberatura di contenuti raggruppabili/collassabili; supporto a JSONP incluso nell’offerta.

“Hai fatto la SEO? Accessibilità ARIA? OpenGraph per social media? Caffè e pasticcini? Eh ma dovevi ricordartene tu…”

Questa estensione non ha purtroppo il potere di compensare le mancanze organizzative nel progetto, ma sicuramente ha la capacità di arginarne i rischi e gli effetti indesiderati. Effettua un rapido check delle peculiarità principali che non dovrebbero mancare mai, o quasi mai, ad una pagina web odierna; non si tratta di un vero e proprio audit come, ad esempio, quello di Lighthouse, ma ci evita di dover scomodare strumenti più strutturati e complicati almeno per questi check di base.

Differentemente dalle precedenti estensioni di questo articolo, non fornisce un’interfaccia grafica a popup (tipica di questi widget) ma abilita la modalità di “debug” di GA, il cui output è stampato nella console Javascript del debugger. Non sarà di consultazione immediata, ma il livello di dettaglio delle operazioni è davvero granulare e permette di avere il controllo esatto su ogni operazione di tracciamento. Ottimo, in particolare, per verificare gli eventi correlati all’interazione dell’utente – senza dover fare avanti e indietro tra schede diverse. Certo, un debug di fatto CLI-like contraddice un po’ la premessa di questo articolo, ma è l’utilità che conta, no?

Capire quale FB Pixel è presente nella pagina – e relativi eventi o dati – spesso non è immediato, soprattutto in relazione alla gestione in lazy-loading degli asset della libreria, o al fatto che sia spesso iniettata da altri tool (es. GTM). Lasciate fare il lavoro sporco a questa estensione, che si occuperà di raccogliere, organizzare e mostrare tutte le informazioni possibili per ogni pixel presente in pagina.

Il pacchetto di schede del browser aperte per sviluppare un progetto è un prezioso valore che va gestito e protetto. Errori di memoria, attività in emergenza, scherzi di cattivo gusto dei colleghi: fate in modo che niente possa minacciare il panorama di tab/sessioni/autenticazioni ecc ecc che avete predisposto. Sessions buddy fa esattamente questo

Basta visitare siti appositi per la generazione di Lorem Ipsum, che impiegano più a caricarsi che a fare il loro dovere. Basta digitazioni casuali sulla tastiera in stile hacker dei film anni 80 (chissà quante volte un accidentale ALT o CTRL + F4 ha mandato a monte ore di lavoro…). Con la sua minimale configurazione, questa estensione genera chunk di testo in diverse modalità, per creare contenuti mock di qualsiasi natura.

Personalmente, di tutte le tipologie di bug da risolvere, quelli che riguardano la compilazione di lunghe form – i cui campi sono magari anche soggetti a validazioni estremamente specifiche – sono sicuramente i più tediosi. Se proprio non puoi assegnare questo task alla disgraziata figura junior di turno, Autofill può realmente risultare un gamechanger in termini di tempistica e pazienza. La quantità di utilities è notevole: regole di automazione, profili, esportazioni e molto altro.

il browser chrome

Aggiungo infine una onorevole menzione all’estensione – pensata per tutti, non solo sviluppatori – che più mi ha aiutato non solo a incrementare la mia efficienza produttiva, ma anche migliorare le prestazioni del mio PC riducendo il consumo di risorse: Checker plus for Gmail. “All hail Checker plus for Gmail”.

Permette di avere un email client per il vostro account Google direttamente dentro al popup dell’estensione, senza nulla da invidiare a molti più blasonati software desktop. Cruciale per chi ha un computer che non può permettersi troppe applicazioni in background, o peggio non può liberamente installare software per colpa dei permessi account. Non è solo un modo per avere una overview rapida delle mail in ingresso, questa estensione fa praticamente tutto quello di cui un normale utilizzatore di posta elettronica può avere bisogno, dalle notifiche push alla modalità non disturbare, alla compilazione in-place delle mail da inviare. Solo applausi per i suoi creatori.