Lägg till tillägg i Chrome
- Öppna Chrome Web Store och sök efter tillägget "DevSuite Pro".
- Klicka på "Lägg till i Chrome" och bekräfta sedan genom att klicka på "Lägg till tillägg" i popup-fönstret.
64+ kraftfulla verktyg för att inspektera, mäta, fånga, analysera och designa webbsidor direkt i din webbläsare.
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.
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.
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 →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 →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 →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 →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 →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 →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…
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…
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 (< > & " ') 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).
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.
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.
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…
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…
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…
Välj den bästa planen för ditt arbetsflöde. Börja gratis, uppgradera när som helst.
Vanliga frågor om funktioner och användning av tillägget DevSuite Pro. Om du har en fråga kan svaret redan finnas nedan.
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.
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.
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.
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.
Ö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.
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.
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.
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.