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
Debug en beheer CSS-animaties in realtime
Converteer CSS naar Tailwind-klassen
Visualiseer de volledige paginastructuur
Krijg gecategoriseerde Tailwind-klassen voor elk element
Visuele HTML-boomweergave als overlay op elke webpagina
Detecteer React, Vue, Angular en Svelte-componenten op elke site
Sleep en zet neer om elk element op een pagina opnieuw in te stellen
Zichtbaarheid van elk element verwijderen of omschakelen
Elk element exporteren als HTML, CSS of JSON
Genereer React, Vue en Svelte-componenten van elk element
Capture screenshots van het zichtbare gedeelte of volledige pagina
Bekijk, selecteer en download alle afbeeldingen van elke webpagina
Zoek, bekijk en download elke SVG op elke pagina
Swap elke afbeelding op een pagina met je eigen
Genereer QR-codes voor elke URL of tekst direct
Perfecte pixellinalen, hulplijnen en metingen op elke pagina
Bekijk meerdere apparaatviewports tegelijk
Meet exacte pixelafstanden tussen twee elementen
Visualiseer elke gestapelde context en Z-Index laag
Inspecteer CSS Grid- en Flexbox-indelingen met visuele overlays
Simuleer aandachtsheetspots van gebruikers op elke pagina
Selectief cache, cookies, localStorage en sessionStorage wissen
Detecteer alle technologie achter elke website
Uitgebreide SEO-audit: metatags, koppen, OpenGraph en meer
Geautomatiseerde WCAG-audit: contrast, alttekst, ARIA en meer
Klik op elke tekst op elke pagina om deze onmiddellijk te bewerken
Verwissel elke lettertype wereldwijd of per-element uit Google Fonts
Ontdek elke lettertype die op elke webpagina wordt gebruikt
Precisiepipet voor HEX-, RGB- en HSL-kleurwaarden
Extraheer het volledige kleurenpalet van elke webpagina
Pas onmiddellijk donkere modus toe op elke website
JavaScript Direct In- of Uitschakelen Per Tabblad
Bekijk, Bewerk, Voeg Toe & Verwijder Cookies voor Elk Domein
Bekijk Console-uitvoer in een Zwevend Paneel — Zonder DevTools
Controleer Alle Netwerkaanvragen in Real-Time
Bekijk, Bewerk, Voeg Toe & Verwijder localStorage en sessionStorage
Scan Elke Koppeling op een Pagina en Vind Verbroken
Instant Prestatiedashboard: Laadtijd, DOM-statistieken & Bronnen
Format, Mininificeer & Valideer JSON in Één Klik
Codeer Tekenreeksen naar & van Base64 Onmiddellijk
Codeer & Decodeer URL-tekenreeksen in Één Klik
Codeer & Decodeer HTML-entiteiten Onmiddellijk
Escape & Unescape Tekenreeksen voor Code
Zet Afbeeldingen Om naar & van Base64 Data-URI's
Decodeer JSON Web Tokens Onmiddellijk
Genereer Bulk UUID v4-identifiers
Bereken MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes
Genereer Cryptografisch Sterke Wachtwoorden
Test Reguliere Expressies Live Met Match-markering
Convert Unix, ISO, and Human-Readable Dates
Vergelijk twee tekstblokken regel voor regel
Controleer WCAG contrastverhouding van twee kleuren
Converteer HEX, RGB, HSL, HSV & OKLCH onmiddellijk
Extraheer het dominante palet van elke afbeelding
Krijg CSS-selectors & XPath voor elk element
Test cross-origin-aanvragen en controleer CORS-headers
Vang WebSocket-frames in realtime
Scan de pagina onmiddellijk op verbroken afbeeldingen
Auto-Fill formulieren met realistische testgegevens
Converteer tussen CSV en JSON in beide richtingen
Format, valideer en bekijk XML met syntaxismarkering
Verzier en formatteer SQL-query's
Sla webpagina's op als schone PDF's
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 (20+) 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.