DevTools
Chrome DevTools è un insieme di strumenti per sviluppatori web integrati direttamente nel browser Google Chrome. DevTools consente di modificare le pagine all'istante e di diagnosticare rapidamente i problemi, il che ti consente di creare siti web migliori più velocemente.
Esegui il debug con l'AI
Scopri come le innovazioni dell'AI in DevTools ti consentono di fare di più, più velocemente. Utilizza DevTools per gli agenti per connettere la potenza di DevTools ai tuoi agenti di codifica preferiti.
Innovazioni dell'IA
Lascia che Gemini ti aiuti ad analizzare e migliorare lo stile, la rete, le fonti e il rendimento del tuo sito web. Ricevi assistenza per gli errori della console e suggerimenti di codice nei riquadri Console e Origini.
DevTools per agenti
Fornisci ai tuoi agenti di codifica gli stessi strumenti affidabili che utilizzi per ispezionare l'attività di rete, registrare tracce ed eseguire la risoluzione dei problemi delle applicazioni web, all'interno del flusso di lavoro AI.
Collega il server MCP (Model Context Protocol) di Chrome DevTools allo strumento che preferisci: Antigravity, Claude Code, Cline, Copilot e altri ancora.
Collega il server MCP (Model Context Protocol) di Chrome DevTools allo strumento che preferisci: Antigravity, Claude Code, Cline, Copilot e altri ancora.
Informazioni sul rendimento
Ottieni una visione completa e strategica del rendimento della tua pagina.
Ispeziona le risorse
Scopri come ispezionare le risorse caricate dalla tua pagina e modificarle dal browser.
Analizzare la rete
Analizza e sovrascrivi le richieste e le risposte di rete in tempo reale.
Suggerimenti per gli strumenti per sviluppatori
Esplora la nostra serie di video mensili che ti guidano attraverso scenari di debug comuni in DevTools in modo giocoso.
Emulare le esperienze utente con gli agenti di programmazione
Chrome DevTools per gli agenti consente all'agente di verificare i layout reattivi, testare le API sensibili alla posizione e simulare varie velocità di CPU o di rete.
Automatizza i controlli di Lighthouse con gli agenti di codifica
Lighthouse in Chrome DevTools per agenti consente al tuo agente di codifica di valutare la qualità del sito web eseguendo controlli di integrità in tempo reale per accessibilità, SEO, best practice e navigazione con agenti.
Pitstop per l'ottimizzazione del rendimento
Fai un tour del riquadro Prestazioni aggiornato, che ti mostra come misurare i Core Web Vitals (LCP, CLS, INP) e come ricevere consigli personalizzati da Gemini.
Pixel Pirate
Salpa con DevTools e diventa un pirata del debug. Scopri le tecniche per emulare gli stili di messa a fuoco, testare i moduli con il completamento automatico e risolvere gli errori di backend con gli override di rete.
Ottenere informazioni sul rendimento
Un'ampia gamma di strumenti per aiutarti a misurare e ottimizzare diversi aspetti del rendimento in fase di esecuzione: il riquadro Rendimento, Lighthouse e altro ancora.
Panoramica dello strumento sul rendimento
Scopri tutte le funzionalità del riquadro Prestazioni: come registrare una traccia del rendimento, come visualizzarla e analizzarla e altro ancora.
Monitora le prestazioni dei Core Web Vitals e degli utenti reali in DevTools
Scopri le nuove funzionalità di DevTools, come la calibrazione della limitazione della CPU, che ti aiutano a basare le decisioni di debug del rendimento sui dati del mondo reale
Barra laterale Approfondimenti nel riquadro Prestazioni di DevTools
Scopri le nuove informazioni sul rendimento e la potenza di Lighthouse direttamente nel riquadro Rendimento di DevTools.
Notizie e aggiornamenti
Ispezionare e modificare le risorse
Informazioni sulle funzionalità
Scopri tutte le funzionalità del riquadro Origini: come visualizzare e modificare i file, eseguire il debug di JavaScript e configurare uno spazio di lavoro.
Configurare un'area di lavoro
Workspace ti consente di salvare le modifiche apportate in DevTools nel codice sorgente memorizzato sul computer. Scopri come configurare uno spazio di lavoro nei tuoi progetti.
Analisi dell'attività di rete
Riquadro Network
Scopri tutte le funzionalità del riquadro Rete: controlla i corpi delle risposte e delle richieste, sovrascrivi le intestazioni e altro ancora.
Controlla l'attività di rete
Un tutorial pratico che ti guida nelle attività comuni all'interno del riquadro Rete.
Altri strumenti
Scopri tutte le altre funzionalità e capacità di DevTools.
Elementi
Scopri come visualizzare e modificare il DOM di una pagina.
Stili
Scopri come visualizzare e modificare il CSS di una pagina.
Modifiche
Tieni traccia delle modifiche apportate a HTML, CSS e JavaScript.
Console
Registra i messaggi ed esegui JavaScript.
Rendimento
Valutare il rendimento del sito web.
Memoria
Individua i problemi di memoria che influiscono sulle prestazioni delle pagine, ad esempio le perdite di memoria e altro ancora.
Applicazione
Ispeziona, modifica ed esegui il debug delle app web, testa la cache, visualizza lo spazio di archiviazione e altro ancora.
Animazioni
Ispezionare e modificare le animazioni.
Registratore
Registra, riproduci, misura i flussi utente e modifica i relativi passaggi.
Rendering
Scopri una raccolta di opzioni che influiscono sul rendering dei contenuti web.
Compilazione automatica
Ispezionare ed eseguire il debug degli indirizzi salvati.
Problemi
Individua e risolvi problemi relativi al tuo sito web.
Privacy e sicurezza
Assicurati che una pagina sia completamente protetta tramite HTTPS.
Contenuti multimediali
Visualizza le informazioni ed esegui il debug dei lettori multimediali per ogni scheda del browser.
Sensori
Emula i sensori del dispositivo.
WebAuthn
Emula gli autori di autenticazione.