Aggiungi l'estensione a Chrome
- Apri il Chrome Web Store e cerca l'estensione "DevSuite Pro".
- Clicca su "Aggiungi a Chrome" e poi conferma cliccando su "Aggiungi estensione" nella finestra pop-up.
64+ strumenti potenti per ispezionare, misurare, catturare, analizzare e progettare pagine web direttamente nel tuo browser.
Iniziare è semplice. Installa l'estensione, apri qualsiasi pagina web e accedi a 64+ strumenti per sviluppatori dal popup o dal dock flottante. Nessuna configurazione necessaria.
DevSuite Pro offre 64+ strumenti per sviluppatori per ispezionare, misurare, progettare e analizzare pagine web. Ottimizza il tuo flusso di lavoro con potenti funzionalità integrate direttamente nel tuo browser.
Passa il mouse su qualsiasi elemento per visualizzare e modificare istantaneamente i suoi stili CSS in tempo reale, rendendo facile il debug e la messa a punto dei design.
Scopri di più →Clicca su qualsiasi elemento per ispezionarne le proprietà, le dimensioni, la spaziatura, i font e i colori. Comprendi la struttura della pagina istantaneamente senza aprire i DevTools del browser.
Scopri di più →Misura le distanze, verifica l'allineamento e aggiungi righelli e guide pixel-perfect su qualsiasi pagina web per garantire che i tuoi design siano perfettamente allineati.
Scopri di più →Seleziona i colori da qualsiasi elemento sulla pagina e copia i valori HEX, RGB o HSL negli appunti con un solo clic.
Scopri di più →Cattura screenshot a pagina intera o dell'area visibile di qualsiasi pagina web e scaricali istantaneamente, perfetti per condividere design e segnalare bug.
Scopri di più →Visualizza l'anteprima di qualsiasi pagina web a diverse dimensioni dello schermo e risoluzioni dei dispositivi per testare il design responsive senza lasciare il browser.
Scopri di più →Ispeziona e modifica gli stili CSS in tempo reale
L'Ispettore CSS è un potente strumento gratuito per sviluppatori che ti consente di passare il cursore su qualsiasi…
Debug e controllo delle animazioni CSS in tempo reale
L'Ispettore animazioni ti dà il pieno controllo su ogni animazione CSS e transizione su qualsiasi pagina web.
Converti il CSS di qualsiasi elemento in classi Tailwind
Copia come Tailwind collega il design visivo al codice Tailwind CSS.
Visualizza la struttura completa del layout della pagina
La Modalità contorno aggiunge bordi contorno colorati a ogni elemento HTML, dandoti una vista a raggi X istantanea della struttura della pagina.
Ottieni classi Tailwind categorizzate per qualsiasi elemento
L'Assistente Tailwind ispeziona qualsiasi elemento e genera una scomposizione completa e categorizzata delle classi Tailwind CSS corrispondenti.
Vista albero HTML visuale su qualsiasi pagina
Il Visualizzatore pagina mostra la struttura DOM completa come sovrapposizione visiva ad albero direttamente sulla pagina.
Rileva componenti React, Vue, Angular e Svelte
Il Rilevatore componenti identifica automaticamente quale framework frontend usa un sito e rivela l'albero completo dei componenti.
Trascina e rilascia per riposizionare qualsiasi elemento
Sposta elemento ti permette di cliccare su qualsiasi elemento e trascinarlo fisicamente in una nuova posizione.
Rimuovi o attiva/disattiva la visibilità di qualsiasi elemento
Elimina/Nascondi elemento ti permette di rimuovere o nascondere temporaneamente qualsiasi elemento con un clic.
Esporta qualsiasi elemento come HTML, CSS o JSON
Esporta elemento ti permette di cliccare su qualsiasi elemento ed esportare la sua struttura completa in tre formati.
Genera componenti React, Vue e Svelte da qualsiasi elemento
Trasforma qualsiasi elemento in un file componente pulito per il tuo framework.
Cattura l'area visibile o l'intera pagina
Cattura immagini di alta qualità in due modalità — area visibile o pagina intera.
Visualizza, seleziona e scarica tutte le immagini da qualsiasi pagina
Scansiona qualsiasi pagina e presenta ogni immagine in una galleria navigabile con miniature, dimensioni e dimensioni file.
Trova, anteprima e scarica ogni SVG su qualsiasi pagina
Scopre ogni SVG sulla pagina — inline, esterni, sprite e data URI.
Sostituisci qualsiasi immagine sulla pagina con la tua
Clicca su qualsiasi immagine e sostituiscila — caricando un file o incollando un URL.
Genera codici QR per qualsiasi URL o testo
Crea un codice QR scansionabile per l'URL corrente o qualsiasi testo personalizzato.
Righelli, guide e misurazioni pixel-perfect
Aggiunge righelli e guide trascinabili stile Photoshop.
Anteprima simultanea su piu dispositivi
Mostra la pagina corrente in piu viewport side by side.
Misura distanza pixel esatta tra due elementi
Clicca su due elementi e vedi la distanza esatta.
Visualizza contesti stacking e livelli z-index
Rivela ordine stacking completo di ogni elemento.
Ispeziona layout CSS Grid e Flexbox con sovrapposizioni
Rileva ogni contenitore Grid e Flexbox e ne mostra la struttura come sovrapposizioni colorate.
Simula hotspot attenzione utenti
Genera mappa di calore predittiva basata su pattern UX consolidati.
Cancella selettivamente cache, cookie, localStorage e sessionStorage
Cancella rapidamente tipi specifici di dati per il sito corrente.
Rileva ogni tecnologia dietro qualsiasi sito
Scansiona e identifica lo stack tecnologico completo.
Audit SEO completo: Meta tag, intestazioni, OpenGraph e altro
Audit SEO istantaneo e completo di qualsiasi pagina.
Audit WCAG automatizzato: Contrasto, Alt text, ARIA e altro
Esegue controlli automatici WCAG 2.1 Level AA e produce un report categorizzato dei problemi.
Clicca su qualsiasi testo per modificarlo istantaneamente
Rende ogni elemento di testo sulla pagina modificabile con un clic.
Cambia qualsiasi font globalmente o per singolo elemento
Sostituisci qualsiasi font sulla pagina con uno dalla libreria Google Fonts.
Scopri ogni font usato su qualsiasi pagina
Scansiona la pagina e presenta un inventario completo di ogni famiglia di font in uso.
Strumento contagocce di precisione per valori HEX, RGB e HSL
Fornisce un contagocce pixel-preciso per selezionare colori da qualsiasi elemento.
Estrai la palette colori completa da qualsiasi pagina
Scansiona ogni elemento ed estrae tutti i colori usati, ordinati per frequenza.
Applica istantaneamente la modalità scura su qualsiasi sito
Applica una combinazione di colori scura su qualsiasi sito che non la offre.
Attiva o disattiva istantaneamente JavaScript per la scheda corrente
Disattiva o riattiva l'esecuzione di JavaScript per la scheda corrente con un clic.
Visualizza, modifica, aggiungi ed elimina cookie
Mostra tutti i cookie del dominio corrente in una tabella pulita e ordinabile.
Visualizza l'output console in un pannello fluttuante — senza DevTools
Cattura tutto l'output console e lo mostra in un pannello fluttuante sulla pagina.
Monitora tutte le richieste di rete in tempo reale
Cattura e mostra ogni richiesta di rete della pagina corrente in tempo reale.
Visualizza e modifica localStorage e sessionStorage
Interfaccia tabellare pulita per gestire localStorage e sessionStorage del sito corrente.
Scansiona ogni link sulla pagina e trova quelli rotti
Scansiona ogni link e identifica quelli rotti (404, timeout, errori di connessione).
Dashboard performance istantanea: tempo caricamento, statistiche DOM e risorse
Fornisce un riepilogo performance istantaneo di qualsiasi pagina web.
Formatta, minifica e convalida JSON in un clic
Il Formattatore JSON formatta, minifica e convalida i JSON direttamente nel browser.
Codifica stringhe da e verso Base64 istantaneamente
Il Codificatore/Decodificatore Base64 converte il testo in Base64 e viceversa direttamente nel browser.
Codifica e decodifica stringhe URL in un clic
Il Codificatore/Decodificatore URL converte le stringhe URL da e verso la loro forma codificata in percentuale.
Codifica e decodifica entità HTML istantaneamente
Il Codificatore entità HTML converte i caratteri speciali (< > & " ') nei loro equivalenti in entità HTML (< >…
Esegue l'escape e l'unescape delle stringhe per il codice
Escape / Unescape backslash converte le stringhe da e verso la loro forma con escape (\n \t \r \" \' \\ ed escape Unicode).
Converti immagini da e verso Data URI Base64
Immagine ↔ Base64 converte i file immagine (PNG, JPG, SVG, WebP, GIF) in Data URI codificati in Base64 e viceversa.
Decodifica JSON Web Token istantaneamente
Il Debugger JWT decodifica ed ispeziona i JSON Web Token — analizzando header, payload e firma, visualizzando i claim e…
Genera identificatori UUID v4 in blocco
Il Generatore UUID produce identificatori UUID v4 crittograficamente forti utilizzando l'API crypto del browser.
Calcola hash MD5, SHA-1, SHA-256, SHA-384, SHA-512
Il Generatore di Hash calcola gli hash crittografici (MD5, SHA-1, SHA-256, SHA-384, SHA-512) di qualsiasi input di testo.
Genera password crittograficamente forti
Il Generatore di Password produce password forti e casuali utilizzando l'API di casualità crittografica del browser.
Testa le espressioni regolari dal vivo con evidenziazione dei match
Il Tester Regex valuta le espressioni regolari rispetto a un testo di prova in tempo reale.
Converti date Unix, ISO e leggibili dall'uomo
Il Convertitore di Timestamp traduce tra timestamp Unix (secondi, millisecondi, microsecondi, nanosecondi), ISO 8601…
Confronta due blocchi di testo riga per riga
Lo Strumento Diff confronta due blocchi di testo ed evidenzia le riga aggiunte, rimosse e invariate con un output codificato a colori.
Controlla il rapporto di contrasto WCAG di due colori qualsiasi
Il Controllo contrasto calcola il rapporto di contrasto WCAG 2.1 tra due colori e li valuta rispetto alle soglie AA/AAA…
Converti istantaneamente HEX, RGB, HSL, HSV e OKLCH
Il Convertitore formati colore traduce qualsiasi colore tra HEX, RGB, HSL, HSV e OKLCH.
Estrai la tavolozza dominante da qualsiasi immagine
L'Estrattore di colori da immagine analizza qualsiasi file immagine (trascina, incolla o clicca per caricare) e…
Ottieni selettori CSS e XPath per qualsiasi elemento
DOM Path Finder ti permette di passare il cursore su qualsiasi elemento della pagina per rivelare il suo selettore CSS…
Testa le richieste Cross-Origin e ispeziona gli header CORS
CORS Checker verifica se una richiesta cross-origin dal tuo sito verrebbe consentita dal server di destinazione.
Cattura i frame WebSocket in tempo reale
WebSocket Inspector cattura ogni frame WebSocket — inviato e ricevuto — in tutte le connessioni della pagina.
Scansiona istantaneamente la pagina alla ricerca di immagini interrotte
Broken Image Finder scansiona ogni tag <img> e ogni background-image CSS nella pagina, rileva i caricamenti falliti…
Compila i moduli con dati di test realistici
Form Filler compila ogni campo modulo visibile nella pagina con dati di test realistici: nome, email, telefono, indirizzo, password, ecc.
Converti tra CSV e JSON in entrambe le direzioni
Il convertitore CSV ↔ JSON gestisce il passaggio completo tra i due formati tabulari più comuni.
Formatta, valida e visualizza XML con evidenziazione della sintassi
XML Formatter formatta, minimizza e valida l'XML direttamente nel browser.
Abbellisci e formatta le query SQL
SQL Formatter trasforma l'SQL minimizzato o disordinato in query leggibili e indentate.
Salva le pagine web come PDF puliti
Converti in PDF salva la pagina web corrente come PDF tramite la finestra di dialogo di stampa del browser, applicando…
Scegli il piano più adatto al tuo flusso di lavoro. Inizia gratuitamente, aggiorna in qualsiasi momento.
Domande comuni sulle funzionalità e l'utilizzo dell'estensione DevSuite Pro. Se hai una domanda, potresti già trovare la risposta qui sotto.
Visita il Chrome Web Store, cerca "DevSuite Pro", clicca su "Aggiungi a Chrome" e conferma selezionando "Aggiungi estensione". Una volta installata, l'icona dell'estensione apparirà nella barra degli strumenti del browser. Cliccaci sopra per accedere istantaneamente a 64+ strumenti per sviluppatori.
Gli strumenti gratuiti (43+) sono disponibili per tutti senza licenza. Gli strumenti Pro sono contrassegnati con un badge dorato PRO e richiedono una licenza Pro attiva. Puoi vedere quali strumenti sono gratuiti o pro dal popup — gli strumenti gratuiti non hanno l'icona del lucchetto, mentre gli strumenti pro appaiono leggermente attenuati finché non attivi la tua licenza.
Alcuni siti web hanno politiche di sicurezza dei contenuti (CSP) restrittive che bloccano determinate azioni delle estensioni del browser. Questo è particolarmente comune sui siti bancari e governativi. Inoltre, le pagine interne di Chrome (chrome://) non consentono alle estensioni di eseguire script di contenuto.
No. Tutte le modifiche effettuate da strumenti come Move Element, Live Text Editor, Delete/Hide Element e CSS Inspector sono temporanee. Influenzano solo ciò che vedi nel tuo browser in questo momento. Ricaricare la pagina ripristinerà tutto allo stato originale.
Apri il popup di DevSuite Pro, clicca sull'icona Impostazioni nell'angolo in alto a destra. Scorri fino alla sezione Licenza, incolla la tua chiave di licenza nel campo di inserimento e clicca su Attiva. Se la chiave è valida, il badge cambierà da FREE a PRO e tutti gli strumenti pro verranno sbloccati istantaneamente.
Puoi spostare il dock andando in Impostazioni e scegliendo una diversa posizione della barra laterale — Alto, Basso, Sinistra o Destra. Puoi anche nascondere completamente il dock disattivando "Mostra dock sulle pagine" nelle Impostazioni, o premendo Ctrl+Shift+X in qualsiasi momento.
No. DevSuite Pro non raccoglie, traccia o trasmette i tuoi dati di navigazione. Tutte le impostazioni sono memorizzate localmente nel tuo browser. L'unica richiesta esterna effettuata è durante l'attivazione della chiave di licenza per verificare la tua chiave presso il nostro server.
Sì! DevSuite Pro è disponibile sia sul Chrome Web Store che sui componenti aggiuntivi di Firefox. Funziona su Chrome, Edge, Brave e altri browser basati su Chromium, oltre che su Firefox.