Det ultimative Værktøjssæt til udviklere til webdesign og udvikling

64+ kraftfulde værktøjer til at inspicere, måle, optage, analysere og designe websider direkte i din browser.

Alle Favoritter Inspicer Optag Mål index.popup_tab_analyse
CSS Inspector
Animationsinspektør
Kopier som Tailwind
Kun konturtilstand
Tailwind-hjælper
Side-outliner
Komponent-detektor
Flyt element
Slet/skjul element
Eksporter element
Kopier komponent
Skærmbillede
Udtræk billeder
SVG Grabber
Erstat billede
QR-kodegenerator
Sidan kommer du i gang

Begynd at bruge DevSuite Pro med få klik

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.

Tilføj udvidelsen til Chrome

  1. Åbn Chrome Webshop og søg efter udvidelsen "DevSuite Pro".
  2. Klik på "Tilføj til Chrome", og bekræft derefter ved at klikke på "Tilføj udvidelse" i pop op-vinduet.

Åbn en webside og start et værktøj

  1. Gå til et hvilket som helst websted, og klik derefter på DevSuite Pro-ikonet i værktøjslinjen, eller brug det flydende panel på siden.
  2. Vælg et hvilket som helst værktøj fra oversigten. Værktøjer som CSS Inspector, Linealer eller Farvevælger aktiveres med det samme på den aktuelle side.
Udvidelsesfunktioner

Nøglefunktioner i DevSuite Pro

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.

CSS Inspector

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 →

Elementinspektør

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 →

Linealer og hjælpelinjer

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 →

Farvevælger (Color Picker)

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ærmbillede

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 →

Responsiv tester

Se websiden i forskellige skærmstørrelser og enhedsopløsninger for at teste responsivt design uden at forlade browseren.

Lær mere →
Udforsk flere værktøjer i detaljer:
CSS Inspector GRATIS

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…

Side-omrider GRATIS

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.

Skærmbillede GRATIS

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…

Sidelineal GRATIS

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 afstand GRATIS

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…

SEO-inspektor GRATIS

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…

Farvevælger GRATIS

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…

Farvepalet GRATIS

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.

Cookie-editor GRATIS

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.

Konsollogger GRATIS

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…

Sideydelse GRATIS

Ø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 (&lt; &gt; &amp; &quot; &#39;) 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.

JWT Debugger GRATIS

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.

Regex Tester GRATIS

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…

Diff Tool GRATIS

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…

CORS Checker GRATIS

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.

XML Formatter GRATIS

Formatér, validér og vis XML med syntaksfremhævning

XML Formatter pretty-printer, minificerer og validerer XML direkte i browseren.

SQL Formatter GRATIS

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.

Priser og planer

Enkel og gennemsigtig prissætning

Vælg den bedste plan til din arbejdsgang. Start gratis, opgrader når som helst.

Basis

Perfekt til at prøve DevSuite Pro. Intet kreditkort kræves.

$0

Gratis altid
Start gratis
  • 43 gratis udviklerværktøjer
  • CSS Inspector og farvevælger
  • Tag skærmbillede
  • Interface med flydende panel
  • Alle fremtidige gratis opdateringer

Månedlig Mest populær

Fuld adgang til alle 64+ professionelle værktøjer. Faktureres månedligt.

$2.99

om måneden
Start månedlig plan
  • Alle 64+ udviklerværktøjer
  • Fuld adgang til Pro-værktøjer
  • Op til 3 enheder
  • Prioriteret support
  • Annuller når som helst

Engangsbeløb Bedste værdi

Betal én gang, brug altid. Fuld adgang til alle 64+ Pro-værktøjer uden abonnementsgebyrer.

$29.99

engangsbetaling
Køb én gang, brug altid
  • Alle 64+ udviklerværktøjer
  • Fuld adgang til Pro-værktøjer
  • Op til 3 enheder
  • Prioriteret support
  • Ingen abonnementsgebyrer
DevSuite Pro FAQ section background
Ofte stillede spørgsmål

Spørgsmål fra DevSuite Pro-brugere

Almindelige spørgsmål om funktionerne og brugen af DevSuite Pro-udvidelsen. Hvis du har et spørgsmål, kan svaret være herunder.

Hvordan installerer jeg DevSuite Pro?

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.

Hvad er forskellen på gratis og Pro-væ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.

Hvorfor virker værktøjet ikke på visse websteder?

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.

Er de ændringer, jeg foretager på siden, permanente?

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.

Hvordan aktiverer jeg min Pro-licens?

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

Hvordan kan jeg flytte eller skjule det flydende panel?

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.

Indsamler DevSuite Pro browserdata?

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.

Kan jeg bruge DevSuite Pro i Firefox?

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.