Tilføj udvidelsen til Chrome
- Åbn Chrome Webshop og søg efter udvidelsen "DevSuite Pro".
- Klik på "Tilføj til Chrome", og bekræft derefter ved at klikke på "Tilføj udvidelse" i pop op-vinduet.
64+ kraftfulde værktøjer til at inspicere, måle, optage, analysere og designe websider direkte i din browser.
Det er nemt at komme i gang. Installer udvidelsen, åbn en webside, og få adgang til 64+ udviklerværktøjer fra pop op-vinduet eller det flydende panel. Ingen konfiguration påkrævet.
DevSuite Pro tilbyder 64+ udviklerværktøjer til sideinspektion, måling, design og analyse. Fremskynd din arbejdsgang med kraftfulde funktioner indbygget direkte i din browser.
Hold musen over et hvilket som helst element for øjeblikkeligt at se dets CSS-typografier og redigere dem live, hvilket gør fejlfinding og designjusteringer i realtid ekstremt nemme.
Lær mere →Klik på et hvilket som helst element for at inspicere dets egenskaber, dimensioner, afstande, skrifttyper og farver. Forstå sidestrukturen med det samme uden at åbne browserens DevTools.
Lær mere →Mål afstande, tjek justering, og tilføj pixel-præcise linealer og hjælpelinjer til enhver webside for at sikre, at dit design er perfekt justeret.
Lær mere →Vælg farver fra ethvert element på siden, og kopier HEX-, RGB- eller HSL-værdier til din udklipsholder med et enkelt klik.
Lær mere →Tag skærmbilleder af hele siden eller det synlige område på enhver webside, og download dem med det samme — ideelt til deling af design og fejlrapportering.
Lær mere →Se websiden i forskellige skærmstørrelser og enhedsopløsninger for at teste responsivt design uden at forlade browseren.
Lær mere →Live inspektion og redigering af CSS-typografier
CSS Inspector-værktøjet er et kraftfuldt udviklerværktøj, der giver dig mulighed for at se alle CSS-egenskaber for et…
Fejlsøg og styr CSS-animationer i realtid
Animationsinspektoren giver dig fuld kontrol over alle CSS-animationer og overgange på enhver webside.
Konvertér et elements CSS til Tailwind-hjælpeklasser
Kopiér som Tailwind bygger bro mellem visuelt design og Tailwind CSS-kode.
Visualisér den komplette layoutstruktur på enhver side
Kun kontur-tilstand tilføjer farvekodede kantomrids til hvert HTML-element på en webside og giver dig et øjeblikkeligt…
Hent kategoriserede Tailwind-klasser til ethvert element
Tailwind-hjælperen inspicerer ethvert element på en webside og genererer en omfattende, kategoriseret opdeling af…
Visuel HTML-trævisning som overlay på enhver webside
Side-omrideren gengiver den komplette DOM-struktur af enhver webside som et visuelt træ-overlay — direkte på selve siden.
Registrér React-, Vue-, Angular- og Svelte-komponenter på ethvert websted
Komponentdetektoren identificerer automatisk, hvilken frontend-framework et websted bruger, og afslører dets komplette komponenttræ.
Træk og slip for at flytte ethvert element på en side
Flyt element lader dig klikke på et element på en webside og fysisk trække det til en ny position.
Fjern eller skift synlighed for ethvert element
Slet/skjul element lader dig fjerne eller midlertidigt skjule ethvert element på en webside med et enkelt klik.
Eksportér ethvert element som HTML, CSS eller JSON
Eksportér element lader dig klikke på et element på en webside og eksportere dets komplette struktur i tre formater: rå…
Generér React-, Vue- og Svelte-komponenter fra ethvert element
Kopiér komponentkode omdanner ethvert element på en webside til en ren, produktionsklar komponentfil til dit valgte framework.
Tag skærmbilleder af synligt område eller hele siden
Skærmbillede optager billeder i høj kvalitet af enhver webside i to tilstande: synligt område (præcis det, du ser i…
Vis, vælg og download alle billeder fra enhver webside
Udtræk billeder scanner enhver webside og præsenterer hvert billede i et gennembladeligt galleri.
Find, Forhåndsvis og Download Alle SVG'er på Enhver Side
SVG Grabber opdager alle SVG'er på en webside — inline SVG-elementer, eksterne .svg-filreferencer, SVG-sprites…
Byt Ethvert Billede på en Side med Dit Eget
Billederstatter lader dig klikke på et billede på en webside og erstatte det med dit eget — enten ved at uploade en…
Generer QR-koder for Enhver URL eller Tekst Øjeblikkeligt
QR-kodegenerator opretter automatisk en scanbar QR-kode for den aktuelle sides URL — eller for enhver brugerdefineret…
Pixel-præcise Linealer, Guider og Målinger på Enhver Side
Sidelineal tilføjer Photoshop-lignende linealer og trækkbare vejledningslinjer til enhver webside.
Forhåndsvis Flere Enhedsviewports Samtidigt
Responsiv visning viser den aktuelle webside gengivet i flere enhedsviewport-størrelser side om side — alt på én skærm.
Mål Præcise Pixelafstande Mellem To Elementer
Mål afstand lader dig klikke på to elementer på en webside og øjeblikkeligt se den præcise pixelafstand mellem dem…
Visualiser Alle Stacking-kontekster og Z-indeks-lag
Z-indeks-inspektor afslører den komplette stacking-rækkefølge for hvert element på en webside.
Inspicer CSS Grid og Flexbox-layouts med Visuelle Overlays
Grid/Flex-visualizer registrerer alle CSS Grid og Flexbox-beholdere på en webside og gengiver deres layoutstruktur som…
Simuler Bruger-opmærksomheds-hotspots på Enhver Side
Heatmap-simulator genererer et forudsagt opmærksomheds-heatmap for en webside baseret på etablerede…
Selektivt Ryd Cache, Cookies, localStorage og sessionStorage
Ryd browserdata giver udviklere en hurtig, selektiv måde at ryde specifikke typer browserdata for det aktuelle sted…
Registrer Alle Teknologier Bag Ethvert Websted
Site Stack scanner ethvert websted og identificerer dets komplette teknologistak — frontend-frameworks (React, Vue…
Komprehensiv SEO-audit: Meta-tags, Overskrifter, OpenGraph og Mere
SEO-inspektor giver en øjeblikkelig, komprehensiv SEO-audit af en webside.
Automatiseret WCAG-audit: Kontrast, Alt-tekst, ARIA og Mere
Tilgængelighedsinspektor kører automatiserede WCAG 2.1 Niveau AA-tjek på en webside og producerer en kategoriseret…
Klik på Enhver Tekst på Enhver Side for at Redigere den Øjeblikkeligt
Live teksteditor gør hvert tekstelement på en webside redigerbart med et enkelt klik.
Byt Enhver Skrifttype Globalt eller Per-Element fra Google Fonts
Skrifttype-skifter lader dig erstatte enhver skrifttype på en webside med en anden fra Google Fonts-biblioteket — enten…
Opdag Alle Skrifttyper Brugt på Enhver Webside
Vis alle skrifttyper scanner en webside og præsenterer en komplet oversigt over alle skrifttypefamilier i brug…
Præcisions-eyedropper for HEX, RGB og HSL farveværdier
Farvevælger giver et pixel-præcist eyedropper-værktøj til at vælge farver fra et element på en webside — tekst…
Udtræk den Komplette Farvepalet fra Enhver Webside
Farvepalet scanner alle elementer på en webside og udtrækker det komplette sæt af farver brugt — fra tekst og baggrunde…
Anvend Mørk Tilstand på Ethvert Websted Øjeblikkeligt
Tvungen mørk tilstand anvender et mørkt farveskema på ethvert websted, der ikke tilbyder et — eller tilsidesætter et steds lystema.
Aktiver eller Deaktiver JavaScript Per Fane Øjeblikkeligt
Slå JavaScript til/fra deaktiverer eller genaktiverer JavaScript-udførelse for den aktuelle browserfane med et enkelt klik.
Vis, Rediger, Tilføj og Slet Cookies for Ethvert Domæne
Cookie-editor viser alle cookies for det aktuelle domæne i en ren, sorterbar tabel.
Se Konsoloutput i et Flydende Panel — Uden DevTools
Konsollogger fanger alt konsoloutput (console.log, console.warn, console.error, console.info) og viser det i et…
Overvåg Alle Netværksanmodninger i Realtid
Netværksmonitor fanger og viser alle netværksanmodninger foretaget af den aktuelle side — XHR/Fetch API-kald…
Vis, Rediger, Tilføj og Slet localStorage og sessionStorage
Lokal lager-editor giver en ren tabelgrænseflade til at administrere localStorage og sessionStorage-poster for det aktuelle sted.
Skan Hvert Link på en Side og Find Brudte
Brudt link-tjekker scanner hvert link på den aktuelle side — ankerhref'er, billedkilder, scriptkilder og…
Øjeblikkeligt Ydelses-dashboard: Indlæsningstid, DOM-statistik og Ressourcer
Sideydelse giver et øjeblikkeligt ydelsesoverblik over enhver webside — indlæsningstidsmålinger (FCP, DOMContentLoaded…
Formatér, minificér og validér JSON med ét klik
JSON Formatter formaterer, minificerer og validerer JSON direkte i din browser.
Kod strenge til og fra Base64 øjeblikkeligt
Base64 kodning/afkodning konverterer tekst til Base64 og Base64 tilbage til tekst direkte i din browser.
Kod og afkod URL-strenge med ét klik
URL-kodning/afkodning konverterer URL-strenge til og fra deres procentkodede form.
Kod og afkod HTML-entiteter øjeblikkeligt
HTML-entitetskoder konverterer specialtegn (< > & " ') til deres HTML-entitetsækvivalenter (< > & " ') og tilbage igen.
Escape og unescape strenge til kode
Backslash Escape/Unescape konverterer strenge til og fra deres escapede form (\n \t \r \" \' \\ og Unicode-escapes).
Konverter billeder til og fra Base64 Data-URI'er
Billede ↔ Base64 konverterer billedfiler (PNG, JPG, SVG, WebP, GIF) til Base64-kodede data-URI'er og tilbage igen.
Afkod JSON Web Tokens øjeblikkeligt
JWT Debugger afkoder og inspicerer JSON Web Tokens — parser header, payload og signatur, viser claims og markerer udløbsstatus.
Generer UUID v4-identifikatorer i bulk
UUID-generator producerer kryptografisk stærke UUID v4-identifikatorer ved hjælp af browserens crypto-API.
Beregn MD5-, SHA-1-, SHA-256-, SHA-384- og SHA-512-hashes
Hash-generator beregner kryptografiske hashes (MD5, SHA-1, SHA-256, SHA-384, SHA-512) af enhver tekstinput.
Generer kryptografisk stærke adgangskoder
Adgangskodegenerator producerer stærke, tilfældige adgangskoder ved hjælp af browserens kryptografiske tilfældigheds-API.
Test regulære udtryk live med matchfremhævning
Regex Tester evaluerer regulære udtryk mod testtekst i realtid.
Konverter Unix-, ISO- og læsevenlige datoer
Timestamp Converter oversætter mellem Unix-tidsstempler (sekunder, millisekunder, mikrosekunder, nanosekunder), ISO…
Sammenlign to tekstblokke linje for linje
Diff Tool sammenligner to tekstblokke og fremhæver tilføjede, fjernede og uændrede linjer med farvekodet output.
Kontrollér WCAG-kontrastforholdet mellem to farver
Contrast Checker beregner WCAG 2.1-kontrastforholdet mellem to farver og bedømmer dem mod AA/AAA-tærskelværdier for…
Konverter HEX, RGB, HSL, HSV og OKLCH øjeblikkeligt
Color Format Converter oversætter enhver farve mellem HEX, RGB, HSL, HSV og OKLCH.
Udtræk Den Dominerende Farvepalette Fra Ethvert Billede
Farveudtrækker til billeder analyserer enhver billedfil (træk, indsæt eller klik for at indlæse) og returnerer op til…
Få CSS-Selektorer & XPath For Ethvert Element
DOM Path Finder lader dig holde musen over et hvilket som helst element på en side for at afsløre dets unikke…
Test Cross-Origin-Forespørgsler & Inspicér CORS-Headers
CORS Checker tester, om en cross-origin-forespørgsel fra dit websted vil blive tilladt af målserveren.
Fang WebSocket-Frames I Realtid
WebSocket Inspector fanger hver WebSocket-frame — sendt og modtaget — på tværs af alle forbindelser på siden.
Scan Siden For Ødelagte Billeder Med Det Samme
Broken Image Finder scanner hvert <img>-element og CSS background-image på siden, registrerer fejlede indlæsninger…
Udfyld formularer automatisk med realistiske testdata
Form Filler udfylder alle synlige formularfelter på siden med realistiske testdata — navn, e-mail, telefon, adresse, adgangskode osv.
Konvertér mellem CSV og JSON i begge retninger
CSV ↔ JSON Converter håndterer hele turen mellem de to mest almindelige tabelformater.
Formatér, validér og vis XML med syntaksfremhævning
XML Formatter pretty-printer, minificerer og validerer XML direkte i browseren.
Gør SQL-forespørgsler pæne og formatér dem
SQL Formatter omdanner minificeret eller rodet SQL til letlæselige, indrykkede forespørgsler.
Gem websider som rene PDF'er
Convert to PDF gemmer den aktuelle webside som en PDF via browserens udskriftsdialog, efter at have anvendt printvenlige typografier først.
Vælg den bedste plan til din arbejdsgang. Start gratis, opgrader når som helst.
Almindelige spørgsmål om funktionerne og brugen af DevSuite Pro-udvidelsen. Hvis du har et spørgsmål, kan svaret være herunder.
Besøg Chrome Webshop, søg efter "DevSuite Pro", klik på "Tilføj til Chrome" og bekræft ved at vælge "Tilføj udvidelse". Når den er installeret, vises udvidelsesikonet i din browsers værktøjslinje. Klik på det for at få øjeblikkelig adgang til 64+ udviklerværktøjer.
Gratis værktøjer (43+) er tilgængelige for alle uden licens. Pro-værktøjer har et gyldent PRO-badge og kræver en aktiv Pro-licens for at blive brugt. Du kan se, hvilke værktøjer der er gratis eller Pro i pop op-vinduet — gratis værktøjer har intet hængelåsikon, mens Pro-værktøjer vil se lidt grå ud, indtil du aktiverer din licens.
Nogle websteder har strenge politikker for indholdssikkerhed (CSP), der blokerer visse handlinger fra browserudvidelser. Dette er især almindeligt på bank- og regeringswebsteder. Desuden tillader Chromes interne sider (chrome://) ikke udvidelser at køre indholdsscripts.
Nej. Alle ændringer foretaget med værktøjer som Flyt element, Live teksteditor, Slet/skjul element og CSS Inspector er midlertidige. De påvirker kun det, du ser i din browser lige nu. Hvis du opdaterer siden, vender alt tilbage til den oprindelige tilstand.
Åbn DevSuite Pro-pop-op-vinduet, klik på indstillingsikonet i øverste højre hjørne. Rul ned til licenssektionen, indsæt din licensnøgle i inputfeltet, og klik på Aktiver. Hvis nøglen er gyldig, ændres badget fra FREE til PRO, og alle Pro-værktøjer låses op med det samme.
Du kan flytte panelet ved at gå til Indstillinger og vælge en anden placering af sidebjælken — Top, Bund, Venstre eller Højre. Du kan også skjule panelet helt ved at slå kontakten "Vis panel på sider" fra i Indstillinger eller ved at trykke på Ctrl+Shift+X.
Nej. DevSuite Pro indsamler, sporer eller transmitterer ikke nogen af dine browserdata. Alle indstillinger gemmes lokalt i din browser. Den eneste eksterne anmodning sendes under licensnøgleaktivering for at verificere din nøgle med vores server.
Ja! DevSuite Pro er tilgængelig i både Chrome Webshop og Firefox Add-ons. Den fungerer i Chrome, Edge, Brave og andre Chromium-baserede browsere samt i Firefox.