Novità di DevTools: Cross-Browser Edition

Gli strumenti per sviluppatori del browser continuano a evolversi, con funzionalità nuove e migliorate aggiunte continuamente. È difficile tenerne traccia, soprattutto quando si utilizzano più di un browser. Con così tante offerte, non sorprende che ci sentiamo sopraffatti e utilizziamo le funzionalità che già conosciamo invece di stare al passo con le novità.

È un peccato però, perché alcuni di loro possono renderci molto più produttivi.

Quindi, il mio obiettivo con questo articolo è aumentare la consapevolezza su alcune delle più recenti funzionalità di Chrome, Microsoft Edge, Firefox e Safari. Si spera che ti farà venire voglia di provarli e forse ti aiuterà a sentirti più a tuo agio la prossima volta che dovrai eseguire il debug di un problema specifico del browser.

Detto questo, entriamo subito.

Strumenti di sviluppo di Chrome

Il team di Chrome DevTools ha lavorato duramente per modernizzare la propria base di codice (che ora ha 13 anni). Sono stati impegnati a migliorare il sistema di compilazione, migrare a TypeScript, introdurre nuovi componenti Web, ricostruire l'infrastruttura dei loro temi e molto altro ancora. Di conseguenza, gli strumenti ora sono più facili da estendere e modificare.

Ma oltre a questo lavoro meno rivolto agli utenti, il team ha fornito anche molte funzionalità. Consentitemi di esaminarne alcuni qui, relativi al debugging CSS.

Scorrimento a scatto

Lo snap a scorrimento CSS offre agli sviluppatori Web un modo per controllare la posizione in cui un contenitore scorrevole interrompe lo scorrimento. È una funzione utile, ad esempio, per lunghi elenchi di foto in cui desideri che il browser posizioni ogni foto in modo ordinato all'interno del suo contenitore scorrevole automaticamente per te.

Se vuoi saperne di più sullo scroll-snapping, puoi leggere questa documentazione MDN e dare un'occhiata alle demo di Adam Argyle qui.

Le proprietà chiave dello snap a scorrimento sono:

• scroll-snap-type , che indica al browser la direzione in cui avviene lo snap e come avviene;
• scroll-snap-align , che indica al browser dove eseguire lo snap.

Chrome DevTools ha introdotto nuove funzionalità che aiutano a eseguire il debug di queste proprietà chiave:

• se un elemento definisce lo snap-scorrimento utilizzando scroll-snap-type , il pannello Elementi mostra un badge accanto ad esso.

• È possibile fare clic sul badge scroll-snap per abilitare una nuova sovrapposizione. Quando lo fai, nella pagina vengono evidenziate diverse cose:
  • il contenitore di pergamene,
  • gli elementi che scorrono all'interno del contenitore,
  • la posizione in cui gli elementi sono allineati (contrassegnata da un punto blu).

Questa sovrapposizione rende facile capire se e come le cose si inseriscono in posizione dopo lo scorrimento. Questo può essere molto utile quando, ad esempio, i tuoi oggetti non hanno uno sfondo e i confini tra di loro sono difficili da vedere.

Sebbene lo snap a scorrimento non sia una nuova funzionalità CSS, l'adozione è piuttosto bassa (meno del 4% secondo chromestatus.com) e poiché le specifiche sono cambiate, non tutti i browser la supportano allo stesso modo.

Spero che questa funzionalità di DevTools invogli le persone a voler giocare di più con essa e alla fine ad adottarla per i loro siti.

Query sui contenitori

Se negli ultimi anni hai svolto qualsiasi tipo di sviluppo web, probabilmente hai sentito parlare di query sui contenitori. È stata una delle funzionalità CSS più richieste da più tempo ed è stato un problema molto complesso da risolvere per i produttori di browser e gli autori di specifiche.

Se non sai quali sono le query container, ti suggerisco di consultare prima l'articolo Primer On CSS Container Query di Stephanie Eckles.

In poche parole, sono un modo per gli sviluppatori di definire il layout e lo stile degli elementi in base alle dimensioni del loro contenitore. Questa capacità è un enorme vantaggio durante la creazione di componenti riutilizzabili poiché possiamo adattarli al luogo in cui vengono utilizzati (piuttosto che adattarsi solo alle dimensioni del viewport per cui le query multimediali sono adatte).

Fortunatamente, le cose si stanno muovendo in questo spazio e Chromium ora supporta le query sui contenitori e il team di Chrome DevTools ha iniziato ad aggiungere strumenti che ne semplificano l'avvio.

Le query container non sono ancora abilitate per impostazione predefinita in Chromium (per abilitarle, vai su chrome://flags e cerca "query container") e potrebbe volerci ancora un po' di tempo prima che lo siano. Inoltre, il lavoro di DevTools per il debug è ancora agli albori. Ma alcune delle prime funzionalità sono già arrivate.

• Quando si seleziona un elemento in DevTools che ha stili provenienti da una regola @container , questa regola appare nella barra laterale Stili del pannello Elementi. Questo è simile al modo in cui gli stili di query multimediali vengono presentati in DevTools e renderà semplice sapere da dove proviene un determinato stile.

Come mostra lo screenshot sopra, la barra laterale Stili mostra 2 regole che si applicano all'elemento corrente. Quello in basso si applica all'elemento .media in ogni momento e fornisce il suo stile predefinito. E quello in alto è nidificato in una query del contenitore @container (max-width:300px) che ha effetto solo quando il contenitore è più stretto di 300px.

• Inoltre, appena sopra la regola @container , il pannello Stili mostra un collegamento all'elemento a cui si risolve la regola e passandoci sopra con il mouse vengono visualizzate informazioni aggiuntive sulla sua dimensione. In questo modo sai esattamente perché la query del contenitore corrisponde.

Il team di Chrome DevTools sta lavorando attivamente a questa funzione e puoi aspettarti molto di più in futuro.

Chromium Collaborazione

Prima di entrare nelle funzionalità di altri browser, parliamo un po' di Chromium. Chromium è un progetto open source su cui si basano Chrome, Edge, Brave e altri browser. Significa che tutti questi browser hanno accesso alle funzionalità di Chromium.

Due dei contributori più attivi a questo progetto sono Google e Microsoft e, quando si tratta di DevTools, hanno collaborato ad alcune funzionalità interessanti che vorrei esaminare ora.

Strumenti di debug del layout CSS

Alcuni anni fa, Firefox ha innovato in questo spazio e ha distribuito i primi ispettori grid e flexbox in assoluto. I browser basati su Chromium ora consentono anche agli sviluppatori Web di eseguire facilmente il debug di grid e flexbox.

Questo progetto collaborativo ha coinvolto ingegneri, product manager e designer di Microsoft e Google, lavorando per un obiettivo condiviso (scopri di più sul progetto stesso nel mio intervento su BlinkOn).

Tra le altre cose, DevTools ora ha le seguenti funzionalità di debug del layout:

• Evidenzia più griglie e layout flessibili sulla pagina e personalizza se vuoi vedere i nomi oi numeri delle linee della griglia, le aree della griglia e così via.

• Editor Flex e griglia per giocare visivamente con le varie proprietà.

• Le icone di allineamento nel completamento automatico CSS semplificano la scelta di proprietà e valori.

• Evidenzia sulla proprietà al passaggio del mouse per capire a quali parti della pagina si applica una proprietà.

Puoi leggere ulteriori informazioni al riguardo sui siti di documentazione di Microsoft e Google.

Localizzazione

Questo è stato un altro progetto di collaborazione che ha coinvolto Microsoft e Google che, ora, rende possibile la traduzione di tutti i DevTools basati su Chromium in lingue diverse dall'inglese.

In origine, non c'è mai stato un piano per localizzare DevTools, il che significa che si è trattato di uno sforzo enorme. Si trattava di esaminare l'intera base di codice e rendere localizzabili le stringhe dell'interfaccia utente.

Il risultato però ne è valsa la pena. Se l'inglese non è la tua prima lingua e ti sentiresti più a tuo agio nell'usare DevTools in un'altra, vai su Impostazioni ( F1 ) e trova il menu a discesa della lingua.

Ecco uno screenshot di come appare in Chrome DevTools:

Ed ecco come appare Edge in giapponese:

Edge DevTools

Microsoft è passata a Chromium per sviluppare Edge più di 2 anni fa. Mentre, all'epoca, ha causato molte discussioni nella comunità web, da allora non è stato scritto o detto molto al riguardo. Le persone che lavorano su Edge (incluso il suo DevTools) sono state impegnate e il browser ha ora molte funzionalità uniche.

Essere basato sul progetto open source Chromium significa che Edge beneficia di tutte le sue funzionalità e correzioni di bug. In pratica, il team di Edge ingerisce le modifiche apportate nel repository Chromium nel proprio repository.

Ma nell'ultimo anno circa, il team ha iniziato a creare funzionalità specifiche per Edge in base alle esigenze degli utenti Edge e al feedback. Edge DevTools ora ha una serie di funzionalità uniche che esaminerò.

Strumenti di apertura, chiusura e spostamento

Con quasi 30 pannelli diversi, DevTools è un software davvero complicato in qualsiasi browser. Ma non hai mai davvero bisogno di accedere a tutti gli strumenti contemporaneamente. Infatti, quando avvii DevTools per la prima volta, sono visibili solo pochi pannelli e puoi aggiungerne altri in seguito.

D'altra parte, però, è difficile scoprire i pannelli che non vengono mostrati di default, anche se potrebbero esserti davvero utili.

Edge ha aggiunto 3 piccole ma potenti funzionalità per risolvere questo problema:

• un pulsante di chiusura sulle schede per chiudere gli strumenti che non ti servono più,
• un pulsante + (più) alla fine della barra delle schede per aprire qualsiasi strumento,
• un'opzione del menu contestuale per spostare gli strumenti.

La seguente GIF mostra come chiudere e aprire gli strumenti sia nell'area principale che in quella del cassetto possono essere eseguiti in Edge.

Puoi anche spostare gli strumenti tra l'area principale e l'area del cassetto:

• facendo clic con il pulsante destro del mouse su una scheda in alto viene visualizzata una voce "Sposta in basso" e
• facendo clic con il pulsante destro del mouse su una scheda nel cassetto viene visualizzata una voce "Sposta in alto".

Ottenere aiuto contestuale con i suggerimenti di DevTools

È difficile sia per i principianti che per gli sviluppatori esperti sapere tutto su DevTools. Come ho detto prima, ci sono così tanti pannelli che è improbabile che tu li conosca tutti.

Per risolvere questo problema, Edge ha aggiunto un modo per passare direttamente dagli strumenti alla loro documentazione sul sito Web di Microsoft.

Questa nuova funzione Tooltips funziona come una sovrapposizione attivabile che copre gli strumenti. Quando abilitati, i pannelli vengono evidenziati e per ciascuno di essi viene fornita una guida contestuale, con collegamenti alla documentazione.

Puoi avviare i suggerimenti in 3 modi diversi:

• utilizzando la scorciatoia da tastiera Ctrl + Maiusc + H su Windows/Linux ( Cmd + Maiusc + H su Mac);
• andando nel menu principale ( ... ), quindi andando in Guida e selezionando "Attiva/disattiva i suggerimenti di DevTools";
• utilizzando il menu dei comandi e digitando "Tooltips".

Personalizzazione dei colori

Negli ambienti di modifica del codice, gli sviluppatori amano personalizzare i temi dei colori per rendere il codice più facile da leggere e più piacevole da guardare. Poiché anche gli sviluppatori web trascorrono molto tempo in DevTools, ha senso che abbia anche colori personalizzabili.

Edge ha appena aggiunto una serie di nuovi temi a DevTools, oltre ai temi scuri e chiari già disponibili. Sono stati aggiunti un totale di 9 nuovi temi. Questi provengono da VS Code e saranno quindi familiari alle persone che utilizzano questo editor.

Puoi selezionare il tema che desideri utilizzare andando nelle impostazioni (usando F1 o l'icona a forma di ingranaggio nell'angolo in alto a destra), oppure utilizzando il menu dei comandi e digitando theme .

Firefox DevTools

Simile al team di Chrome DevTools, le persone che lavorano su Firefox DevTools sono state impegnate con un grande aggiornamento dell'architettura volto a modernizzare la propria base di codice. Inoltre, la loro squadra è un po' più piccola in questi giorni poiché Mozilla ha dovuto rifocalizzarsi negli ultimi tempi. Ma, anche se questo significa che hanno avuto meno tempo per aggiungere nuove funzionalità, sono comunque riusciti a rilasciarne alcune davvero interessanti che esaminerò ora.

Debug delle barre di scorrimento indesiderate

Ti sei mai chiesto: "da dove viene questa barra di scorrimento?" So di averlo fatto e ora Firefox ha uno strumento per eseguire il debug di questo problema.

Nel pannello Impostazioni, tutti gli elementi che scorrono hanno accanto un badge di scroll , che è già utile quando si ha a che fare con alberi DOM profondamente nidificati. Inoltre, puoi fare clic su questo badge per rivelare l'elemento (o gli elementi) che hanno causato la visualizzazione della barra di scorrimento.

Puoi trovare più documentazione a riguardo qui.

Visualizzazione dell'ordine di tabulazione

La navigazione in una pagina Web con la tastiera richiede l'utilizzo del tasto tab per spostarsi tra gli elementi attivabili uno per uno. L'ordine in cui gli elementi focalizzabili vengono focalizzati durante l'utilizzo della tab è un aspetto importante dell'accessibilità del tuo sito e un ordine errato può confondere gli utenti. È particolarmente importante prestare attenzione a questo dato che le moderne tecniche CSS di layout consentono agli sviluppatori Web di riorganizzare gli elementi di una pagina molto facilmente.

Firefox dispone di un utile pannello Accessibility Inspector che fornisce informazioni sull'albero di accessibilità, trova e segnala automaticamente vari problemi di accessibilità e consente di simulare diverse carenze di visione dei colori.

Oltre a queste funzionalità, il pannello ora fornisce una nuova sovrapposizione di pagina che mostra l'ordine di tabulazione per gli elementi attivabili.

Per abilitarlo, usa la casella di controllo "Mostra ordine di tabulazione" nella barra degli strumenti.

Puoi trovare più documentazione a riguardo qui.

Uno strumento di prestazioni nuovo di zecca

Non molte aree di sviluppo web dipendono dagli strumenti tanto quanto l'ottimizzazione delle prestazioni. In questo dominio, il pannello Prestazioni di Chrome DevTools è il migliore della categoria.

Negli ultimi anni, gli ingegneri di Firefox si sono concentrati sul miglioramento delle prestazioni del browser stesso e, per aiutarli a farlo, hanno creato uno strumento di profilatura delle prestazioni. Lo strumento era stato originariamente creato per ottimizzare il codice nativo del motore, ma supportava anche l'analisi delle prestazioni di JavaScript sin dall'inizio.

Oggi, questo nuovo strumento per le prestazioni sostituisce il vecchio pannello delle prestazioni di Firefox DevTools nelle versioni pre-release (Nightly e Developer Edition). Fai un giro quando ne hai la possibilità.

Tra le altre cose, il nuovo profiler di Firefox supporta la condivisione di profili con altri in modo che possano aiutarti a migliorare le prestazioni del tuo caso d'uso registrato.

Puoi leggere la documentazione a riguardo qui e saperne di più sul progetto sul loro repository GitHub.

Ispettore Web Safari

Ultimo ma non meno importante, esaminiamo alcune delle recenti funzionalità di Safari.

Il piccolo team di Apple si è tenuto molto impegnato con un'ampia gamma di miglioramenti e correzioni sugli strumenti. Ulteriori informazioni su Safari Web Inspector possono aiutarti a essere più produttivo durante il debug dei tuoi siti su dispositivi iOS o tvOS. Inoltre, ha un sacco di funzionalità che altri DevTools non hanno e che non molte persone conoscono.

Debug della griglia CSS

Con Firefox, Chrome ed Edge (e tutti i browser basati su Chromium) dotati di strumenti dedicati per la visualizzazione e il debug delle griglie CSS, Safari è stato l'ultimo grande browser a non averlo. Bene, ora lo fa!

Fondamentalmente, Safari ora ha le stesse funzionalità proprio come DevTools di altri browser in quest'area. Questo è fantastico in quanto significa che è facile passare da un browser all'altro ed essere comunque produttivo.

• I badge griglia vengono visualizzati nel pannello Elementi per trovare rapidamente le griglie.
• Facendo clic sul badge si attiva o disattiva la visualizzazione in sovrimpressione sulla pagina.
• Nella barra laterale viene ora visualizzato un nuovo pannello Layout. Ti consente di configurare la sovrapposizione della griglia, vedere l'elenco di tutte le griglie sulla pagina e attivare la sovrapposizione per esse.

La cosa interessante dell'implementazione di Safari è che hanno davvero inchiodato l'aspetto delle prestazioni dello strumento. Puoi abilitare più sovrapposizioni diverse contemporaneamente e scorrere la pagina senza che ciò causi alcun problema di prestazioni.

L'altra cosa interessante è che Safari ha introdotto un pannello Elementi a 3 riquadri, proprio come Firefox, che consente di vedere il DOM, le regole CSS per l'elemento selezionato e il pannello Layout tutto in una volta.

Scopri di più sul CSS Grid Inspector in questo post del blog di WebKit.

Una serie di miglioramenti del debugger

Safari aveva un pannello Risorse e Debugger separato. Li hanno uniti in un unico pannello Sorgenti che semplifica la ricerca di tutto ciò di cui hai bisogno durante il debug del tuo codice. Inoltre, questo rende lo strumento più coerente con Chromium a cui molte persone sono abituate.

La coerenza per le attività comuni è importante in un mondo cross-browser. Gli sviluppatori Web devono già eseguire test su più browser, quindi se hanno bisogno di apprendere un paradigma completamente nuovo quando utilizzano DevTools di un altro browser, può rendere le cose più difficili del necessario.

Ma Safari di recente si è anche concentrato sull'aggiunta di funzionalità innovative al suo debugger che altri DevTools non hanno.

Script Bootstrap:
Safari ti consente di scrivere codice JavaScript che è garantito per essere eseguito prima di qualsiasi script nella pagina. Questo è molto utile per lo strumento delle funzioni integrate per l'aggiunta di istruzioni del debugger o per la registrazione, ad esempio.

Nuove configurazioni dei punti di interruzione:
Tutti i browser supportano più tipi di punti di interruzione come punti di interruzione condizionali, punti di interruzione DOM, punti di interruzione di eventi e altro ancora.

Safari ha recentemente migliorato l'intera suite di tipi di punti di interruzione offrendo loro un modo per configurarli ampiamente. Con questa nuova funzione di punto di interruzione, puoi decidere:

• se vuoi che un punto di interruzione raggiunga solo quando una determinata condizione è vera,
• se vuoi che il punto di interruzione metta in pausa l'esecuzione o esegua semplicemente del codice,
• o anche riprodurre un segnale acustico in modo da sapere che è stata eseguita una riga di codice.

queryInstances e funzioni della console queryHolders :
Queste due funzioni sono davvero utili quando il tuo sito inizia a utilizzare molti oggetti JavaScript. In alcune situazioni, può diventare difficile tenere traccia delle dipendenze tra questi oggetti e possono iniziare a comparire anche perdite di memoria.

Safari ha uno strumento Memoria che può aiutare a risolvere questi problemi consentendoti di esplorare le istantanee dell'heap di memoria. Ma a volte sai già quale classe o oggetto sta causando il problema e vuoi scoprire quali istanze esistono o cosa si riferisce ad esso.

Se Animal è una classe JavaScript nella tua applicazione, queryInstances(Animal) restituirà un array di tutte le sue istanze.

Se foo è un oggetto nella tua applicazione, queryHolders(foo) restituirà un array di tutti gli altri oggetti che hanno riferimenti a foo .

Pensieri di chiusura

Spero che queste funzioni ti siano utili. Posso solo consigliare di utilizzare più browser e di familiarizzare con i loro DevTools. Avere più familiarità con altri DevTools può rivelarsi utile quando devi eseguire il debug di un problema in un browser che non usi regolarmente.

Sappi che le aziende che producono browser hanno tutte dei team che lavorano attivamente su DevTools. Sono investiti nel renderli migliori, meno difettosi e più potenti. Questi team dipendono dal tuo feedback per costruire le cose giuste. Senza sapere quali problemi stai affrontando o quali funzionalità ti mancano, è più difficile per loro prendere le decisioni giuste su cosa costruire.

Segnalare i bug a un team di DevTools non solo ti aiuterà quando arriverà la correzione, ma potrebbe anche aiutare molti altri che hanno riscontrato lo stesso problema.

Vale la pena sapere che i team DevTools di Microsoft, Mozilla, Apple e Google sono generalmente piuttosto piccoli e ricevono molti feedback, quindi segnalare un problema non significa che verrà risolto rapidamente, ma aiuta e quei team stanno ascoltando .

Ecco alcuni modi per segnalare bug, porre domande o richiedere funzionalità:

• Firefox DevTools
  • Firefox utilizza Bugzilla come bug tracker pubblico e chiunque può segnalare bug o richiedere nuove funzionalità creando una nuova voce lì. Tutto ciò di cui hai bisogno è un account GitHub per accedere.
  • Entrare in contatto con il team può essere fatto su Twitter utilizzando l'account @FirefoxDevTools o accedendo alla chat di Mozilla (trova la documentazione sulla chat qui).
• Ispettore Web Safari
  • Safari utilizza anche il monitoraggio pubblico dei bug per i loro bug WebKit. Ecco la documentazione su come cercare bug e segnalarne di nuovi.
  • Puoi anche metterti in contatto con il team su Twitter con @webkit.
  • Infine, puoi anche segnalare bug su Safari e Safari Web Inspector utilizzando l'assistente di feedback.
• Edge DevTools
  • Il modo più semplice per segnalare un problema o richiedere una funzionalità è utilizzare il pulsante di feedback in DevTools (la piccola figura stilizzata nell'angolo in alto a destra degli strumenti).
  • Fare domande al team funziona meglio su Twitter citando l'account @EdgeDevTools.
• Strumenti di sviluppo di Chrome
  • Il team ascolta il feedback sulla mailing list devtools-dev e su Twitter all'indirizzo @ChromeDevTools.
• Cromo
  • Poiché Chromium è il progetto open source che alimenta Google Chrome e Microsoft Edge (e altri), puoi anche segnalare problemi sul bug tracker di Chromium.

Con questo, grazie per aver letto!