Den ultimate Utviklerverktøykasse for webdesign og utvikling

64+ kraftige verktøy for å inspisere, måle, fange, analysere og designe nettsider direkte i nettleseren din.

Alle Favoritter Inspiser Fang Mål index.popup_tab_analyse
CSS Inspector
Animasjonsinspektør
Kopier som Tailwind
Kun omriss-modus
Tailwind-hjelper
Sideomriss
Komponentdetektor
Flytt element
Slett/skjul element
Eksporter element
Kopier komponent
Skjermbilde
Trekk ut bilder
SVG Grabber
Bildeerstatning
QR-kodegenerator
Slik kommer du i gang

Begynn å bruke DevSuite Pro med noen få klikk

Det er enkelt å komme i gang. Installer utvidelsen, åpne en nettside, og få tilgang til 64+ utviklerverktøy fra popup-vinduet eller det flytende dokken. Ingen konfigurasjon nødvendig.

Legg til utvidelsen i Chrome

  1. Åpne Chrome Web Store og søk etter utvidelsen "DevSuite Pro".
  2. Klikk på "Legg til i Chrome" og bekreft deretter ved å klikke på "Legg til utvidelse" i popup-vinduet.

Åpne en nettside og start verktøyet

  1. Gå til et hvilket som helst nettsted, og klikk deretter på DevSuite Pro-ikonet i verktøylinjen eller bruk den flytende dokken på siden.
  2. Velg et verktøy fra rutenettet. Verktøy som CSS Inspector, Linjaler eller Fargevelger aktiveres umiddelbart på den gjeldende siden.
Utvidelsesfunksjoner

Hovedfunksjoner i DevSuite Pro

DevSuite Pro tilbyr 64+ utviklerverktøy for inspeksjon, måling, design og analyse av nettsider. Akselerer arbeidsflyten din med kraftige funksjoner bygget rett inn i nettleseren din.

CSS Inspector

Hold musepekeren over et element for å se CSS-stilene umiddelbart og rediger dem live, noe som gjør det enklere å feilsøke og justere design i sanntid.

Lær mer →

Elementinspektør

Klikk på et element for å inspisere dets egenskaper, dimensjoner, avstander, fonter og farger. Forstå sidestrukturen umiddelbart uten å åpne nettleserens DevTools.

Lær mer →

Linjaler og guider

Mål avstander, sjekk justering og legg til piksel-perfekte linjaler og guider på hvilken som helst nettside for å sikre at designene dine er perfekt justert.

Lær mer →

Fargevelger

Velg farger fra et hvilket som helst element på siden og kopier HEX-, RGB- eller HSL-verdier til utklippstavlen med ett klikk.

Lær mer →

Skjermbilde

Ta skjermbilder av hele siden eller det synlige området av en nettside og last dem ned umiddelbart – perfekt for å dele design og rapportere feil.

Lær mer →

Responstester

Forhåndsvis en nettside i forskjellige skjermstørrelser og enhetsoppløsninger for å teste responsivt design uten å forlate nettleseren.

Lær mer →
Utforsk flere verktøy i detalj:
CSS Inspector GRATIS

Sanntids inspeksjon og redigering av CSS-stiler

CSS Inspector er et kraftig utviklerverktøy som lar deg se alle CSS-egenskapene til ethvert element bare ved å holde musepekeren over det.

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…

Formater, komprimer og valider JSON med ett klikk

JSON Formatter formaterer, komprimerer og validerer JSON direkte i nettleseren.

Kod strenger til og fra Base64 umiddelbart

Base64 Encoder/Decoder konverterer tekst til Base64 og Base64 tilbake til tekst direkte i nettleseren.

Kod og dekod URL-strenger med ett klikk

URL Encoder/Decoder konverterer URL-strenger til og fra prosent-kodet form.

Kod og dekod HTML-entiteter umiddelbart

HTML Entity Encoder konverterer spesialtegn (< > & " ') til sine HTML-entitetsekvivalenter (&lt; &gt; &amp; &quot; &#39;) og tilbake.

Escape og unescape strenger for kode

Backslash Escape/Unescape konverterer strenger til og fra sin escapede form (\n \t \r \" \' \\ og Unicode-escapes).

Konverter bilder til og fra Base64 data-URI-er

Bilde ↔ Base64 konverterer bildefiler (PNG, JPG, SVG, WebP, GIF) til Base64-kodede data-URI-er og tilbake.

JWT Debugger GRATIS

Dekod JSON Web Tokens umiddelbart

JWT Debugger dekoder og inspiserer JSON Web Tokens — parser header, payload og signatur, viser claims og flagger utløpsstatus.

Generer UUID v4-identifikatorer i bulk

UUID-generator produserer kryptografisk sterke UUID v4-identifikatorer ved hjelp av nettleserens crypto-API.

Beregn MD5-, SHA-1-, SHA-256-, SHA-384-, SHA-512-hasher

Hash-generator beregner kryptografiske hasher (MD5, SHA-1, SHA-256, SHA-384, SHA-512) av vilkårlig tekstinput.

Generer kryptografisk sterke passord

Passordgenerator produserer sterke, tilfeldige passord ved hjelp av nettleserens kryptografiske tilfeldighets-API.

Regex-tester GRATIS

Test regulære uttrykk live med treffmarkering

Regex Tester evaluerer regulære uttrykk mot testtekst i sanntid.

Konverter Unix-, ISO- og menneskelesbare datoer

Timestamp Converter oversetter mellom Unix-tidsstempler (sekunder, millisekunder, mikrosekunder, nanosekunder), ISO…

Diff-verktøy GRATIS

Sammenlign to tekstblokker linje for linje

Diff Tool sammenligner to tekstblokker og markerer lagt til, fjernet og uendrede linjer med fargekodet output.

Sjekk WCAG-kontrastforhold mellom to farger

Contrast Checker beregner WCAG 2.1-kontrastforholdet mellom to farger og karaktersetter dem mot AA/AAA-terskler for…

Konverter HEX, RGB, HSL, HSV og OKLCH umiddelbart

Color Format Converter oversetter enhver farge mellom HEX, RGB, HSL, HSV og OKLCH.

Hent Ut Den Dominerende Paletten Fra Ethvert Bilde

Image Color Extractor analyserer en hvilken som helst bildefil (dra, lim inn eller klikk for å laste inn) og returnerer…

Få CSS-velgere og XPath for ethvert element

DOM Path Finder lar deg holde musepekeren over et hvilket som helst element på siden for å avdekke dets unike…

CORS Checker GRATIS

Test cross-origin-forespørsler og inspiser CORS-headere

CORS Checker tester om en cross-origin-forespørsel fra siden din ville blitt tillatt av målserveren.

Fang WebSocket-rammer i sanntid

WebSocket Inspector fanger opp hver WebSocket-ramme — sendt og mottatt — på tvers av alle tilkoblinger på siden.

Skann siden for ødelagte bilder på et øyeblikk

Broken Image Finder skanner hvert <img>-element og hver CSS background-image på siden, oppdager mislykkede innlastinger…

Fyll ut skjemaer automatisk med realistiske testdata

Form Filler fyller ut alle synlige skjemafelt på siden med realistiske testdata — navn, e-post, telefon, adresse, passord osv.

Konverter mellom CSV og JSON begge veier

CSV ↔ JSON-konverterer håndterer hele rundturen mellom de to vanligste tabellformatene.

XML Formatter GRATIS

Formater, valider og vis XML med syntaksutheving

XML Formatter formaterer pent, minifiserer og validerer XML direkte i nettleseren.

SQL Formatter GRATIS

Gjør SQL-spørringer pene og oversiktlige

SQL Formatter omdanner minifisert eller rotete SQL til lesbare, innrykkede spørringer.

Lagre nettsider som rene PDF-er

Konverter til PDF lagrer den gjeldende nettsiden som en PDF via nettleserens utskriftsdialog, med utskriftsvennlige…

Priser og planer

Enkel og gjennomsiktig prissetting

Velg den beste planen for din arbeidsflyt. Start gratis, oppgrader når som helst.

Grunnleggende

Perfekt for å prøve ut DevSuite Pro. Ingen kredittkort kreves.

$0

Gratis for alltid
Start gratis
  • 43 gratis utviklerverktøy
  • CSS Inspector og fargevelger
  • Skjermbildefangst
  • Flytende dokk-grensesnitt
  • Alle fremtidige gratisoppdateringer

Månedlig Mest populær

Full tilgang til alle 64+ profesjonelle verktøy. Faktureres månedlig.

$2.99

per måned
Start månedlig plan
  • Alle 64+ utviklerverktøy
  • Full tilgang til Pro-verktøy
  • Opptil 3 enheter
  • Prioritert støtte
  • Kanseller når som helst

Engangsbeløp Best verdi

Betal én gang, bruk for alltid. Full tilgang til alle 64+ pro-verktøy uten gjentakende kostnader.

$29.99

engangsbetaling
Kjøp én gang, bruk for alltid
  • Alle 64+ utviklerverktøy
  • Full tilgang til Pro-verktøy
  • Opptil 3 enheter
  • Prioritert støtte
  • Ingen gjentakende kostnader
DevSuite Pro FAQ section background
Ofte stilte spørsmål

Ofte stilte spørsmål fra DevSuite Pro-brukere

Vanlige spørsmål om funksjonene og bruken av DevSuite Pro-utvidelsen. Hvis du har et spørsmål, kan svaret allerede være her under.

Hvordan installerer jeg DevSuite Pro?

Besøk Chrome Web Store, søk etter "DevSuite Pro", klikk på "Legg til i Chrome" og bekreft ved å velge "Legg til utvidelse". Etter installasjon vil utvidelsesikonet vises i verktøylinjen i nettleseren din. Klikk på det for å få tilgang til 64+ utviklerverktøy umiddelbart.

Hva er forskjellen mellom gratis- og Pro-verktøy?

Gratisverktøy (43+) er tilgjengelige for alle uten lisens. Pro-verktøy har et gullfarget PRO-merke og krever en aktiv Pro-lisens for å brukes. Du kan se hvilke verktøy som er gratis eller pro fra popup-vinduet – gratisverktøy har ikke et låseikon, mens pro-verktøy ser litt nedtonet ut til du aktiverer lisensen din.

Hvorfor fungerer ikke verktøyet på enkelte nettsteder?

Noen nettsteder har strenge Content Security Policies (CSP) som blokkerer visse handlinger fra nettleserutvidelser. Dette er spesielt vanlig på nettbanker og offentlige nettsteder. I tillegg tillater ikke Chromes interne sider (chrome://) at utvidelser kjører innholdsskript.

Er endringene mine på siden permanente?

Nei. Alle endringer gjort av verktøy som Flytt element, Live tekstredigerer, Slett/skjul element og CSS Inspector er midlertidige. De påvirker bare det du ser i nettleseren din akkurat nå. Ved å laste inn siden på nytt vil alt gå tilbake til sin opprinnelige tilstand.

Hvordan aktiverer jeg min Pro-lisens?

Åpne DevSuite Pro-popup-vinduet, klikk på Innstillinger-ikonet øverst i høyre hjørne. Rull ned til Lisens-delen, lim inn lisensnøkkelen din i inndatafeltet og klikk på Aktiver. Hvis nøkkelen er gyldig, vil merket endres fra FREE til PRO, og alle pro-verktøy vil bli låst opp umiddelbart.

Hvordan flytter eller skjuler jeg den flytende dokken?

Du kan flytte dokken ved å gå til Innstillinger og velge en annen sidefeltposisjon – Topp, Bunn, Venstre eller Høyre. Du kan også skjule dokken helt ved å slå av "Vis dokk på sider" i Innstillinger eller trykke på Ctrl+Shift+X når som helst.

Samler DevSuite Pro inn nettleserdata?

Nei. DevSuite Pro samler ikke inn, sporer eller overfører noen av dine nettleserdata. Alle innstillinger lagres lokalt i nettleseren din. Den eneste eksterne forespørselen gjøres under aktivering av lisensnøkkel for å verifisere nøkkelen din mot serveren vår.

Kan jeg bruke DevSuite Pro på Firefox?

Ja! DevSuite Pro er tilgjengelig i både Chrome Web Store og Firefox Add-ons. Det fungerer på Chrome, Edge, Brave og andre Chromium-baserte nettlesere, samt Firefox.