Strumenti per sviluppatori nel nuovo Microsoft Edge

Il nuovo browser Microsoft basato su Chromium ha recentemente avuto la sua seconda versione pubblica stabile, svelando Edge 80 con supporto ARM64 completo e strumenti migliorati per aiutarti a creare e lavorare con i contenuti web. Come le versioni precedenti dell'ormai legacy Edge, il nuovo browser di Microsoft mantiene il familiare collegamento F12 per avviare i suoi strumenti di sviluppo, collegato al browser o in un riquadro separato.

Vale la pena familiarizzare con le nuove cose, poiché sebbene ci siano somiglianze con Edge legacy, ora stai lavorando in un mondo di Chromium e c'è molto di più in comune con Chrome e altri browser basati su Chromium. Non è una brutta cosa. È più facile trasferire le competenze tra i browser e, se hai utilizzato Chrome come browser di sviluppo, sarà facile iniziare a lavorare nel nuovo Edge. Tuttavia, Microsoft ha apportato alcune modifiche e sta lavorando per estendere l'esperienza degli sviluppatori Edge nel codice di Visual Studio in modo da poter sviluppare e testare applicazioni JavaScript in un unico ambiente.

Un'esperienza per sviluppatori multipiattaforma

Con il nuovo Edge disponibile su Windows 7 e macOS e con una versione Linux in fase di sviluppo, è possibile accedere agli stessi strumenti di sviluppo su piattaforme diverse. Hai gli stessi ispettori, debugger e console, quindi è facile eseguire gli stessi test ovunque tu stia lavorando e su qualunque sistema operativo utilizzi. Uno sviluppatore che abbia familiarità con Edge su Windows dovrebbe essere in grado di passare a un Mac per testare il codice senza dover attendere l'aiuto di uno sviluppatore Mac.

Come il legacy Edge, i nuovi strumenti di sviluppo Edge basati su Chromium ti aiutano a esaminare HTML, CSS e JavaScript nel tuo sito, con un debugger JavaScript e una console per visualizzare l'output di registrazione della console dall'esecuzione di JavaScript. È possibile utilizzare gli strumenti per attivare rapidamente una barra degli strumenti del browser che aggiunge modalità di visualizzazione del dispositivo, offrendo la possibilità di testare il design reattivo senza lasciare un PC di sviluppo.

Utilizzo degli strumenti per sviluppatori Edge

Gli strumenti per sviluppatori di Edge si trovano in nove diversi riquadri, ognuno dei quali offre informazioni diverse sulla tua applicazione web. È molto probabile che tu utilizzi il primo: la vista Elementi.

Questo approfondisce il tuo HTML e CSS, mostrando quali elementi in una pagina sono generati da quali sezioni di codice. Indicare un elemento nella finestra del browser evidenzia il codice pertinente, aiutando a isolare l'HTML o il CSS di cui si desidera eseguire il debug. Un riquadro mostra HTML; l'altro mostra il CSS corrente, con gli stili attualmente applicati e i listener di eventi che vengono utilizzati. Puoi vedere quali regole CSS sono attualmente in uso e quali vengono ignorate.

Il riquadro Elementi è disponibile anche come estensione di Visual Studio Code, portando l'ispezione del layout insieme alla modifica dell'HTML. È un modo utile per vedere rapidamente come le modifiche al codice influiscono sui layout di pagina. Puoi persino allegare codice a un'istanza del browser, dandoti accesso diretto a qualsiasi documento HTML aperto.

Prepararsi per PWA

Uno degli strumenti più utili è il pannello Prestazioni. Da qui puoi registrare le attività del tuo browser. Una volta completata una sequenza di test, puoi utilizzare la sequenza temporale dello strumento per profilare le risorse utilizzate dall'app. È meglio usarlo insieme agli strumenti Rete e Memoria, soprattutto se utilizzi molto JavaScript. Capire come si comporta un'app Web è particolarmente importante se si prevede di utilizzarla come PWA (applicazione Web progressiva), e qui un pannello Applicazione aggiunge strumenti per esaminare i componenti chiave di una PWA, inclusi l'archiviazione locale e gli addetti all'assistenza.

Con Edge che semplifica l'identificazione e l'installazione di PWA, vale la pena esplorare questi strumenti in modo più dettagliato, in particolare il riquadro Applicazione. Con un aspetto simile a una dashboard, è un modo rapido per ottenere uno sguardo approfondito a ciò che accade all'interno delle tue applicazioni e come si esibiranno al di fuori del browser. È possibile utilizzare lo strumento Applicazione per esplorare il funzionamento dei servizi integrati di Edge, come il gestore dei pagamenti.

Utilizzo dei plug-in in Edge DevTools

Un'altra caratteristica del passaggio a un'esperienza di sviluppo basata su Chromium è il supporto per plug-in di terze parti. Alcuni sono già disponibili nel negozio aggiuntivo di Edge (anche se attualmente solo tramite link privati ​​nel negozio). Per una selezione più ampia, se hai abilitato il supporto di negozi di terze parti in Edge, hai accesso a tutte le estensioni nel Chrome Web Store. Ce ne sono molti qui, inclusi strumenti che aggiungono supporto mirato per framework JavaScript specifici o aiutano con il debug. Questi includono React di Facebook, gRPC open source, strumenti per lavorare con le API GraphQL e supporto per linter come webhint.

La specifica del plug-in per sviluppatori di Chromium è pubblica e chiunque può creare e pubblicare i propri strumenti per sviluppatori, internamente o per il mondo intero. Poiché i plug-in di Edge condividono un formato comune con altri browser Chromium, lo stesso plug-in può essere fornito tramite altri browser store, semplificando lo sviluppo degli strumenti.

Aggiungere un'estensione agli strumenti di sviluppo è come aggiungerne una al browser. Passa a un negozio, fai clic sullo strumento che desideri aggiungere e lascialo scaricare e installare. Verrà installato nel browser e potresti voler nascondere l'icona dell'estensione nel menu del browser prima di aprire gli strumenti per sviluppatori per vedere una nuova scheda. L'esecuzione di webhint su un sito mostra una serie di metriche chiave, fornendo suggerimenti per funzionalità importanti come l'accessibilità o per il supporto delle funzionalità PWA.

È bello vedere la personalizzazione finalmente parte degli strumenti di Edge. Usiamo tutti toolchain diversi e darti ciò di cui hai bisogno per supportare le tecnologie che stai utilizzando è un approccio molto intuitivo per gli sviluppatori. Quando Microsoft ha annunciato il passaggio a Chromium per il suo browser, ha indicato che uno dei motivi era quello di fornire agli sviluppatori le funzionalità di cui hanno bisogno per creare le applicazioni che desiderano. Ciò avrebbe potuto significare solo migliorare il supporto del browser per HTML5, CSS e JavaScript, quindi portare l'intera gamma di strumenti per sviluppatori Chromium su Edge, su tutti i suoi sistemi operativi supportati, è una mossa gradita.

Modifiche di Microsoft all'esperienza degli sviluppatori di Chromium

È importante ricordare che Microsoft è ancora un partner relativamente giovane di Google nello sviluppo di Chromium. Anche così è riuscito a dare un numero considerevole di contributi da quando ha aderito al progetto, inclusa l'aggiunta del supporto per le funzionalità di accessibilità per rendere disponibili gli strumenti per sviluppatori alla più ampia comunità possibile. Con circa 170 modifiche che aggiungono il supporto per strumenti come i lettori di schermo, c'è molto da apprezzare qui, poiché gli strumenti per sviluppatori accessibili porteranno allo sviluppo di applicazioni e servizi web accessibili.

Altre nuove funzionalità sono attualmente nascoste dietro flag sperimentali nelle impostazioni di Edge, incluso il supporto per lingue aggiuntive. Se abiliti questa funzione e utilizzi una delle 10 lingue supportate, la localizzazione degli strumenti per sviluppatori corrisponderà alla localizzazione del tuo browser.