Non c’è molto che non puoi fare con le tecnologie web al giorno d’oggi. La piattaforma web si è evoluta così tanto che oggi sono possibili cose diverse come animare elementi, riprodurre o registrare media, accedere a file o storage, intercettare richieste di rete e accedere alla cache, creare layout CSS complessi o scrivere codice nativo.
Con così tanto da imparare e utilizzare, gli sviluppatori Web hanno bisogno di una suite completa di strumenti su cui poter fare affidamento.
Fortunatamente, Microsoft Edge viene fornito con strumenti di sviluppo che consentono agli sviluppatori Web di essere produttivo con le funzionalità web e le API. Qualunque cosa tu stia facendo, molto probabilmente esiste uno strumento dedicato che può aiutarti.
Il rovescio della medaglia, tuttavia, è che DevTools tende ad essere piuttosto complicato. Contengono oltre 30 strumenti diversi e l’interfaccia utente è cresciuta nel tempo per adattarli. Inoltre, nuove funzionalità vengono aggiunte continuamente in risposta al feedback che riceviamo dagli utenti.
In questo post, ti presenteremo le nuove funzionalità di Microsoft Edge DevTools che aiutano a creare gli strumenti più accessibile e personalizzabile, così puoi iniziare ad affrontare la sfida di avere così tanti strumenti diversi a tua disposizione. Puoi anche saperne di più su queste funzioni nel video qui sotto.
DevTools si sta evolvendo rapidamente attraverso i browser, per rimani aggiornato con le ultime novità in altri browser, dai un’occhiata al il mio articolo su Smashing Magazine che copre le nuove funzionalità di DevTools in Microsoft Edge, Google Chrome, Mozilla Firefox e Safari.
Apertura, chiusura e spostamento degli strumenti
Sebbene DevTools abbia circa 30 strumenti separati, è improbabile che avrai bisogno di accedere a più di una manciata di essi contemporaneamente, per non parlare di 30. Quindi avere un modo per aprire facilmente gli strumenti quando ne hai bisogno e chiuderli quando non ti serve è molto importante.
Allo stesso tempo, potrebbero esserci strumenti che non hai mai utilizzato prima che potrebbero essere molto utili. Se quelli sono chiusi per impostazione predefinita, potresti non scoprirli mai.
Abbiamo aggiunto tre piccole ma molto potenti funzionalità di DevTools per risolvere questo problema.
Strumenti di chiusura
Le schede in Microsoft Edge DevTools ora hanno un pulsante di chiusura che può essere usato per nascondere quelli che non ti servono più. Puoi quindi mantenere un’interfaccia utente pulita e semplice e avere a disposizione solo gli strumenti di cui hai bisogno in questo momento.
Nota che alcuni strumenti non hanno un pulsante di chiusura: Elementi, Console e Sorgenti. Questi strumenti sono usati molto più di tutti gli altri. Gli sviluppatori web ne hanno bisogno in ogni momento e chiuderli non ha molto senso.
Strumenti di apertura
Ora c’è un pulsante + (più) alla fine della barra delle schede per aprire qualsiasi strumento non già aperto.
In precedenza, per scoprire tutti gli strumenti disponibili, dovevi andare nel menu principale (…), quindi selezionare Altri strumenti, oppure sapere come utilizzare menu dei comandi per accedere rapidamente agli strumenti. Il pulsante + rende molto più semplice la scoperta e l’accesso ad altri strumenti.
Ci possono essere due barre delle schede in DevTools: una in alto, che è sempre visibile ed è dove di solito si trovano i pannelli Elementi e Sorgenti, e una in fondo, il cassetto, che può essere attivato/disattivato premendo Esc sulla tastiera. La Console di solito vive nel cassetto. Entrambe queste barre delle schede hanno il pulsante +, quindi puoi aprire nuovi strumenti in una di queste 2 posizioni.
Spostamento degli strumenti
Avere il cassetto aperto può essere molto utile durante il debug di qualcosa che richiede più di uno strumento contemporaneamente.
Ad esempio, potresti voler aprire contemporaneamente i pannelli Sorgenti e Rete per assicurarti che vengano inviate le richieste HTTP corrette durante il debug di alcuni codici JavaScript. Oppure potresti voler avere entrambi i pannelli Elementi e Vista 3D aperti fianco a fianco per eseguire il debug di un problema di z-index con un elemento.
Con Microsoft Edge DevTools, ora puoi spostare gli strumenti tra l’area principale e il drawer aprendo il menu contestuale (clic con il pulsante destro del mouse) sul scheda che desideri spostare e selezionando Sposta in basso o Sposta in alto.
Nota che se selezioni il pulsante + nel cassetto e scegli uno strumento dall’elenco che è già aperto nell’area principale, allora questo strumento verrà spostato nel cassetto. Questo è un altro buon modo per spostare gli strumenti.
Imparare gli strumenti dall’interno degli strumenti
Il pulsante + è ottimo per scoprire facilmente nuovi strumenti che potresti non aver usato prima. Ma a volte, l’interfaccia utente di uno strumento può essere opprimente a prima vista. È utile avere a disposizione un po’di documentazione. La documentazione Microsoft Edge DevTools può aiutarti, ma spesso non è a portata di mano quando sei a metà attività.
Recentemente, abbiamo aggiunto una funzione per rendere ancora più semplice l’apprendimento contestuale su un nuovo strumento: DevTools Tooltip. DevTools Tooltips è un overlay che copre gli strumenti e fornisce documentazione contestuale su di essi, con collegamenti per saperne di più.
Puoi abilitare i suggerimenti di DevTools in 3 modi diversi:
Vai al pulsante Personalizza e controlla DevTools (…) > Aiuto > Attiva o disattiva le descrizioni comandi di DevTools. Puoi anche usare la scorciatoia da tastiera Ctrl+Maiusc+H (Cmd+Maiusc+H su Mac). Oppure usa il menu dei comandi e digita”tooltips”.
Una volta abilitato, sposta il mouse sulle aree evidenziate per visualizzare un suggerimento informativo su questa specifica area degli strumenti (puoi anche usare il tasto Tab per navigare tra i suggerimenti). Alcuni suggerimenti contengono anche collegamenti a il sito web della documentazione per saperne di più.
Nota che puoi anche andare ad altri pannelli mentre i DevTools Tooltip sono attivi. In questo modo puoi navigare in DevTools e continuare a imparare cose nuove senza dover girare il funzione di spegnimento e riattivazione ogni volta.
Cambiare la lingua
Sappiamo che gli sviluppatori possono essere più produttivi quando i loro strumenti corrispondono alla loro lingua preferenza di età. Inoltre, altri prodotti per sviluppatori Microsoft, incluso VS Code, possono essere usati in altre lingue. Questo è il motivo per cui abbiamo reso disponibile DevTools in 11 lingue diverse.
Per impostazione predefinita, DevTools corrisponde alla lingua scelta per l’interfaccia utente del browser, ma puoi impostarla indipendentemente su una qualsiasi di queste altre lingue.
Per cambiare la lingua, vai alle impostazioni di DevTools (usando la scorciatoia F1 o facendo clic sull’icona a forma di ingranaggio nella barra degli strumenti) e scegli dalla Lingua elenco a discesa.
Dopo aver ricaricato DevTools, la sua interfaccia utente apparirà nella lingua di tua scelta, rendendolo più facile usare gli strumenti. Ecco come appare in francese:
Funziona benissimo anche con la funzione DevTools Tooltips, poiché anche la documentazione contestuale è tradotta, come mostrato in russo di seguito.
Da abbiamo annunciato il rilascio sperimentale della funzionalità DevTools localizzata nel 2020, abbiamo continuato a collaborare con i team di Lighthouse e Chrome di Google attraverso il progetto Chromium e ora la funzionalità non è disponibile solo per tutti gli utenti di Microsoft Edge, b anche a chiunque utilizzi DevTools in un browser basato su Chromium.
Personalizzazione del tema del colore
Se usi Visual Studio Code (o altri editor di testo e IDE per quella materia), tu probabilmente ha personalizzato il tema del colore su qualcosa di visivamente piacevole e comodo con cui lavorare per lunghi periodi di tempo.
Finora, il tema colore di DevTools poteva può essere personalizzato solo scegliendo tra i suoi temi scuri o chiari. Tuttavia, ora ci sono 9 nuovi temi di colore tra cui scegliere. Questi sono gli stessi di quelli preinstallati di Visual Studio Code e dovrebbero quindi essere familiari.
Ecco l’intero elenco di temi in Microsoft Edge DevTools ora:
Temi esistenti: Light+ Dark+ Chromium Light Chromium Dark Nuovi temi: Luce tranquilla Solarized Light Solarized Dark Abyss Kimbie Dark Monokai Monokai Rosso attenuato Tomorrow Night Blue
Per scegliere un nuovo tema, puoi andare alle Impostazioni (l’icona a forma di ingranaggio nella barra degli strumenti ) e utilizza il menu a discesa Tema . Puoi anche utilizzare il menu dei comandi e digitare”tema”per visualizzare l’intero elenco dei temi colore disponibili.
Tieni presente che se utilizzi Microsoft Edge Tools per VS Code, potresti aver visto che DevTools non viene sempre visualizzato con lo stesso tema di colore dell’interfaccia utente di VS Code stessa.
Ora, grazie al nuovo temi colore in DevTools, questo non accadrà più. A partire da Microsoft Edge 95, l’interfaccia utente di DevTools, incorporata in VS Code, corrisponderà al tema colore selezionato.
Se non conosci questa estensione, ulteriori informazioni qui.
Feedback
Il feedback degli utenti è il modo in cui guidiamo le priorità per il lavoro in corso su Microsoft Edge DevTools. In caso di domande o feedback su queste funzionalità o altre, inviaci alcune parole e schermate utilizzando la il pulsante di feedback in DevTools.
Sentiti libero di porre domande anche al nostro team su Twitter citando il @EdgeDevTools account.
– Patrick Brosset, Senior Program Manager, Microsoft Edge
