L'eina Definitiva per a Desenvolupadors per a Disseny i Desenvolupament Web

Més de 64 eines potents per inspeccionar, mesurar, capturar, analitzar i dissenyar pàgines web directament al teu navegador.

Tot Preferits Inspecciona Captura Mesura index.popup_tab_analyse
CSS Inspector
Inspector d'animacions
Copia com a Tailwind
Mode només contorn
Ajudant de Tailwind
Contorn de pàgina
Detector de components
Mou l'element
Elimina/Amaga element
Exporta element
Copia component
Captura de pantalla
Extreu imatges
SVG Grabber
Substitueix imatge
Generador de codis QR
Com començar

Comença a utilitzar DevSuite Pro en pocs clics

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ó.

Afegeix l'extensió a Chrome

  1. Obre la Chrome Web Store i cerca l'extensió "DevSuite Pro".
  2. Fes clic a "Afegeix a Chrome" i després confirma fent clic a "Afegeix extensió" a la finestra emergent.

Obre una pàgina web i inicia una eina

  1. Ves a qualsevol lloc web, després fes clic a la icona de DevSuite Pro a la barra d'eines o utilitza el panell flotant de la pàgina.
  2. Tria qualsevol eina de la quadrícula. Eines com el CSS Inspector, les Regles o el Selector de colors s'activaran a l'instant a la pàgina actual.
Funcions de l'extensió

Funcions clau de DevSuite Pro

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.

CSS Inspector

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 →

Inspector d'elements

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 →

Regles i guies

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 →

Selector de colors (Color Picker)

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 →

Captura de pantalla

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 →

Provador de disseny reactiu

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 →
Explora més eines en detall:
Inspector CSS GRATIS

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 (&lt…

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.

JWT Debugger GRATIS

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.

XML Formatter GRATIS

Formata, Valida i Visualitza XML amb Ressaltat de Sintaxi

XML Formatter formata amb sagnat, minifica i valida XML directament al navegador.

SQL Formatter GRATIS

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…

Preus i plans

Preus senzills i transparents

Tria el millor pla per al teu flux de treball. Comença gratis, millora en qualsevol moment.

Bàsic

Perfecte per provar DevSuite Pro. No cal targeta de crèdit.

0€

Gratis per sempre
Comença gratis
  • 43 eines de desenvolupador gratuïtes
  • CSS Inspector i Selector de colors
  • Captura de pantalla
  • Interfície de panell flotant
  • Totes les futures actualitzacions gratuïtes

Mensual Més popular

Accés complet a les més de 64 eines professionals. Es factura mensualment.

2,99€

al mes
Inicia el pla mensual
  • Totes les més de 64 eines de desenvolupador
  • Accés complet a les eines Pro
  • Fins a 3 dispositius
  • Suport prioritari
  • Cancel·la en qualsevol moment

Pagament únic Millor valor

Paga una vegada, utilitza-ho per sempre. Accés complet a totes les eines pro sense cap quota de subscripció.

29,99€

pagament únic
Compra una vegada, utilitza per sempre
  • Totes les més de 64 eines de desenvolupador
  • Accés complet a les eines Pro
  • Fins a 3 dispositius
  • Suport prioritari
  • Sense quotes de subscripció
DevSuite Pro FAQ section background
Preguntes freqüents

Preguntes freqüents dels usuaris de DevSuite Pro

Preguntes habituals sobre les funcions i l'ús de l'extensió DevSuite Pro. Si tens algun dubte, la resposta podria ser a continuació.

Com instal·lo DevSuite Pro?

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.

Quina és la diferència entre les eines gratuïtes i les eines Pro?

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.

Per què l'eina no funciona en alguns llocs web?

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.

Els canvis que faig a la pàgina són permanents?

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.

Com activo la meva llicència Pro?

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.

Com puc moure o amagar el panell flotant?

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.

DevSuite Pro recopila dades de navegació?

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.

Puc utilitzar DevSuite Pro a Firefox?

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.