Strumenti per sviluppatori Edge in confronto agli strumenti per sviluppatori di Chrome

In questo tutorial imparerai a conoscere gli strumenti per sviluppatori di Microsoft Edge, che sono in molti modi simili agli strumenti per sviluppatori di Google Chrome. Scoprirai come aprire e utilizzare efficacemente gli strumenti, nonché le differenze tra i due strumenti di sviluppo del browser.

Principali conclusioni

Il design delle Edge-DevTools offre un'interfaccia utente praticamente identica a quella delle Chrome-DevTools per quanto riguarda le funzioni di base. Le differenze si trovano principalmente nell'interfaccia utente e in poche funzioni aggiuntive, mentre gli strumenti principali e le scorciatoie sono rimasti largamente simili.

Guida passo passo

Per aprire gli Edge-DevTools, hai a disposizione diverse opzioni. Un modo è premere F12. Se stai lavorando su un Mac, puoi utilizzare la combinazione di tasti Command + Option + I. Gli utenti Windows possono anche utilizzare la combinazione Control + Shift + I. Se desideri aprire gli strumenti di sviluppo tramite il menu contestuale, fai clic con il pulsante destro del mouse sull'intestazione della pagina web e seleziona "Ispeziona".

L'interfaccia delle Edge-DevTools ti sembrerà subito familiare se hai già lavorato con le Chrome-DevTools. Ci sono le schede, le icone sono leggermente diverse e gli strumenti aggiuntivi sono accessibili tramite un simbolo "Più" nella barra superiore. In Chrome, questi strumenti aggiuntivi erano accessibili tramite il menu principale.

Se desideri aggiungere una nuova scheda nelle Edge-DevTools, basta fare clic sull'icona Più. Ad esempio, puoi aggiungere lo strumento di animazione. Questo verrà quindi visualizzato nella parte superiore della barra delle schede, simile agli strumenti di sviluppo di Chrome.

È presente anche una scheda di benvenuto, simile alla pagina "Novità" in Chrome. Qui puoi avere una panoramica delle funzionalità degli strumenti di sviluppo. Ti consiglio di dare un'occhiata a questa scheda per scoprire eventuali suggerimenti utili che potresti non aver ancora incontrato nel corso.

Un'altra funzionalità utile delle Edge-DevTools è la possibilità di spostare la barra delle schede a sinistra, consentendo una disposizione verticale delle schede. Le icone appariranno quindi come tooltip, risparmiando spazio e offrendo più spazio per gli strumenti stessi.

Gli strumenti di design stessi possono essere modificati attraverso varie impostazioni, simili alle impostazioni di Chrome. Puoi personalizzare i menu a discesa, la documentazione e la barra delle attività. In questo modo mantieni l'ambiente di lavoro familiare.

Una delle poche differenze è la presenza di un'icona aggiuntiva per Azure DevOps negli strumenti Edge, che non è presente in Chrome. Questo è particolarmente utile per sviluppatori che lavorano nell'ambiente Azure.

Una volta che ti trovi nelle rispettive schede, noterai che la struttura e le funzionalità in entrambi gli strumenti sono quasi identiche. Puoi utilizzare gli stili, i layout calcolati e tutto il resto a cui sei abituato su Chrome anche su Edge.

Tuttavia, gli aggiornamenti delle funzionalità possono differire leggermente. Se Chrome aggiunge una nuova funzionalità, potrebbe essere disponibile leggermente più tardi su Edge o viceversa. Pertanto, è consigliabile verificare regolarmente quali nuove funzionalità vengono aggiunte agli strumenti.

Questo è praticamente tutto ciò che devi sapere sulle Edge-DevTools. Se sei già familiare con gli strumenti per sviluppatori di Chrome, ti orienterai facilmente anche nelle Edge Dev Tools.

Riassunto

In questo tutorial hai imparato le somiglianze e le differenze tra gli strumenti per sviluppatori di Google Chrome e Microsoft Edge. Ora sai come aprire gli strumenti e quali funzionalità hai a disposizione per lavorare efficacemente sui tuoi progetti web.