Abilita e usa DevTools in Microsoft Edge

Se sviluppi per il web, DevTools è il tuo coltellino svizzero.: ispeziona il DOM e gli stili, esegui il debug di JavaScript, misura le prestazioni e persino emula i dispositivi mobili senza uscire dal browser. Microsoft EdgeQueste utilità sono integrate come Microsoft Edge DevTools e consentono un flusso di lavoro molto agile per individuare e correggere i problemi al volo.

In questa guida vai dritto alla cosa importante: Come aprire DevTools in Edge con scorciatoie e menu, cosa offre ogni scheda, come personalizzare l'interfaccia, Tricks Strumenti di rete e console per rilevare colli di bottiglia o errori e come integrarli con Visual Studio Code. Troverai anche consigli pratici per test di prestazioni, accessibilità e reattività basati su flussi di lavoro reali.

Cosa sono gli Edge DevTools e perché sono importanti?

Microsoft Edge DevTools è il set di strumenti di sviluppo integrati nel browser. che appare accanto alla pagina caricata. Da lì, puoi ispezionare HTML/CSS, eseguire il debug di JavaScript con punti di interruzione, visualizzare il traffico di rete, analizzare memoria e prestazioni e persino modificare i file e sincronizzarli con il file system durante la configurazione di un'area di lavoro.

Cosa puoi fare regolarmente: Rivedi e modifica gli stili live, controlla dove ogni risorsa (.html, .css, .js, .png) è archiviata e caricata, emula i dispositivi e le condizioni di rete, analizza i problemi di accessibilità, compatibilità e sicurezza ed esegui il debug del frontend con una console interattiva che accetta espressioni nel contesto corrente.

Oltre a Edge, altri browser includono DevTools (Chrome, Firefox, Safari e Opera) con funzioni equivalenti per ispezione, console, rete e debug. Le scorciatoie da tastiera sono generalmente le stesse: F12 o Ctrl+Maiusc+I (Cmd+Opzione+I su macOS), quindi clic con il pulsante destro del mouse su un elemento e selezione di "Ispeziona".

Per saperne ancora di più, combina la documentazione ufficiale (Microsoft Learn, MDN Web Docs) con tutorial e video. Troverai guide dettagliate, esempi e dettagli avanzati per padroneggiare ogni pannello.

Come aprire DevTools in Microsoft Edge

Esistono diversi modi rapidi per aprire gli strumenti, e quella che scegli può influenzare il pannello che appare per primo. Ecco le scorciatoie più utili per l'uso quotidiano.

Metodi principali per aprire: Fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina e seleziona "Ispeziona" (apre Elements con il nodo evidenziato), F12 o Ctrl+Maiusc+I (Cmd+Opzione+I su macOS) per riaprire l'ultimo strumento utilizzato o la schermata di benvenuto se è la prima volta.

Azione	Cosa si apre
Fare clic con il tasto destro > Ispeziona	elementi con il DOM espanso sul nodo selezionato
Ctrl + Maiusc + I (o Cmd+Opzione+I)	Ultimo strumento utilizzato o schermata di benvenuto
F12	Ultimo strumento utilizzato o schermata di benvenuto

Moduli aggiuntivi molto pratici: Dal menu Edge in "Impostazioni e altro > Altri strumenti > Strumenti per sviluppatori"; scorciatoie da tastiera dirette (Ctrl+Maiusc+J / Cmd+Opzione+J) o selezione di elementi (Ctrl+Maiusc+C / Cmd+Opzione+C). Maiusc+F10 apre il menu contestuale della tastiera e consente di scegliere Ispeziona.

Azione	Pannello che vedrai
Menu Edge > Altri strumenti > Strumenti per sviluppatori	Ultimo strumento utilizzato o gradito
Ctrl+Maiusc+J (Cmd+Opzione+J)	consolle
Ctrl + Shift + C (Cmd+Opzione+C)	elementi con un focus su
Maiusc + F10 e seleziona "Ispeziona"	elementi con l'albero espanso

Scorciatoie che velocizzano il tuo flussoF12 apre/chiude DevTools, Ctrl+R ricarica mantenendoli visibili, e Ctrl+Maiusc+C attiva il selettore degli elementi. Ricorda, puoi navigare con Tab per focalizzare la pagina e poi aprire il menu contestuale con Maiusc+F10.

Fai in modo che DevTools si apra automaticamente in ogni scheda: Edge viene lanciato con il marchio --auto-open-devtools-for-tabs. Ad esempio, in Windows: start msedge --auto-open-devtools-for-tabs; In PowerShell: Start-Process -FilePath msedge -ArgumentList --auto-open-devtools-for-tabs; su macOS: /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs; In Linux: microsoft-edge --auto-open-devtools-for-tabs.

Importante con il Boot- Se hai abilitato l'ottimizzazione all'avvio, disattivala in edge://settings/system affinché la scorciatoia funzioni; puoi anche disabilitare F12 per aprire DevTools nella stessa sezione se non vuoi che la scorciatoia funzioni.

Interfaccia, layout e personalizzazione

• L'interfaccia utente di DevTools è organizzata in due aree principali: La barra delle attività (in alto o a sinistra) e il pannello Quick Look (in basso, con Esc). La barra delle attività concentra l'accesso a strumenti, impostazioni e documentazione; Quick Look consente di aprire un secondo strumento in parallelo.
• Puoi ancorare DevTools a destra, a sinistra o in basso, oppure aprirli in una finestra separata. Cambia la posizione dal menu "Personalizza e controlla DevTools" o con comandiLa barra delle attività può essere posizionata in alto (orizzontale), a sinistra (verticale) oppure adattarsi automaticamente al dock.
• Zoom indipendente per DevTools e la pagina: Assicurati di concentrarti sull'area desiderata e usa Ctrl + / – (cmd su macOS) per ingrandire/ridurre, oppure Ctrl+0 per reimpostare. Dal menu dei comandi, cerca "zoom" per eseguire "Ingrandisci", "Riduci" o "Reimposta livello zoom".
• Strumenti bloccati e riordinabiliElementi, Console e Sorgenti sono fissi, ma puoi aggiungere il resto da "Altri strumenti". Se hai poco spazio, alcuni sono raggruppati in quel menu. Fai clic con il pulsante destro del mouse su una scheda per rimuoverla o spostarla in Visualizzazione rapida e viceversa.

Compito	Come fare
Apri uno strumento nella barra delle attività	“Altri strumenti” nella barra delle attività e seleziona quello desiderato
Apri uno strumento in Quick Look	Premi Esc, “Altri strumenti” nella barra in basso e scegli lo strumento
Spostati tra la barra superiore e la Visualizzazione rapida	Fare clic con il tasto destro del mouse sulla scheda dello strumento e scegliere sposta su/giù
Richiama qualsiasi pannello per nome	Ctrl+Maiusc+P (Cmd+Maiusc+P) e digita “Mostra ”

Il menu dei comandi è la tua scorciatoia universale (Ctrl+Maiusc+P): mostra o nascondi i pannelli, esegui azioni e modifica le impostazioni senza dover navigare tra i menu. Usalo, ad esempio, per aprire "Modifiche" quando modifichi il CSS in Elements.

Regolazioni ed esperimentiIn Impostazioni (F1), modifica il tema, la lingua, le scorciatoie (è disponibile un preset in stile Visual Studio Code), i profili di rete limitati, le posizioni fittizie e i dispositivi. In Esperimenti, abilita le funzionalità di anteprima e, se desideri le funzionalità più recenti, installa Edge Canary.

Strumenti chiave e casi d'uso reali

• Elementi: Ispezione con sovrapposizione del modello a scatolaAttiva il pulsante "Ispeziona" per passare il mouse sulla pagina e visualizzare dimensioni, spaziatura interna e margini con i relativi colori. Modifica HTML e CSS al volo, forza gli stati :hover/:active/:focus e rileva conflitti di ereditarietà o specificità.
• Editor CSS con utilità extra: Abilita/disabilita le dichiarazioni con una casella di controllo, visualizza le proprietà abbreviate per visualizzarne i componenti, aggiungi nuove regole e passa direttamente al file/riga sorgente. Nelle schede associate, troverai "Calcolato", "Layout/Box Model/Griglie" e "Sorgenti" (a seconda del browser) per visualizzare i valori finali e le geometrie.
• Console: esecuzione e diagnosi immediateFiltra i messaggi, valuta le espressioni in tempo reale e combinale con il debugger per ispezionare lo stato quando il codice è in pausa. Pulsanti come "Pausa in caso di eccezioni" guidano l'utente alla riga problematica; controlli passo passo aiutano a comprendere il flusso.
• Debugger/Sorgenti: punti di interruzione e codice leggibileImposta i breakpoint, controlla le variabili, controlla lo stack delle chiamate e gli ambiti. Se il codice è minimizzato, usa l'icona delle parentesi graffe. {} per “abbellirlo” e trasformarlo in un albero navigabile.
• Rete: radiografia delle richieste e delle prestazioniApri la scheda Rete, ricarica e rivedi le colonne essenziali: Dimensione (ottimizza le immagini e minimizza CSS/JS), Tempo (il server e la distanza influiscono su questo) e Cascata (ordine e durata del caricamento). Fai clic con il pulsante destro del mouse per personalizzare le colonne e, nel piè di pagina, seleziona "Fine" per il totale.
• Consigli pratici per le prestazioni: Misura prima su dispositivi mobili senza memorizzazione nella cache e punta a un benchmark ragionevole di 2-4 secondi; su desktop, ripeti sia senza che con la memorizzazione nella cache. Minimizza CSS/JS per ridurre il volume e raggruppa ogni tipo in un singolo file, ove possibile, per ridurre il numero di richieste (strumenti come Closure Compiler sono utili).
• Prestazioni e memoria: Registra i profili per individuare colli di bottiglia, layout costosi e attività che richiedono molto tempo. Un sito più veloce fidelizza gli utenti, migliora le prestazioni e la produttività. Gestione SEO e di solito converte meglio. In Memory, trova perdite e oggetti che non dovrebbero essere lasciati in vita.
• Applicazione e immagazzinamento: Ispeziona e modifica cookie, localStorage, IndexedDB e cache. Utile per il debug di sessioni, flag o policy di persistenza.
• Emulazione di dispositivi e reti: Passa alla modalità mobile, regola la visualizzazione e DPIe simula perdite di connettività 3G/4G. Prova un'esperienza utente realistica senza lasciare il desktop.
• Debug dei casi con console e debugger: Metti in pausa, attiva l'errore ed Edge ti guiderà alla riga esatta. Utilizza i pulsanti "step" per seguire il flusso e correggere le variabili dalla console per convalidare immediatamente le soluzioni.
• Ispezionare gli annunci con DevTools: in Rete filtra per ads? per verificare se la tua pagina sta inviando richieste. Un codice 403 indica solitamente policy non rispettate o un sito non approvato; un codice 200 non visualizzato indica problemi di sicurezza. ads.txt. Se tu vedi ERR_BLOCKED_BY_CLIENT, probabilmente un blocco impedisce il download adsbygoogle.jsGli errori di convalida tipici includono messaggi come: adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0.
• Scorciatoie e menu in altri browserIn Firefox, Inspector/Debugger/Console si trovano in "Sviluppatore Web"; in Safari, attiva il menu Sviluppo da Preferenze > Avanzate. La filosofia d'uso è simile a quella di Edge e Chrome.
• Notizie con IA in cromo: La funzionalità "Informazioni sulla console" spiega gli errori della console, suggerisce cause e possibili soluzioni. Si attiva in Impostazioni > "Innovazioni IA" e richiede un browser in lingua inglese, avere più di 18 anni e una sessione attiva. Google con sincronizzazione. Edge offre strumenti simili per spiegare i messaggi e vale la pena esaminare le implicazioni sulla privacy: alcuni dati del browser e del sito potrebbero essere utilizzati per migliorare i modelli; hai il controllo su queste opzioni.

Note sulle informative sulla privacyPiattaforme come Reddit mostrano banner relativi a cookie e policy che possono influire sul caricamento di script o risorse finché non acconsenti. Se qualcosa non funziona nei tuoi test, verifica se il consenso blocca le richieste.

Edge DevTools all'interno di Visual Studio Code

L'estensione "Microsoft Edge Tools" integra DevTools in VS Code con un browser incorporato (Edge DevTools: Browser) e schede degli strumenti (Elements, Console, ecc.). È possibile aprire una pagina locale, avviare un'istanza senza debug o avviare un progetto con configurazione.

• Opzione diretta per i file HTML: In VS Code Explorer, fare clic con il pulsante destro del mouse su un .html e seleziona "Apri con Edge > Apri browser con DevTools". Vedrai DevTools in modalità debug accanto alla pagina renderizzata e alla barra con i controlli tipici (pausa, passaggio, riavvio).
• Avvia istanza (nessun debug)- Aprire la visualizzazione "Strumenti Microsoft Edge" nella barra delle attività e toccare "Avvia istanza". Si apriranno Edge DevTools e Edge DevTools: Browser, che mostreranno una home page. Nella barra degli indirizzi del browser incorporato, incollare un percorso locale o un URL (ad esempio, http://localhost:8080).
• Avvia il progetto (con launch.json): Se la tua cartella richiede un server, crea il file di avvio con "Generate launch.json" e modifica le chiavi "url" con il tuo indirizzo (ad esempio http://127.0.0.1:8080). Salva e usa "Avvia progetto" per aprire direttamente l'app con DevTools incorporato.
• Mappatura dei file e modifica speculare dei CSS- Quando DevTools riesce a mappare le risorse scaricate alla cartella aperta, le modifiche CSS in Elements si riflettono nei file sorgente locali. Se non esiste una cartella corrispondente o non viene concessa alcuna attendibilità, deseleziona la casella "Modifica speculare" per sperimentare senza errori, oppure apri la cartella corretta e contrassegnala come sicura.
• Differenze tra URL e percorsi dei fileCon i percorsi locali, l'editor sa immediatamente dove scrivere; con gli URL remoti, è necessario aprire la cartella contenente le sorgenti equivalenti per abilitare il mirror. Altrimenti, sarà possibile ispezionare e modificare "live", ma senza persistere.
• Chiudi le istanze quando hai finito: Dalla scheda (icona "x"), dalla sezione "Target" nell'estensione o interrompendo il debug se attivo. Puoi anche chiudere la cartella o la finestra di VS Code per terminare tutte le sessioni.
• Qualcosa che vale la pena ricordare: La scheda "Edge DevTools: Browser" include la propria barra di emulazione del dispositivo, utile per visualizzare gli stati mobili senza uscire da VS Code, e puoi aprire file (come .js) da Explorer durante il debug per apportare correzioni al volo.
• Tutto quanto sopra ti lascia con un flusso di lavoro solido: Apri, ispeziona, misura, esegui il debug e personalizza rapidamente l'interfaccia a tuo piacimento. Se integri anche con VS Code, puoi iterare con editing e mapping locali. E se lavori con annunci o API, la scheda Rete e la Console ti forniscono la posizione esatta di ogni problema.