Afegeix l'extensió a Chrome
- Obre la Chrome Web Store i cerca l'extensió "DevSuite Pro".
- Fes clic a "Afegeix a Chrome" i després confirma fent clic a "Afegeix extensió" a la finestra emergent.
Més de 64 eines potents per inspeccionar, mesurar, capturar, analitzar i dissenyar pàgines web directament al teu navegador.
Començar és senzill. Instal·la l'extensió, obre qualsevol pàgina web i accedeix a més de 64 eines de desenvolupador des de la finestra emergent o el panell flotant. No cal configuració.
DevSuite Pro ofereix més de 64 eines de desenvolupador per a la inspecció de pàgines, mesura, disseny i anàlisi. Accelera el teu flux de treball amb funcions potents integrades directament al teu navegador.
Passa el ratolí per sobre de qualsevol element per veure instantàniament els seus estils CSS i editar-los en viu, facilitant la depuració i l'ajust de dissenys en temps real.
Saber-ne més →Fes clic a qualsevol element per inspeccionar-ne les propietats, dimensions, espais, fonts i colors. Entén l'estructura de la pàgina a l'instant sense obrir les DevTools del navegador.
Saber-ne més →Mesura distàncies, comprova l'alineació i afegeix regles i guies amb precisió de píxel a qualsevol pàgina web per assegurar-te que el teu disseny estigui perfectament alineat.
Saber-ne més →Tria colors de qualsevol element de la pàgina i copia els valors HEX, RGB o HSL al teu porta-retalls amb un sol clic.
Saber-ne més →Fes captures de pantalla de tota la pàgina o de l'àrea visible de qualsevol pàgina web i descarrega-les a l'instant; ideal per compartir dissenys i reportar errors.
Saber-ne més →Previsualitza la pàgina web en diferents mides de pantalla i resolucions de dispositius per provar el disseny reactiu sense sortir del navegador.
Saber-ne més →Inspecció i edició d'estils CSS en viu
L'eina CSS Inspector és una potent eina per a desenvolupadors que et permet veure totes les propietats CSS de qualsevol…
Depura i controla les animacions CSS en temps real
L'Inspector d'animacions t'ofereix un control total sobre cada animació i transició CSS que s'executa en qualsevol pàgina web.
Converteix el CSS de qualsevol element en classes d'utilitat Tailwind
Copia com a Tailwind tanca la bretxa entre el disseny visual i el codi Tailwind CSS.
Visualitza l'estructura de disseny completa de qualsevol pàgina
El mode només contorn afegeix contorns de vora codificats per colors a cada element HTML d'una pàgina web, oferint-te…
Obtén classes Tailwind categoritzades per a qualsevol element
L'Ajudant de Tailwind inspecciona qualsevol element d'una pàgina web i genera un desglossament exhaustiu i categoritzat…
Superposició visual de l'arbre HTML en qualsevol pàgina web
L'Esquema de pàgina renderitza l'estructura DOM completa de qualsevol pàgina web com una superposició d'arbre visual…
Detecta components de React, Vue, Angular i Svelte en qualsevol lloc
El Detector de components identifica automàticament quin entorn de treball (framework) de frontend utilitza un lloc web…
Arrossega i deixa anar per reposicionar qualsevol element d'una pàgina
Mou l'element et permet fer clic en qualsevol element d'una pàgina web i arrossegar-lo físicament a una nova posició.
Elimina o canvia la visibilitat de qualsevol element
Elimina/Amaga l'element et permet eliminar o amagar temporalment qualsevol element d'una pàgina web amb un sol clic.
Exporta qualsevol element com a HTML, CSS o JSON
Exporta l'element et permet fer clic en qualsevol element d'una pàgina web i exportar la seva estructura completa en…
Genera components de React, Vue i Svelte des de qualsevol element
Copia el codi del component transforma qualsevol element d'una pàgina web en un fitxer de component net i a punt per a…
Captura l'àrea visible o captures de pantalla de pàgina completa
La Captura de pantalla captura imatges d'alta qualitat de qualsevol pàgina web en dos modes: àrea visible (exactament…
Visualitza, selecciona i baixa totes les imatges de qualsevol pàgina web
Extrau les imatges escaneja qualsevol pàgina web i presenta cada imatge en una galeria navegable.
Troba, previsualitza i baixa cada SVG de qualsevol pàgina
El Capturador d'SVGs descobreix cada SVG d'una pàgina web — elements SVG integrats (inline), referències a fitxers .svg…
Intercambia Cualquier Imagen de una Página con la Tuya
El Reemplazador de Imágenes te permite hacer clic en cualquier imagen de una página web y reemplazarla con la tuya — ya…
Genera codis QR per a qualsevol URL o text a l'instant
El Generador de codis QR crea un codi QR escanejable per a l'adreça URL de la pàgina actual automàticament — o per a…
Regles, guies i mesures amb precisió de píxel a qualsevol pàgina
Regle de pàgina afegeix regles d'estil Photoshop i línies de guia arrossegables a qualsevol pàgina web.
Previsualitza múltiples visors de dispositius simultàniament
El Visualitzador reactiu mostra la pàgina web actual renderitzada segons les mides dels visors de diversos dispositius…
Mesura distàncies de píxels exactes entre qualsevol parell d'elements
El Mesurador de distàncies et permet clicar en qualsevol parell d'elements d'una pàgina web i veure a l'instant la…
Visualitza cada context d'apilament i cada capa de z-index
L'Inspector de z-index revela l'ordre d'apilament complet de cada element d'una pàgina web.
Inspecciona dissenys de CSS Grid i Flexbox amb superposicions visuals
El Visualitzador de Grid/Flex detecta tots els contenidors CSS Grid i Flexbox d'una pàgina web i en renderitza…
Simula punts calents d'atenció de l'usuari a qualsevol pàgina
El Simulador de mapes de calor genera un mapa de calor d'atenció predicte per a qualsevol pàgina web basat en patrons…
Esborra selectivament la memòria cau, les galetes, localStorage i sessionStorage
Esborra les dades de navegació ofereix als desenvolupadors una manera ràpida i selectiva d'esborrar tipus específics de…
Detecta totes les tecnologies que hi ha darrere de qualsevol lloc web
Pila tecnològica escaneja qualsevol lloc web i n'identifica la pila tecnològica completa: frameworks de frontend…
Auditoria completa d'SEO: etiquetes meta, encapçalaments, OpenGraph i més
L'Inspector d'SEO ofereix una auditoria d'SEO instantània i completa de qualsevol pàgina web.
Auditoria de WCAG automatitzada: contrast, text alternatiu, ARIA i més
L'Inspector d'accessibilitat executa comprovacions automatitzades de WCAG 2.1 Nivell AA a qualsevol pàgina web i genera…
Fes clic a qualsevol text de qualsevol pàgina per editar-lo a l'instant
L'Editor de text en viu fa que cada element de text d'una pàgina web sigui editable amb un sol clic.
Canvia qualsevol font de forma global o per element des de Google Fonts
El Canviador de fonts et permet substituir qualsevol font d'una pàgina web per una altra de la biblioteca de Google…
Descobreix cada font utilitzada en qualsevol pàgina web
Llista totes les fonts escaneja qualsevol pàgina web i presenta un inventari complet de cada família de fonts en ús…
Comptagotes digital de precisió per a valors HEX, RGB i HSL
El Selector de colors proporciona una eina de comptagotes amb precisió de píxel per seleccionar colors de qualsevol…
Extreu la paleta completa de colors de qualsevol pàgina web
La Paleta de colors escaneja cada element d'una pàgina web i extreu el conjunt complet de colors utilitzats — des del…
Aplica el mode fosc a qualsevol lloc web a l'instant
Força el mode fosc aplica un esquema de colors fosc a qualsevol lloc web que no n'ofereixi cap — o substitueix el tema clar d'un lloc.
Activa o desactiva el JavaScript per pestanya a l'instant
Commuta el JavaScript desactiva o torna a activar l'execució de JavaScript de la pestanya actual del navegador amb un sol clic.
Visualitza, edita, afegeix i elimina galetes de qualsevol domini
L'Editor de galetes mostra totes les galetes del domini actual en una taula neta i ordenable.
Visualitza la sortida de la consola en un panell flotant — sense les DevTools
El Registre de consola captura tota la sortida de la consola (console.log, console.warn, console.error, console.info) i…
Monitoritza totes les peticions de xarxa en temps real
El Monitor de xarxa captura i mostra cada petició de xarxa realitzada per la pàgina actual — crides a l'API XHR/Fetch…
Visualitza, edita, afegeix i elimina localStorage i sessionStorage
L'Editor de l'emmagatzematge local ofereix una interfície de taula neta per gestionar les entrades de localStorage i…
Escaneja cada enllaç d'una pàgina i troba els que estan trencats
El Verificador d'enllaços trencats escaneja cada enllaç de la pàgina actual — atributs href d'ancoratge, fonts…
Tauler de rendiment instantani: temps de càrrega, estadístiques DOM i recursos
El Rendiment de la pàgina proporciona una visió general instantània del rendiment de qualsevol pàgina web — mètriques…
Formata, minimitza i valida JSON amb un clic
El Formatador JSON embelleix, minimitza i valida JSON directament al navegador.
Codifica cadenes de i a Base64 a l'instant
El Codificador/Descodificador Base64 converteix text a Base64 i Base64 de nou a text directament al navegador.
Codifica i descodifica cadenes URL amb un clic
El Codificador/Descodificador URL converteix cadenes URL de i cap a la seva forma codificada amb percentatge.
Codifica i descodifica entitats HTML a l'instant
El Codificador d'entitats HTML converteix caràcters especials (< > & " ') als seus equivalents en entitats HTML (<…
Escapa i desescapa cadenes per a codi
L'Escapament/Desescapament de barra invertida converteix cadenes de i cap a la seva forma escapada (\n \t \r \" \' \\ i escapaments Unicode).
Converteix imatges a i des de Base64 Data URI
Imatge ↔ Base64 converteix fitxers d'imatge (PNG, JPG, SVG, WebP, GIF) a data URI codificats en Base64 i a la inversa.
Descodifica JSON Web Tokens a l'instant
JWT Debugger descodifica i inspecciona JSON Web Tokens — analitza la capçalera, el payload i la signatura, mostra les…
Genera identificadors UUID v4 en massa
El Generador de UUID produeix identificadors UUID v4 criptogràficament forts fent servir l'API de criptografia del navegador.
Calcula hashos MD5, SHA-1, SHA-256, SHA-384, SHA-512
El Generador de Hash calcula hashos criptogràfics (MD5, SHA-1, SHA-256, SHA-384, SHA-512) de qualsevol text introduït.
Genera contrasenyes criptogràficament fortes
El Generador de Contrasenyes produeix contrasenyes fortes i aleatòries fent servir l'API de generació d'aleatorietat…
Prova expressions regulars en directe amb ressaltat de coincidències
El Comprovador de Regex avalua expressions regulars contra un text de prova en temps real.
Converteix dates Unix, ISO i llegibles per a humans
El Convertidor de Marques de Temps tradueix entre marques de temps Unix (segons, mil·lisegons, microsegons…
Compara dos blocs de text línia per línia
L'Eina de Diferències compara dos blocs de text i ressalta les línies afegides, eliminades i sense canvis amb sortida acolorida.
Comprova la ràtio de contrast WCAG entre dos colors
El Comprovador de Contrast calcula la ràtio de contrast WCAG 2.1 entre dos colors i els qualifica segons els llindars…
Converteix HEX, RGB, HSL, HSV i OKLCH a l'instant
El Convertidor de Format de Color tradueix qualsevol color entre HEX, RGB, HSL, HSV i OKLCH.
Extreu la Paleta Dominant de Qualsevol Imatge
Image Color Extractor analitza qualsevol fitxer d'imatge (arrossega, enganxa o fes clic per carregar-lo) i retorna fins…
Obtén Selectors CSS i XPath per a Qualsevol Element
DOM Path Finder et permet passar el cursor per sobre de qualsevol element d'una pàgina per revelar-ne el selector CSS…
Prova Peticions entre Orígens i Inspecciona les Capçaleres CORS
CORS Checker prova si una petició entre orígens des del teu lloc seria permesa pel servidor de destinació.
Captura Trames de WebSocket en Temps Real
WebSocket Inspector captura cada trama de WebSocket — enviada i rebuda — en totes les connexions de la pàgina.
Escaneja la Pàgina a la Cerca d'Imatges Trencades a l'Instant
Broken Image Finder escaneja cada <img> i cada background-image CSS de la pàgina, detecta càrregues fallides (404s…
Emplena Formularis Automàticament amb Dades de Prova Realistes
Form Filler emplena tots els camps de formulari visibles de la pàgina amb dades de prova realistes: nom, correu…
Converteix Entre CSV i JSON en Qualsevol Direcció
El Convertidor CSV ↔ JSON gestiona el cicle complet entre els dos formats tabulars més habituals.
Formata, Valida i Visualitza XML amb Ressaltat de Sintaxi
XML Formatter formata amb sagnat, minifica i valida XML directament al navegador.
Embelleix i Formata Consultes SQL
SQL Formatter transforma consultes SQL minificades o desordenades en consultes llegibles i sagnades.
Desa Pàgines Web com a PDFs Nets
Convert to PDF desa la pàgina web actual com a PDF a través del diàleg d'impressió del navegador, aplicant primer…
Tria el millor pla per al teu flux de treball. Comença gratis, millora en qualsevol moment.
Preguntes habituals sobre les funcions i l'ús de l'extensió DevSuite Pro. Si tens algun dubte, la resposta podria ser a continuació.
Visita la Chrome Web Store, cerca "DevSuite Pro", fes clic a "Afegeix a Chrome" i confirma seleccionant "Afegeix extensió". Un cop instal·lada, la icona de l'extensió apareixerà a la barra d'eines del navegador. Fes-hi clic per accedir a més de 64 eines de desenvolupador a l'instant.
Les eines gratuïtes (43+) estan disponibles per a tothom sense llicència. Les eines Pro porten una insígnia PRO daurada i requereixen una llicència Pro activa per utilitzar-les. Pots veure quines eines són gratuïtes o Pro a la finestra emergent: les eines gratuïtes no tenen icona de cadenat, mentre que les eines Pro apareixeran una mica atenuades fins que activis la teva llicència.
Alguns llocs web tenen polítiques de seguretat de contingut (CSP) estrictes que bloquegen certes accions de les extensions del navegador. Això és especialment comú en llocs web bancaris i mentals. A més, les pàgines internes de Chrome (chrome://) no permeten que les extensions executin scripts de contingut.
No. Tots els canvis fets per eines com Mou l'element, Editor de text en viu, Elimina/Amaga element i CSS Inspector són temporals. Només afecten el que veus al teu navegador en aquest moment. Actualitzar la pàgina ho retornarà tot al seu estat original.
Obre la finestra emergent de DevSuite Pro, fes clic a la icona de Configuració a la cantonada superior dreta. Baixa fins a la secció de llicència, enganxa la teva clau de llicència al camp d'entrada i fes clic a Activa. Si la clau és vàlida, la insígnia canviarà de GRATIS a PRO i totes les eines pro es desbloquejaran a l'instant.
Pots moure el panell anant a Configuració i triant una posició de barra lateral diferent: a Dalt, a Baix, a l'Esquerra o a la Dreta. També pots amagar completament el panell desactivant l'interruptor "Mostra panell a les pàgines" a Configuració o prement Ctrl+Shift+X en qualsevol moment.
No. DevSuite Pro no recopila, rastreja ni transmet cap de les teves dades de navegació. Tots els ajustos es guarden localment al teu navegador. L'única petició externa es fa durant l'activació de la clau de llicència per verificar-la amb el nostre servidor.
Sí! DevSuite Pro està disponible tant a la Chrome Web Store com a Firefox Add-ons. Funciona a Chrome, Edge, Brave i altres navegadors basats en Chromium, així com a Firefox.