Voeg extensie toe aan Chrome
- Open de Chrome Web Store en zoek de extensie "DevSuite Pro".
- Klik op "Toevoegen aan Chrome" en bevestig door op "Extensie toevoegen" te klikken in het pop-upvenster.
64+ krachtige tools om webpagina's te inspecteren, meten, vastleggen, analyseren en ontwerpen, direct in uw browser.
Aan de slag gaan is eenvoudig. Installeer de extensie, open een webpagina en krijg toegang tot 64+ ontwikkelaarstools vanuit de pop-up of het zwevende dock. Geen configuratie nodig.
DevSuite Pro biedt 64+ ontwikkelaarstools voor inspectie, meting, ontwerp en analyse van webpagina's. Versnel uw workflow met krachtige functies die direct in uw browser zijn ingebouwd.
Beweeg over een element om direct de CSS-stijlen te zien en live te bewerken, waardoor het gemakkelijker wordt om ontwerpen in real-time te debuggen en aan te passen.
Meer informatie →Klik op een element om de eigenschappen, afmetingen, afstanden, lettertypen en kleuren te inspecteren. Begrijp de paginastructuur onmiddellijk zonder de DevTools van de browser te openen.
Meer informatie →Meet afstanden, controleer uitlijning en voeg pixel-precieze linialen en hulplijnen toe aan elke webpagina om ervoor te zorgen dat uw ontwerpen perfect zijn uitgelijnd.
Meer informatie →Kies kleuren van elk element op de pagina en kopieer HEX-, RGB- of HSL-waarden naar uw klembord met één klik.
Meer informatie →Maak schermafdrukken van de hele pagina of het zichtbare gebied van een webpagina en download ze direct — perfect voor het delen van ontwerpen en het melden van bugs.
Meer informatie →Bekijk een voorbeeld van een webpagina op verschillende schermformaten en apparaatresoluties om responsief ontwerp te testen zonder uw browser te verlaten.
Meer informatie →Inspecteer en bewerk CSS-stijlen in realtime
De CSS Inspecteur is een krachtig, gratis ontwikkelaarstool waarmee u over elk element op een webpagina kunt bewegen om…
Debug en beheer CSS-animaties in realtime
De Animatie-inspecteur geeft u volledige controle over elke CSS-animatie en overgang.
Converteer CSS naar Tailwind-klassen
Klik op elk element en krijg direct de equivalente Tailwind CSS-hulpklassen.
Visualiseer de volledige paginastructuur
Voegt kleurgecodeerde omtrekranden toe aan elk HTML-element voor een röntgenweergave van de structuur.
Krijg gecategoriseerde Tailwind-klassen voor elk element
Inspecteert elk element en genereert een gecategoriseerde uitsplitsing van Tailwind-klassen.
Visuele HTML-boomweergave als overlay op elke webpagina
Page Outliner geeft de volledige DOM-structuur van elke webpagina weer als visuele boomoverlay — rechtstreeks op de pagina zelf.
Detecteer React, Vue, Angular en Svelte-componenten op elke site
Component Detector identificeert automatisch welk frontend-framework een website gebruikt en geeft de volledige componentenboom weer.
Sleep en zet neer om elk element op een pagina opnieuw in te stellen
Move Element laat je elk element op een webpagina klikken en fysiek naar een nieuwe positie slepen.
Zichtbaarheid van elk element verwijderen of omschakelen
Delete/Hide Element laat je elk element op een webpagina met één klik verwijderen of tijdelijk verbergen.
Elk element exporteren als HTML, CSS of JSON
Export Element laat je elk element op een webpagina klikken en de volledige structuur in drie formaten exporteren…
Genereer React, Vue en Svelte-componenten van elk element
Copy Component Code transformeert elk element op een webpagina in een schoon, productieklaar componentbestand voor je gekozen framework.
Capture screenshots van het zichtbare gedeelte of volledige pagina
Screenshot legt afbeeldingen van hoge kwaliteit van elke webpagina vast in twee modi: zichtbare gebied (precies wat je…
Bekijk, selecteer en download alle afbeeldingen van elke webpagina
Extract Images scant elke webpagina en presenteert elke afbeelding in een gallery.
Zoek, bekijk en download elke SVG op elke pagina
SVG Grabber ontdekt elke SVG op een webpagina — inline SVG-elementen, externe .svg-bestandsverwijzingen, SVG-sprites…
Swap elke afbeelding op een pagina met je eigen
Image Replacer laat je elke afbeelding op een webpagina klikken en vervangen door je eigen — door een lokaal bestand te…
Genereer QR-codes voor elke URL of tekst direct
QR Code Generator maakt automatisch een scanbare QR-code aan voor de huidige pagina-URL — of voor elke aangepaste URL…
Perfecte pixellinalen, hulplijnen en metingen op elke pagina
Page Ruler voegt hulplijnen en sleebare hulplijnen toe aan webpagina's in Photoshop-stijl.
Bekijk meerdere apparaatviewports tegelijk
Responsive Viewer toont de huidige webpagina weergegeven in meerdere apparaatviewport-groottes naast elkaar — allemaal op één scherm.
Meet exacte pixelafstanden tussen twee elementen
Measure Distance laat u op twee elementen op een webpagina klikken en onmiddellijk de exacte pixelafstand daartussen…
Visualiseer elke gestapelde context en Z-Index laag
Z-Index Inspector onthult de complete stapelvolgorde van elk element op een webpagina.
Inspecteer CSS Grid- en Flexbox-indelingen met visuele overlays
Grid/Flex Visualizer detecteert alle CSS Grid- en Flexbox-containers op een webpagina en geeft hun indelingsstructuur…
Simuleer aandachtsheetspots van gebruikers op elke pagina
Heatmap Simulator genereert een voorspelde aandachtsheatmap voor elke webpagina op basis van gevestigde…
Selectief cache, cookies, localStorage en sessionStorage wissen
Clear Browsing Data biedt ontwikkelaars een snelle, selectieve manier om specifieke typen browsegegevens voor de…
Detecteer alle technologie achter elke website
Site Stack scant elke website en identificeert de complete technologiestapel — frontend-frameworks (React, Vue…
Uitgebreide SEO-audit: metatags, koppen, OpenGraph en meer
SEO Inspector biedt een onmiddellijke, uitgebreide SEO-audit van elke webpagina.
Geautomatiseerde WCAG-audit: contrast, alttekst, ARIA en meer
Accessibility Inspector voert geautomatiseerde WCAG 2.1 Level AA-controles uit op elke webpagina en produceert een…
Klik op elke tekst op elke pagina om deze onmiddellijk te bewerken
Live Text Editor maakt elk tekstelement op een webpagina bewerkbaar met één klik.
Verwissel elke lettertype wereldwijd of per-element uit Google Fonts
Fonts Changer laat u elke lettertype op een webpagina vervangen door een ander uit de Google Fonts-bibliotheek — ofwel…
Ontdek elke lettertype die op elke webpagina wordt gebruikt
List All Fonts scant elke webpagina en presenteert een volledige inventaris van elke gebruikte lettertypefamilie…
Precisiepipet voor HEX-, RGB- en HSL-kleurwaarden
Color Picker biedt een pixel-precieze pipetgereedschap voor het selecteren van kleuren uit een willekeurig element op…
Extraheer het volledige kleurenpalet van elke webpagina
Color Palette scant elk element op een webpagina en extraheert de volledige set gebruikte kleuren — van tekst en…
Pas onmiddellijk donkere modus toe op elke website
Force Dark Mode past een donkere kleurenschema toe op elke website die er geen aanbiedt — of overschrijdt het lichte thema van een site.
JavaScript Direct In- of Uitschakelen Per Tabblad
Toggle JavaScript schakelt JavaScript-uitvoering voor het huidige browsertabblad met één klik in of uit.
Bekijk, Bewerk, Voeg Toe & Verwijder Cookies voor Elk Domein
Cookie Editor geeft alle cookies voor het huidige domein weer in een schone, sorteerbare tabel.
Bekijk Console-uitvoer in een Zwevend Paneel — Zonder DevTools
Console Logger legt alle console-uitvoer vast (console.log, console.warn, console.error, console.info) en geeft deze…
Controleer Alle Netwerkaanvragen in Real-Time
Network Monitor legt alle netwerkaanvragen van de huidige pagina vast en geeft deze weer — XHR/Fetch API-aanroepen…
Bekijk, Bewerk, Voeg Toe & Verwijder localStorage en sessionStorage
Local Storage Editor biedt een schone tabelinterface voor het beheren van localStorage- en sessionStorage-items voor de huidige site.
Scan Elke Koppeling op een Pagina en Vind Verbroken
Broken Link Checker scant elke koppeling op de hudigde pagina — anchor hrefs, afbeeldingsbronnen, scriptbronnen, en…
Instant Prestatiedashboard: Laadtijd, DOM-statistieken & Bronnen
Page Performance biedt een instant prestatie-overzicht van elke webpagina — laadtimingmetrieken (FCP, DOMContentLoaded…
Format, Mininificeer & Valideer JSON in Één Klik
JSON Formatter maakt mooie afdrukken, mininificeert, en valideert JSON rechtstreeks in uw browser.
Codeer Tekenreeksen naar & van Base64 Onmiddellijk
Base64 Encoder/Decoder zet tekst om naar Base64 en Base64 terug naar tekst rechtstreeks in uw browser.
Codeer & Decodeer URL-tekenreeksen in Één Klik
URL Encoder/Decoder zet URL-tekenreeksen om naar en van hun procent-gecodeerde vorm.
Codeer & Decodeer HTML-entiteiten Onmiddellijk
HTML Entity Encoder zet speciale tekens (< > & " ') om naar hun HTML entity-equivalenten (< > & " ') en terug.
Escape & Unescape Tekenreeksen voor Code
Backslash Escape/Unescape zet tekenreeksen om naar en van hun geëscapede vorm (\n \t \r \" \' \\ en Unicode escapes).
Zet Afbeeldingen Om naar & van Base64 Data-URI's
Image ↔ Base64 zet afbeeldingsbestanden (PNG, JPG, SVG, WebP, GIF) om naar Base64-gecodeerde data-URI's en terug.
Decodeer JSON Web Tokens Onmiddellijk
JWT Debugger decodeert en inspecteert JSON Web Tokens — parseert header, payload, en handtekening, geeft claims weer…
Genereer Bulk UUID v4-identifiers
UUID Generator produceert cryptografisch sterke UUID v4-identifiers met behulp van de crypto API van de browser.
Bereken MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes
Hash Generator berekent cryptografische hashes (MD5, SHA-1, SHA-256, SHA-384, SHA-512) van elke tekstinvoer.
Genereer Cryptografisch Sterke Wachtwoorden
Password Generator produceert sterke, willekeurige wachtwoorden met behulp van de cryptografische willekeurige API van de browser.
Test Reguliere Expressies Live Met Match-markering
Regex Tester evalueert reguliere expressies tegen testtekst in real-time.
Converteer Unix-, ISO- en leesbare datums
De Timestamp Converter vertaalt tussen Unix-timestamps (seconden, milliseconden, microseconden, nanoseconden), ISO…
Vergelijk twee tekstblokken regel voor regel
Diff Tool vergelijkt twee tekstblokken en markeert toegevoegde, verwijderde en ongewijzigde regels met kleurgecodeerde uitvoer.
Controleer WCAG contrastverhouding van twee kleuren
Contrast Checker berekent de WCAG 2.1 contrastverhouding tussen twee kleuren en beoordeelt deze op basis van…
Converteer HEX, RGB, HSL, HSV & OKLCH onmiddellijk
Color Format Converter vertaalt elke kleur tussen HEX, RGB, HSL, HSV en OKLCH.
Extraheer het dominante palet van elke afbeelding
Image Color Extractor analyseert elk afbeeldingsbestand (slepen, plakken of klikken om te laden) en retourneert tot 16…
Krijg CSS-selectors & XPath voor elk element
DOM Path Finder laat u elk element op een pagina aanwijzen om de unieke CSS-selector, korte selector, XPath en…
Test cross-origin-aanvragen en controleer CORS-headers
CORS Checker test of een cross-origin-aanvraag van uw site door de doelserver zou worden toegestaan.
Vang WebSocket-frames in realtime
WebSocket Inspector legt elk WebSocket-frame — verzonden en ontvangen — vast op alle verbindingen op de pagina.
Scan de pagina onmiddellijk op verbroken afbeeldingen
Broken Image Finder scant elke <img> en CSS background-image op de pagina, detecteert verbroken belastingen (404's…
Auto-Fill formulieren met realistische testgegevens
Form Filler vult elk zichtbaar formulierveld op de pagina in met realistische testgegevens — naam, e-mail…
Converteer tussen CSV en JSON in beide richtingen
CSV ↔ JSON Converter verwerkt de volledige round-trip tussen de twee meest voorkomende tabelformat.
Format, valideer en bekijk XML met syntaxismarkering
XML Formatter formatteert, minificeert en valideert XML in-browser.
Verzier en formatteer SQL-query's
SQL Formatter transformeert geminificeerde of rommelige SQL in leesbare, ingesprongen query's.
Sla webpagina's op als schone PDF's
Convert to PDF slaat de huidge webpagina op als PDF via het afdrukdialoogvenster van de browser, met afdrukbaar…
Kies het beste plan voor uw workflow. Begin gratis, upgrade op elk moment.
Veelvoorkomende vragen over de functies en het gebruik van de DevSuite Pro-extensie. Als u een vraag heeft, staat het antwoord hieronder misschien al.
Bezoek de Chrome Web Store, zoek naar "DevSuite Pro", klik op "Toevoegen aan Chrome" en bevestig door "Extensie toevoegen" te kiezen. Na installatie verschijnt het extensie-icoon in de werkbalk van uw browser. Klik erop om direct toegang te krijgen tot 64+ ontwikkelaarstools.
Gratis tools (43+) zijn voor iedereen beschikbaar zonder licentie. Pro tools hebben een gouden PRO-badge en vereisen een actieve Pro-licentie om te gebruiken. U kunt in de pop-up zien welke tools gratis of pro zijn — gratis tools hebben geen sloticoon, terwijl pro tools er enigszins gedimd uitzien totdat u uw licentie activeert.
Sommige websites hebben een streng Content Security Policy (CSP) dat bepaalde acties van browserextensies blokkeert. Dit komt vooral voor op bank- en overheidswebsites. Daarnaast staan interne Chrome-pagina's (chrome://) niet toe dat extensies inhoudsscript uitvoeren.
Nee. Alle wijzigingen die door tools als Element Verplaatsen, Live Tekst Editor, Element Verwijderen/Verbergen en de CSS Inspector worden aangebracht, zijn tijdelijk. Ze hebben alleen invloed op wat u op dit moment in uw browser ziet. Het herladen van de pagina herstelt alles naar de oorspronkelijke staat.
Open de DevSuite Pro pop-up, klik op het Instellingen-icoon in de rechterbovenhoek. Scrol omlaag naar het gedeelte Licentie, plak uw licentiesleutel in het invoerveld en klik op Activeren. Als de sleutel geldig is, verandert de badge van FREE naar PRO en worden alle pro tools direct ontgrendeld.
U kunt het dock verplaatsen door naar Instellingen te gaan en een andere zijbalkpositie te kiezen — Boven, Onder, Links of Rechts. U kunt het dock ook volledig verbergen door de schakelaar "Dock op pagina's weergeven" in de Instellingen uit te vinken of door op elk gewenst moment Ctrl+Shift+X in te drukken.
Nee. DevSuite Pro verzamelt, volgt of verzendt geen van uw browsegegevens. Alle instellingen worden lokaal in uw browser opgeslagen. De enige externe aanvraag wordt gedaan tijdens de activering van de licentiesleutel om uw sleutel te verifiëren bij onze server.
Ja! DevSuite Pro is beschikbaar in zowel de Chrome Web Store als de Firefox Add-ons. Het werkt op Chrome, Edge, Brave en andere op Chromium gebaseerde browsers, evenals op Firefox.