DevSuite Pro

64+ potents eines de desenvolupador en una extensió — inspecciona, mesura, captura, analitza i dissenya

DevSuite Pro: el kit definitiu tot-en-un per a desenvolupadors web, disseny i SEO (64 eines en 1 extensió de Chrome) Deixa d'instal·lar desenes d'extensions per inspeccionar elements o provar dissenys responsius. DevSuite Pro és el kit definitiu tot-en-un per a desenvolupadors web i l'extensió de Chrome de disseny front-end. Substitueix moltes eines de webmaster aplegant 64 eines professionals, utilitats de disseny web i analitzadors SEO en una extensió ràpida i respectuosa amb la privadesa. Inspecciona i modifica el CSS en directe, edita HTML, fes captures de pàgina sencera, descarrega totes les imatges i SVG, audita el SEO on-page, executa comprovacions WCAG i contrast, formata JSON / XML / SQL, descodifica JWT, genera contrasenyes i UUID, simula vista mòbil i tauleta, converteix a PDF, monitora trànsit de xarxa i WebSocket, força el mode fosc, edita galetes i molt més. 💾 DESAT AUTOMÀTIC: EDICIONS PERSISTENTS PER LLOC Sis eines desen els canvis per URL i els tornen a aplicar a cada visita, fins i tot després de tancar el navegador: • Inspector CSS — les edicions es mantenen entre recàrregues • Mou Element — els elements reposicionats hi resten • Esborra/Amaga Element — anuncis i banners queden ocults per sempre • Substitutor d'Imatges — les imatges substituïdes es mantenen • Canviador de Fonts — la teva tipografia es torna a aplicar • Editor de Text en Directe — els textos editats persisteixen ═══ 🎨 INSPECCIONA, EDITA I REPLICA ═══ 1) Inspector CSS [GRATIS]: passa el cursor per veure'n el CSS, modifica'l en viu, edita estils i consulta valors calculats, model de caixa, padding, marge, tipografia i variables CSS. Desat automàtic per lloc. 2) Inspector d'Animacions [DE PAGAMENT]: detecta cada animació CSS, transició i regla @keyframes. Alenteix, pausa, repeteix i revisa el moviment fotograma a fotograma. 3) Copia com a Tailwind [DE PAGAMENT]: clic dret sobre qualsevol element per convertir-ne el CSS en classes utilitàries Tailwind a punt per enganxar. 4) Mode Només Contorn [GRATIS]: aplica un contorn d'1 píxel a cada element. Visualitza el wireframe, depura el disseny HTML/CSS i troba els límits ocults dels divs. 5) Ajudant Tailwind [DE PAGAMENT]: passa el cursor per veure l'equivalent en classes Tailwind amb variants per breakpoint i mode fosc. Inclou guia ràpida cercable. 6) Esquemador de Pàgina [GRATIS]: renderitza tot l'arbre HTML com un esquema interactiu. Visualitza l'estructura HTML i la jerarquia del DOM. 7) Detector de Components [DE PAGAMENT]: detecta components de popular JavaScript frameworks and component libraries. 8) Mou Element [DE PAGAMENT]: arrossega qualsevol element a una nova posició. Reposiciona capçaleres, barres laterals i seccions hero sense codi. Es desa per lloc. 9) Esborra / Amaga Element [GRATIS]: clica per eliminar o amagar. Bloqueja anuncis, descarta avisos de galetes i amaga capçaleres fixes. Queden ocults per sempre. 10) Exporta Element [DE PAGAMENT]: exporta l'HTML, el CSS calculat i el JSON de qualsevol element. 11) Copia Codi de Component [DE PAGAMENT]: converteix qualsevol element en codi React JSX, Vue SFC o Svelte a punt per enganxar. 12) Cercador de Camí DOM [DE PAGAMENT]: obté el selector CSS, l'XPath complet i un fragment querySelector. Genera selectors per a Selenium, Puppeteer i WebdriverIO. ═══ 📸 CAPTURA I RECURSOS ═══ 13) Captura de Pantalla [GRATIS]: captura la finestra visible, fes una captura de pàgina sencera o agafa un sol element. Gestiona pàgines llargues, scroll infinit i càrrega diferida. Sense marques d'aigua. 14) Extreu Imatges [GRATIS]: descarrega totes les imatges amb un clic. Filtra per mida i format (PNG, JPG, GIF, WebP, SVG) i descarrega-les en ZIP. 15) Capturador d'SVG [DE PAGAMENT]: troba cada icona SVG i vector inline. Previsualitza, copia codi SVG, optimitza o descarrega com a SVG/PNG. 16) Substitutor d'Imatges [DE PAGAMENT]: substitueix qualsevol imatge per un fitxer local o URL. Es desa per lloc, ideal per a maquetes per a clients. 17) Converteix a PDF [GRATIS]: desa qualsevol web com un PDF net amb ocultació d'anuncis, tema clar forçat i mida de paper personalitzada. ═══ 📐 DISPOSICIÓ I MESURAMENT ═══ 18) Generador de Codi QR [GRATIS]: converteix l'URL actual en un codi QR. URL, text, Wi-Fi, vCard, descarrega com a PNG. 19) Regle de Pàgina [GRATIS]: dibuixa regles i guies de precisió píxel. Mesura amb guies horitzontals, verticals i diagonals. 20) Visor Responsiu [DE PAGAMENT]: mira el lloc renderitzat costat per costat a múltiples mides: common mobile, tablet, and desktop sizes i viewport personalitzat. Sincronitza el desplaçament. 21) Mesurador de Distància [GRATIS]: clica dos elements i veu la distància X, Y i diagonal en píxels amb línies de connexió. 22) Inspector de Z-Index [DE PAGAMENT]: visualitza cada context d'apilament i capa z-index. Diagnostica modals ocults i errors d'apilament. 23) Visualitzador Grid / Flex [DE PAGAMENT]: inspecciona contenidors CSS Grid i Flexbox amb superposicions de colors per a línies de pista, separacions i eixos. ═══ 🔍 ANÀLISI I DEPURACIÓ ═══ 24) Simulador de Heatmap [DE PAGAMENT]: genera un mapa de calor predit d'atenció basat en lectura en patró F i jerarquia visual. Anàlisi UX sense scripts de tercers. 25) Esborra Dades de Navegació [GRATIS]: esborra de manera selectiva memòria cau, galetes, localStorage i sessionStorage només del lloc actual. 26) Stack del Lloc (Detector de Tecnologies) [DE PAGAMENT]: identifica cada tecnologia: frontend frameworks, CMS, e-commerce, CDN, hosting, analytics. 27) Inspector SEO [GRATIS]: auditoria SEO on-page completa: títol, meta descripció, H1–H6, OpenGraph, Twitter Card, canonical, robots, alt i anàlisi d'enllaços. 28) Inspector d'Accessibilitat [DE PAGAMENT]: auditoria automàtica WCAG 2.1 nivell AA. Contrast, alt text, problemes ARIA i etiquetes per a compliment d'ADA, EAA i Section 508. 29) Monitor de Xarxa [DE PAGAMENT]: captura cada petició fetch, XHR i AJAX amb mètode, estat, capçaleres, payload, resposta i temps. Captura peticions que les DevTools no veuen. 30) Inspector de WebSocket [DE PAGAMENT]: captura cada frame WebSocket en temps real: direcció, payload, marca de temps i mida. Depura Socket.io, xat i jocs. 31) Comprovador d'Enllaços Trencats [DE PAGAMENT]: escaneja la pàgina cercant enllaços trencats (404, 500, DNS, timeouts) amb codis HTTP. 32) Imatges Trencades [GRATIS]: escaneja i marca cada imatge que no carrega (404, src absent, DNS, CORS) i les ressalta. 33) Comprovador de CORS [GRATIS]: prova peticions cross-origin i inspecciona capçaleres CORS. Diagnostica errors "blocked by CORS policy" amb preflight OPTIONS. ═══ 🅰️ DISSENY I TIPOGRAFIA ═══ 34) Editor de Text en Directe [GRATIS]: clica qualsevol text per editar-lo in situ. Edita titulars, paràgrafs i etiquetes de botons. Es desa per lloc. 35) Canviador de Fonts [DE PAGAMENT]: substitueix qualsevol tipografia per una de les 1.500+ Google Fonts, globalment o per element. Es desa per lloc. 36) Llista de Totes les Fonts [GRATIS]: descobreix cada tipografia usada: web fonts, fonts del sistema, pesos i estils. Copia el font-family CSS amb un clic. 37) Selector de Color [GRATIS]: comptagotes amb precisió de píxel. Tria colors de text, fons, imatges, degradats i SVG. Surt en HEX, RGB i HSL amb previsualització i historial. 38) Paleta de Colors [GRATIS]: extreu la paleta completa de qualsevol pàgina amb mostres ordenades per freqüència i valors HEX. 39) Convertidor de Format de Color [GRATIS]: tradueix qualsevol color a tots els formats CSS des d'un sol panell (p. ex., enganxa #FF5733 i el veuràs en directe com a rgb(255, 87, 51), hsl(11, 100%, 60%), hsv(11, 80%, 100%) i oklch(64% 0.21 32), amb variants alfa per a la transparència). 40) Extractor de Color d'Imatge [GRATIS]: extreu la paleta de colors dominants de qualsevol imatge. Genera esquemes a partir de fotos. ═══ ⚡ COMMUTADORS I UTILITATS ═══ 41) Força Mode Fosc [GRATIS]: aplica un tema fosc còmode a qualsevol web. Mode nocturn, redueix la fatiga visual. Inversió intel·ligent que preserva imatges i marques. 42) Commuta JavaScript [GRATIS]: activa o desactiva JavaScript per pestanya. Prova el render sense JS, verifica la sortida SSR. 43) Editor de Cookies [GRATIS]: gestió completa de galetes: visualitza, crea, edita, elimina, importa i exporta. Depura fluxos d'autenticació. 44) Registrador de Console [GRATIS]: visualitzador inline per a console.log, warn i error directament a la pàgina. Ideal per a depuració mòbil. 45) Editor de Local Storage [GRATIS]: visualitza, edita i elimina entrades de localStorage i sessionStorage. Depura feature flags i tests A/B. 46) Rendiment de Pàgina [GRATIS]: mètriques de temps instantànies, desglossament de recursos, estadístiques DOM i puntuació general. ═══ ⚙️ FORMATADORS, CONVERTIDORS I GENERADORS ═══ 47) Formatador de JSON [GRATIS]: embelleix, minifica, valida i mostra JSON en un arbre plegable amb detecció d'errors. 48) Codificador/Descodificador Base64 [GRATIS]: codifica text a Base64 o descodifica. Suport UTF-8 i binari. 49) Codificador/Descodificador URL [GRATIS]: codifica caràcters especials a percent-encoded segurs per a URL o descodifica. Arregla query strings. 50) Codificador d'Entitats HTML [GRATIS]: converteix caràcters especials d'HTML (&, <, >, ", ') a entitats o descodifica. 51) Backslash Escape [GRATIS]: escapa i desescapa seqüències amb barra inversa (\\n, \\t, \\", \\\\). Per a JSON, regex i codi. 52) Imatge ↔ Base64 [GRATIS]: converteix qualsevol imatge (PNG, JPG, GIF, SVG, WebP) en una URL de dades Base64 o enganxa Base64 per descarregar-la. 53) Depurador de JWT [GRATIS]: descodifica i inspecciona JSON Web Tokens. Visualitza header, payload i signatura amb JSON formatat. 54) Generador d'UUID [GRATIS]: genera UUID v4 (RFC 4122) un per un o massivament. GUID criptogràficament aleatoris. 55) Generador de Hash [GRATIS]: genera hashes MD5, SHA-1, SHA-256, SHA-384 i SHA-512 a partir de qualsevol text. 56) Generador de Contrasenyes [GRATIS]: genera contrasenyes aleatòries criptogràficament segures amb longitud i caràcters personalitzats. 57) Provador de Regex [GRATIS]: prova expressions regulars amb ressaltat en viu, grups de captura i flags (g, i, m, s, u, y). 58) Convertidor de Timestamp [GRATIS]: converteix entre timestamps Unix (s i ms), ISO 8601, RFC 2822 i dates llegibles amb suport de zones horàries. 59) Eina Diff [GRATIS]: compara dos blocs de text línia a línia amb addicions, supressions i edicions amb codis de color. 60) Comprovador de Contrast (WCAG) [GRATIS]: comprova ràtios de contrast WCAG amb classificació AA i AAA. Previsualització en viu. 61) CSV ↔ JSON [GRATIS]: converteix entre CSV i JSON. Detecta capçaleres, admet delimitadors personalitzats. 62) Formatador d'XML [GRATIS]: embelleix, minifica i valida XML. Formata SOAP, RSS, sitemaps. 63) Formatador d'SQL [GRATIS]: embelleix i indenta consultes SQL (common database dialects). 64) Omplidor de Formularis [DE PAGAMENT]: omple automàticament qualsevol formulari amb dades de prova: noms, correus, telèfons, adreces, dates, targetes de prova, Lorem Ipsum. ═══ 🚀 GRATIS vs DE PAGAMENT ═══ ✅ GRATIS PER SEMPRE: 43 eines essencials (Selector de Color, Captura de Pantalla, Formatador de JSON, Inspector SEO, Editor de Cookies, Regle, Converteix a PDF i més). ⭐ DE PAGAMENT: desbloqueja 21 eines avançades (Ajudant Tailwind, Visor Responsiu, Monitor de Xarxa, Simulador de Heatmap, Omplidor de Formularis i més). ═══ 🔒 LA PRIVADESA PRIMER ═══ DevSuite Pro funciona de manera segura dins del teu navegador Chrome. Sense telemetria, sense analítiques, sense SDK de tercers. El teu codi local, captures, fitxers JSON, regex, tokens d'API i galetes mai surten de la teva màquina. 🚀 Potencia el teu flux de desenvolupament web! Instal·la DevSuite Pro: l'únic kit de desenvolupament web i suite de disseny que necessitaràs. Si t'estalvia temps, dona'ns suport amb una valoració de 5 estrelles.