Den ultimata Verktyfslådan för utvecklare för webbdesign och utveckling

64+ kraftfulla verktyg för att inspektera, mäta, fånga, analysera och designa webbsidor direkt i din webbläsare.

Alla Favoriter Inspektera Fånga Mät index.popup_tab_analyse
CSS Inspector
Animationsinspektör
Kopiera som Tailwind
Endast konturläge
Tailwind-hjälpare
Sidkontur
Komponentdetektor
Flytta element
Ta bort/dölj element
Exportera element
Kopiera komponent
Skärmdump
Extrahera bilder
SVG Grabber
Bildersättning
QR-kodsgenerator
Hur man kommer igång

Börja använda DevSuite Pro med några få klick

Det är enkelt att komma igång. Installera tillägget, öppna valfri webbsida och få tillgång till 64+ utvecklarverktyg från popupen eller den flytande dockan. Ingen konfiguration krävs.

Lägg till tillägg i Chrome

  1. Öppna Chrome Web Store och sök efter tillägget "DevSuite Pro".
  2. Klicka på "Lägg till i Chrome" och bekräfta sedan genom att klicka på "Lägg till tillägg" i popup-fönstret.

Öppna en webbsida och starta verktyget

  1. Gå till valfri webbplats och klicka sedan på DevSuite Pro-ikonen i verktygsfältet eller använd den flytande dockan på sidan.
  2. Välj valfritt verktyg från rutnätet. Verktyg som CSS Inspector, Linjaler eller Färgväljare aktiveras omedelbart på den aktuella sidan.
Tilläggsfunktioner

Huvudfunktioner i DevSuite Pro

DevSuite Pro erbjuder 64+ utvecklarverktyg för inspektion, mätning, design och analys av webbsidor. Accelerera ditt arbetsflöde med kraftfulla funktioner inbyggda direkt i din webbläsare.

CSS Inspector

Håll muspekaren över valfritt element för att se dess CSS-stilar omedelbart och redigera dem live, vilket gör det enklare att felsöka och justera design i realtid.

Läs mer →

Elementinspektör

Klicka på ett element för att inspektera dess egenskaper, dimensioner, avstånd, teckensnitt och färger. Förstå sidstrukturen omedelbart utan att öppna webbläsarens DevTools.

Läs mer →

Linjaler och guider

Mät avstånd, kontrollera inriktning och lägg till pixel-perfekta linjaler och guider på vilken webbsida som helst för att säkerställa att din design är perfekt inriktad.

Läs mer →

Färgväljare

Välj färger från valfritt element på sidan och kopiera HEX-, RGB- eller HSL-värden till ditt urklipp med ett klick.

Läs mer →

Skärmdump

Ta skärmdumpar av hela sidan eller det synliga området av en webbsida och ladda ner dem omedelbart – perfekt för att dela design och rapportera buggar.

Läs mer →

Responsiv testare

Förhandsvisa en webbsida i olika skärmstorlekar och enhetsupplösningar för att testa responsiv design utan att lämna webbläsaren.

Läs mer →
Utforska fler verktyg i detalj:
CSS Inspector GRATIS

Realtidsinspektion och redigering av CSS-stilar

CSS Inspector är ett kraftfullt utvecklarverktyg som låter dig se alla CSS-egenskaper för valfritt element genom att…

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…

Formatera, minifiera och validera JSON med ett klick

JSON-formateraren snyggar till, minifierar och validerar JSON direkt i din webbläsare.

Koda strängar till och från Base64 direkt

Base64 Encoder/Decoder konverterar text till Base64 och Base64 tillbaka till text direkt i din webbläsare.

Koda och avkoda URL-strängar med ett klick

URL Encoder/Decoder konverterar URL-strängar till och från deras procentkodade form.

Koda och avkoda HTML-entiteter direkt

HTML Entity Encoder konverterar specialtecken (< > & " ') till deras motsvarande HTML-entiteter (&lt; &gt; &amp; &quot; &#39;) och tillbaka.

Escapea och avescapea strängar för kod

Backslash Escape/Unescape konverterar strängar till och från deras escapade form (\n \t \r \" \' \\ och Unicode-escapes).

64 Bild &harr; Base64 GRATIS

Konvertera bilder till och från Base64-data-URI:er

Image ↔ Base64 konverterar bildfiler (PNG, JPG, SVG, WebP, GIF) till Base64-kodade data-URI:er och tillbaka.

JWT Debugger GRATIS

Avkoda JSON Web Tokens direkt

JWT Debugger avkodar och granskar JSON Web Tokens — den tolkar header, payload och signatur, visar claims och flaggar utgångsstatus.

Generera UUID v4-identifierare i bulk

UUID-generator skapar kryptografiskt starka UUID v4-identifierare med hjälp av webbläsarens crypto-API.

Beräkna MD5-, SHA-1-, SHA-256-, SHA-384- och SHA-512-hashar

Hash-generator beräknar kryptografiska hashar (MD5, SHA-1, SHA-256, SHA-384, SHA-512) av godtycklig textinmatning.

Generera kryptografiskt starka lösenord

Lösenordsgenerator skapar starka, slumpmässiga lösenord med hjälp av webbläsarens kryptografiska slump-API.

Regex-testare GRATIS

Testa reguljära uttryck live med matchningsmarkering

Regex-testare utvärderar reguljära uttryck mot testtext i realtid.

Konvertera Unix-, ISO- och läsbara datum

Timestamp Converter översätter mellan Unix-tidsstämplar (sekunder, millisekunder, mikrosekunder, nanosekunder), ISO…

Diff Tool GRATIS

Jämför två textblock rad för rad

Diff Tool jämför två textblock och markerar tillagda, borttagna och oförändrade rader med färgkodad output.

Kontrollera WCAG-kontrastförhållandet mellan valfria färger

Contrast Checker beräknar WCAG 2.1-kontrastförhållandet mellan två färger och betygsätter dem mot AA/AAA-trösklarna för…

Konvertera HEX, RGB, HSL, HSV och OKLCH direkt

Color Format Converter översätter valfri färg mellan HEX, RGB, HSL, HSV och OKLCH.

Extrahera den dominerande paletten från valfri bild

Image Color Extractor analyserar valfri bildfil (släpp, klistra in eller klicka för att ladda) och returnerar upp till…

Hämta CSS-selektorer och XPath för valfritt element

Med DOM Path Finder kan du hålla muspekaren över valfritt element på en sida för att avslöja dess unika CSS-selektor…

CORS Checker GRATIS

Testa cross-origin-förfrågningar och inspektera CORS-headers

CORS Checker testar om en cross-origin-förfrågan från din webbplats skulle tillåtas av målservern.

Fånga WebSocket-ramar i realtid

WebSocket Inspector fångar varje WebSocket-ram — skickad och mottagen — över alla anslutningar på sidan.

Skanna sidan efter trasiga bilder direkt

Broken Image Finder skannar varje <img> och CSS-bakgrundsbild (background-image) på sidan, upptäcker misslyckade…

Fyll i formulär automatiskt med realistisk testdata

Form Filler fyller i varje synligt formulärfält på sidan med realistisk testdata — namn, e-post, telefon, adress, lösenord med mera.

Konvertera Mellan CSV Och JSON I Båda Riktningarna

CSV ↔ JSON-konverterare hanterar hela tur-och-retur-processen mellan de två vanligaste tabellformaten.

Formatera, Validera & Visa XML Med Syntaxmarkering

XML-formaterare snyggformaterar, minifierar och validerar XML direkt i webbläsaren.

Snygga Till & Formatera SQL-frågor

SQL-formaterare omvandlar minifierad eller rörig SQL till läsbara, indragna frågor.

Spara Webbsidor Som Rena PDF-filer

Konvertera till PDF sparar den aktuella webbsidan som en PDF via webbläsarens utskriftsdialog, med utskriftsvänliga…

Priser och planer

Enkel och transparent prissättning

Välj den bästa planen för ditt arbetsflöde. Börja gratis, uppgradera när som helst.

Bas

Perfekt för att prova DevSuite Pro. Inget kreditkort krävs.

0 kr

Gratis för alltid
Börja gratis
  • 43 gratis utvecklarverktyg
  • CSS Inspector och Färgväljare
  • Skärmdumpsfångst
  • Flytande dockningsgränssnitt
  • Alla framtida gratisuppdateringar

Månadsvis Mest populär

Full tillgång till alla 64+ professionella verktyg. Faktureras månadsvis.

29 kr

per månad
Starta månadsplan
  • Alla 64+ utvecklarverktyg
  • Full tillgång till Pro-verktyg
  • Upp till 3 enheter
  • Prioriterad support
  • Avbryt när som helst

Engångsavgift Bästa värde

Betala en gång, använd för alltid. Full tillgång till alla 64+ pro-verktyg utan återkommande kostnader.

299 kr

engångsbetalning
Köp en gång, använd för alltid
  • Alla 64+ utvecklarverktyg
  • Full tillgång till Pro-verktyg
  • Upp till 3 enheter
  • Prioriterad support
  • Inga återkommande kostnader
DevSuite Pro FAQ section background
Vanliga frågor

Vanliga frågor från DevSuite Pro-användare

Vanliga frågor om funktioner och användning av tillägget DevSuite Pro. Om du har en fråga kan svaret redan finnas nedan.

Hur installerar jag DevSuite Pro?

Besök Chrome Web Store, sök efter "DevSuite Pro", klicka på "Lägg till i Chrome" och bekräfta genom att välja "Lägg till tillägg". Efter installationen visas tilläggsikonen i webbläsarens verktygsfält. Klicka på den för att få tillgång till 64+ utvecklarverktyg omedelbart.

Vad är skillnaden mellan gratis- och Pro-verktyg?

Gratisverktyg (43+) är tillgängliga för alla utan licens. Pro-verktyg har ett guldfärgat PRO-märke och kräver en aktiv Pro-licens för att användas. Du kan se vilka verktyg som är gratis eller pro i popupen – gratisverktyg har ingen låsikon, medan pro-verktyg ser något nedtonade ut tills du aktiverar din licens.

Varför fungerar inte verktyget på vissa webbplatser?

Vissa webbplatser har strikta Content Security Policies (CSP) som blockerar vissa åtgärder från webbläsartillägg. Detta är särskilt vanligt på bank- och myndighetssajter. Dessutom tillåter inte Chromes interna sidor (chrome://) att tillägg kör innehållsskript.

Är mina ändringar på sidan permanenta?

Nej. Alla ändringar som görs av verktyg som Flytta element, Live textredigerare, Ta bort/dölj element och CSS Inspector är tillfälliga. De påverkar bara det du ser i din webbläsare just nu. Om du laddar om sidan återställs allt till sitt ursprungliga tillstånd.

Hur aktiverar jag min Pro-licens?

Öppna DevSuite Pro-popupen, klicka på inställningsikonen i det övre högra hörnet. Bläddra ner till avsnittet Licens, klistra in din licensnyckel i inmatningsfältet och klicka på Aktivera. Om nyckeln är giltig ändras märket från FREE till PRO och alla pro-verktyg låses upp omedelbart.

Hur kan jag flytta eller dölja den flytande dockan?

Du kan flytta dockan genom att gå till inställningarna och välja en annan sidofältsposition – Topp, Botten, Vänster eller Höger. Du kan också dölja dockan helt genom att stänga av "Visa docka på sidor" i inställningarna eller trycka på Ctrl+Shift+X när som helst.

Samlar DevSuite Pro in webbinformation?

Nej. DevSuite Pro samlar inte in, spårar eller överför någon av dina webbläsardata. Alla inställningar lagras lokalt i din webbläsare. Den enda externa begäran görs under aktivering av licensnyckel för att verifiera din nyckel mot vår server.

Kan jag använda DevSuite Pro på Firefox?

Ja! DevSuite Pro finns tillgängligt i både Chrome Web Store och Firefox Add-ons. Det fungerar på Chrome, Edge, Brave och andra Chromium-baserade webbläsare, samt Firefox.