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
Debug e controllo delle animazioni CSS in tempo reale
Converti il CSS di qualsiasi elemento in classi Tailwind
Visualizza la struttura completa del layout della pagina
Ottieni classi Tailwind categorizzate per qualsiasi elemento
Vista albero HTML visuale su qualsiasi pagina
Rileva componenti React, Vue, Angular e Svelte
Trascina e rilascia per riposizionare qualsiasi elemento
Rimuovi o attiva/disattiva la visibilità di qualsiasi elemento
Esporta qualsiasi elemento come HTML, CSS o JSON
Genera componenti React, Vue e Svelte da qualsiasi elemento
Cattura l'area visibile o l'intera pagina
Visualizza, seleziona e scarica tutte le immagini da qualsiasi pagina
Trova, anteprima e scarica ogni SVG su qualsiasi pagina
Sostituisci qualsiasi immagine sulla pagina con la tua
Genera codici QR per qualsiasi URL o testo
Righelli, guide e misurazioni pixel-perfect
Anteprima simultanea su piu dispositivi
Misura distanza pixel esatta tra due elementi
Visualizza contesti stacking e livelli z-index
Ispeziona layout CSS Grid e Flexbox con sovrapposizioni
Simula hotspot attenzione utenti
Cancella selettivamente cache, cookie, localStorage e sessionStorage
Rileva ogni tecnologia dietro qualsiasi sito
Audit SEO completo: Meta tag, intestazioni, OpenGraph e altro
Audit WCAG automatizzato: Contrasto, Alt text, ARIA e altro
Clicca su qualsiasi testo per modificarlo istantaneamente
Cambia qualsiasi font globalmente o per singolo elemento
Scopri ogni font usato su qualsiasi pagina
Strumento contagocce di precisione per valori HEX, RGB e HSL
Estrai la palette colori completa da qualsiasi pagina
Applica istantaneamente la modalità scura su qualsiasi sito
Attiva o disattiva istantaneamente JavaScript per la scheda corrente
Visualizza, modifica, aggiungi ed elimina cookie
Visualizza l'output console in un pannello fluttuante — senza DevTools
Monitora tutte le richieste di rete in tempo reale
Visualizza e modifica localStorage e sessionStorage
Scansiona ogni link sulla pagina e trova quelli rotti
Dashboard performance istantanea: tempo caricamento, statistiche DOM e risorse
Formatta, minifica e convalida JSON in un clic
Codifica stringhe da e verso Base64 istantaneamente
Codifica e decodifica stringhe URL in un clic
Codifica e decodifica entità HTML istantaneamente
Esegue l'escape e l'unescape delle stringhe per il codice
Converti immagini da e verso Data URI Base64
Decodifica JSON Web Token istantaneamente
Genera identificatori UUID v4 in blocco
Calcola hash MD5, SHA-1, SHA-256, SHA-384, SHA-512
Genera password crittograficamente forti
Testa le espressioni regolari dal vivo con evidenziazione dei match
Converti date Unix, ISO e leggibili dall'uomo
Confronta due blocchi di testo riga per riga
Controlla il rapporto di contrasto WCAG di due colori qualsiasi
Converti istantaneamente HEX, RGB, HSL, HSV e OKLCH
Estrai la tavolozza dominante da qualsiasi immagine
Get CSS Selectors & XPath For Any Element
Testa le richieste Cross-Origin e ispeziona gli header CORS
Cattura i frame WebSocket in tempo reale
Scansiona istantaneamente la pagina alla ricerca di immagini interrotte
Compila i moduli con dati di test realistici
Converti tra CSV e JSON in entrambe le direzioni
Formatta, valida e visualizza XML con evidenziazione della sintassi
Abbellisci e formatta le query SQL
Salva le pagine web come PDF puliti
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 (20+) 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.