Jaren geleden had mijn & quot; dev tools" bladwijzermap een twintigtal vermeldingen, elk een andere single-purpose website, elk met een eigen advertentie-indeling, een eigen cookiebanner, en - dit is het deel dat me eindelijk stoorde - een eigen server waar mijn gegevens stilletjes naar geüpload werden Ik plakte een enscenering API token in een van hen om het te decoderen, en halverwege dacht ik: Ik heb geen idee wat deze site met die string doet Dat was de dag dat ik stopte met het vertrouwen van willekeurige tool sites en begon met bouwen Toolz.dev, waarbij elke tool in uw browser wordt uitgevoerd en niets dat u plakt, verlaat het tabblad.
Dit is de toolkit die daaruit voortkwam Geen & quot; top 600 tools" listicle - Toolz.dev heeft momenteel iets meer dan vijftig tools, en ik laat je liever zien degene die een werkende webontwikkelaar elke week opent dan de telling te vullen. Ze zijn hier gegroepeerd op basis van de taak die u doet: gegevens vormgeven, tekst wranglen, CSS schrijven, afbeeldingen voorbereiden, SEO verzenden en de security-en-codering-klusjes daartussenin Alles is gratis, heeft geen account nodig en verwerkt lokaal.
tl;dr: Houd één browsertabgroep open terwijl u bouwt. Voor gegevens: JSON-formatter, JSON-differentiatie, YAML-validator, CSV-kijker. Voor het debuggen van tokens: JWT-decoder, Base64-converter, tijdstempel converter. Voor regex: regex-tester. Voor CSS: Gradiëntgenerator, kleurenkiezer, CSS-minifier. Voor afbeeldingen: afwijking van de grootte hebben, samenpersen, Formaat converter. Voor SEO: Meta-tag-generator, Grafiekvoorbeeld openen. Alle client-side, allemaal gratis.
Waarom zou u zich druk maken over browsertools als u een terminal heeft?
Eerlijke vraag - Ik woon ook in een terminal Het eerlijke antwoord is dat voor eenmalige, kijk-op-het-taken, een visueel hulpmiddel met onmiddellijke feedback verslaat het onthouden van de jq bezwering of de openssl vlag. Wanneer een API me om 2 uur 's nachts een verkleinde klodder overhandigt, wil ik geen opmaakscript schrijven; ik wil het plakken en zien. Als ik moet kijken of twee JSON-reacties verschillen, is een rood/groen diff sneller dan wat er doorheen pijpt.
Maar de beslissende factor is geen gemak, het is Waar de gegevens naartoe gaan. Een enorm aantal & quot; gratis online" tools uploaden wat je ook plakt naar een server om het te verwerken Dat is prima voor een openbare sample en een echt probleem voor een productietoken, een klantenrecord of een niet vrijgegeven asset Elke tool in deze gids draait volledig in je browser - de verwerking gebeurt in JavaScript op je machine, en er is geen uploadstap om je zorgen over te maken Die combinatie, visueel-en-instant plus privé-per-standaard, is de hele reden om deze in een tabgroep te houden in plaats van te schillen.
Vormgevende gegevens: JSON, YAML, CSV, XML
Dit is de categorie die ik het meest gebruik, omdat het grootste deel van de webontwikkeling gestructureerde gegevens tussen systemen verplaatst en ernaar loensen wanneer het breekt.
de JSON-formatter is het werkpaard - plak een geminifieerd API-antwoord en krijg ingesprongen, leesbare uitvoer met de syntaxisfout die wordt gelokaliseerd wanneer de JSON ongeldig is Wanneer u het moet weten Wat is er veranderd? Tussen twee laadvermogens, JSON-differentiatie Vergelijkt structureel in plaats van regel voor regel, dus opnieuw geordende sleutels creëren geen fantoomverschillen. Voor de configuratiekant van de opdracht is de YAML-validator vangt de stille YAML-vallen op: tabbladen in inkeping, dubbele sleutels en de type-dwangverrassingen die draaien version: 1.10 in het getal 1.1 - voordat een Kubernetes- of CI-bestand een implementatie opblaast.
Gegevens blijven zelden in één vorm. de JSON naar CSV en CSV naar JSON Converters bewegen tussen API-uitvoer en spreadsheets, de CSV-kijker maakt een rommelige CSV als een echte tabel, zodat je het echt kunt lezen, en de XML naar JSON en json naar yaml Tools bestrijken het formaat hops die je hebt geraakt met legacy-API's en configuratiebestanden. Als u de diepere versie van deze categorie wilt, dan Complete gids voor JSON-tools Loopt door de hele workflow.
Debugging-tokens en tijd: JWT, Base64, tijdstempels
Auth en tijd zijn waar "de code er goed uitziet" bugs komen te verbergen, en ze worden bijna altijd opgelost door Kijken naar de gegevens In plaats van de logica opnieuw te lezen.
de JWT-decoder splitst een token in header, payload en handtekening en toont u de claims - en zo ontdekt u dat exp je hebt gezworen dat het goed was, is eigenlijk in het verleden. Bereik ervoor in plaats van een generieke decoder, omdat JWT's base64url gebruiken (RFC 4648 §5), niet standaard Base64, en een vlakte Base64-converter is het juiste hulpmiddel voor al het andere - Basic auth headers, data-URI's, gecodeerde payloads De tijdstempel converter verandert UNIX seconden en milliseconden in echte dates (de vermenging van seconden-vs-milliseconden is de meest voorkomende auth-bug die ik zie), en de tijdzone-omzetter en Datumverschil Tools omgaan met de "hoe laat was dit voor de gebruiker" en "hoe lang tussen deze twee gebeurtenissen" vragen. Ik schreef de hele debugging-stroom in de API-debugger-tools voor debuggen Als je de oorlogsverhalen wilt.
regex zonder het giswerk
Reguliere expressies zijn schrijven-eens, debug-forever. de regex-tester Hiermee kunt u een patroon samenstellen tegen voorbeeldtekst met markering van live match, zodat u ziet wat overeenkomt met het moment dat u het typt in plaats van een validator te implementeren en te hopen. Als u liever een patroon uitbouwt uit bouwstenen, dan Regex-bouwer benadert het vanuit de andere richting. Hoe dan ook, het punt is hetzelfde: test het patroon tegen echte snaren voordat het een formulier bewaakt of een logboek ontleedt. de Regex Builder-gids Behandelt de gemeenschappelijke patronen die het onthouden waard zijn.
Tekstruzie: tellen, behuizing, diffing, tijdelijke aanduiding
De onglamoreuze snaarklusjes tellen op. de woord teller Controleert de inhoud tegen lengtelimieten (Meta-beschrijvingen, tweets, koppen). de doosomvormer flips tussen camelCase, snake_case, kebab-case en PascalCase - van onschatbare waarde wanneer u namen van variabelen over een codebase porteert De tekst diff Vergelijkt twee blokken en markeert elke wijziging, namelijk codebeoordeling buiten Git en Config-audits die in één zijn gerold.
Voor het bouwen en prototypen specifiek: de Lorem ipsum-generator Vult mockups met de rechter getal van tijdelijke aanduidingstekst (er is een Volledige gids voor het dimensioneren van tijdelijke aanduidingstekst), de slotenprogramma Verandert titels in schone URL-paden en de String omgekeerd Tool handelt af en toe eenmalig af. de Handleiding voor teksthulpmiddelen bindt deze samen.
CSS en kleur
Hier woont de front-end Poolse. de Gradiëntgenerator geeft u een visuele editor voor lineaire en radiale gradiënten en hands back productie CSS - niet raden bij hoeken en stops (de Gradiëntgids gaat dieper). de kleurenkiezer converteert tussen HEX, RGB en HSL en is waar ik het contrast controleer voordat een kleur een toegankelijkheidsaudit beëindigt; Kleurkiezergids Dekt de contrasten wiskunde. Wanneer het tijd is om te verzenden, wordt de CSS-minifier en html-minifier Strip witruimte en opmerkingen om bytes van de draad af te scheren.
Afbeeldingen voor het web
Afbeeldingen zijn meestal het zwaarste op een pagina, dus deze categorie betaalt zichzelf terug Core Web Vitals. de Afbeelding wijzigen gereedschap stelt exacte afmetingen in (en er is een netvliesval die het waard is om te weten over, bedekt met zijn geleiden), de afbeeldingscompressor verkleint de bestandsgrootte terwijl u de kwaliteit vasthoudt, en de Converter voor afbeeldingsformaat Verplaatst tussen PNG, JPG en WebP, zodat u het juiste formaat voor de taak bedient. de Achtergrondverwijderaar is een kleurtoetsverwijderaar - snel en privé, geweldig op een vlakke achtergrond en eerlijk over de grenzen ervan geleiden. de Gids voor afbeeldingenhulpmiddelen is de pijler voor deze set.
Verzending: SEO, delen en beveiliging
de laatste mijl voordat een pagina live gaat. de Meta-tag-generator bouwt uw titel, beschrijving, grafiek openen, en Twitter-kaarttags, en de Grafiekvoorbeeld openen Laat zien hoe de link eruit zal zien wanneer deze wordt gedeeld voordat je op de harde manier op social media erachter komt. de Robots.txt-generator en UTM-bouwer afhandelen van crawlregels en campagnetracking, en de QR-generator Maakt een scanbare code voor afdrukken of dia's. Aan de kant van de hygiëne, de Wachtwoordgenerator en Hash-generator dekken sterke geheimen en integriteitscontroles, en de UUID-generator Spits identifiers voor testgegevens en databasesleutels.
Tools-side tools versus upload-gebaseerde tools: de vergelijking die ertoe doet
| Toolz.dev (cliënt-kant) | Typische "Gratis online tool" | |
|---|---|---|
| Waar verwerking plaatsvindt | in uw browser | op een externe server |
| Uw gegevens (tokens, bestanden, code) | Verlaat nooit het tabblad | geüpload naar een derde partij |
| Aanmelden / Inloggen | niet een | Vaak vereist voor volledige functies |
| Gebruikslimieten | Geen op de tools | vaak afgedekt of betaald |
| tempo | Direct, geen rondreis | hangt af van upload + server |
| Werkt met gevoelige gegevens | Ja, door ontwerp | Riskant - u vertrouwt hun server |
| Aantal gereedschappen | Iets meer dan vijftig, samengesteld | Meestal één tool per site |
De rij waar ik het meest om geef is de tweede Voor een openbare steekproef maakt het niet uit waar de verwerking plaatsvindt; voor een productiegeheim doet het er enorm toe Het bouwen van de hele toolkit client-side betekent dat ik nooit & quot; is dit de veilige site om dit in & quot te plakken; - ze zijn allemaal.
Hoe ik dit eigenlijk gebruik: keten de tools
De meeste echte taken zijn een kleine pijplijn, geen enkele klik:
Een API-antwoord opsporing: plak het in de JSON-formatter, decodeer elk token met de JWT-decoder, draai de exp claim op een datum met de tijdstempel converter, vergelijk dan de gebroken reactie met een werkende met de JSON-differentiatie.
Een heldbeeld voorbereiden: Achtergrondverwijderaar Als het een uitsparing nodig heeft, dan Afbeelding wijzigen Voor exacte afmetingen, dan afbeeldingscompressor Om uw paginagewichtbudget te halen, converteren naar WebP met de Formaat converter Op weg naar buiten.
Een nieuwe pagina verzenden: tags genereren met de Meta-tag-generator, controleer de aandelenkaart in de Grafiekvoorbeeld openenen bevestig dat uw exemplaar past bij de woord teller.
Houd de vijf of zes die u dagelijks aanraakt in een vastgezette tabgroep. De rest is één zoektocht in het ⌘K-palet wanneer je ze nodig hebt.
Veelgestelde vragen
Zijn deze webontwikkelaarstools echt gratis?
Ja. Elke tool op Toolz.dev is gratis te gebruiken zonder premium tier, geen feature gate en geen gebruiksdop op de tools zelf. Er is geen account vereist om ze te gebruiken.
Moet ik een account aanmaken of inloggen?
heel weinig Open een gereedschap en gebruik het onmiddellijk. Er is geen aanmelding en omdat de tools die in uw browser worden uitgevoerd, er niets is om met een profiel te synchroniseren.
Is het veilig om tokens, sleutels of privégegevens te plakken?
Ja, en dat is de kernontwerpbeslissing De tools verwerken alles client-side in JavaScript, dus wat je plakt - een JWT, een API-antwoord, een niet vrijgegeven afbeelding - wordt afgehandeld op je machine en wordt niet geüpload naar een server Dat is de belangrijkste reden om ze te gebruiken via op upload gebaseerde alternatieven.
Hoeveel tools heeft Toolz.dev?
Iets meer dan vijftig op dit moment, die gegevens, tekst, codering, CSS, kleur, afbeelding, SEO, beveiliging en rekenmachine categorieën omvatten Ik zou de set liever opzettelijk laten groeien dan een getal te claimen dat meestal vulmiddel is - elk hulpmiddel dat hier wordt vermeld bestaat en werkt vandaag.
Werken de tools op mobiel?
Ja, de interfaces zijn responsief en werken in mobiele browsers Zwaardere taken - vooral grote beeldverwerking - zijn sneller en comfortabeler op desktop, maar de tools zelf draaien beide kanten op.
Werken deze tools offline?
Meestal wel Omdat elke tool in JavaScript in uw browser draait, blijft een tool werken zonder verbinding zodra de pagina is geladen - handig in een vliegtuig of een schilferig netwerk U hoeft alleen online te zijn om een tool de eerste keer te openen; daarna heeft de verwerking zelf geen server nodig.
Wat is het verschil tussen client-side en server-side online tools?
Een client-side tool doet zijn werk in uw browser, dus de gegevens die u plakt verlaten nooit uw machine Een server-side tool uploadt uw invoer naar een externe computer om deze te verwerken en stuurt het resultaat terug De uitvoer kan er identiek uitzien, maar alleen client-side tools houden een productietoken, privébestand of klantrecord van iemand anders & #39; s server - daarom is elke tool hier gebouwd client-side.
Kan ik deze gebruiken in plaats van mijn terminal of IDE-tooling?
Voor eenmalige, visuele taken - het formatteren van een blob, het decoderen van een token, het in de gaten houden van een diff, het opbouwen van een gradiënt - zijn ze vaak sneller dan het onthouden van het equivalent van de opdrachtregel Voor gescripte, herhaalbare werkzaamheden wilt u uw terminal nog steeds In de praktijk zitten ze naast elkaar: vuur het verzoek af in uw gebruikelijke client en plak de uitvoer vervolgens hierin om het te lezen.
Welke tools moet ik als eerste bookmarken?
Begin met degene die je dagelijks aanraakt: de JSON-formatter, JWT-decoder, regex-tester, tijdstempel converter, en welke van de CSS- of afbeeldingstools ook overeenkomt met uw werk. Voeg de rest toe als je de taken die ze nodig hebben, opraakt.
inpakken
Een moderne webontwikkelaar' s toolkit is niet één grote app - het is een tiental kleine, scherpe tools waar je naar reikt zonder na te denken De val verstrooit ze over een tiental schetsmatige websites die je gegevens uploaden om ze te verwerken De oplossing houdt degenen die je vertrouwt in één tabgroep, allemaal lokaal, allemaal gratis, allemaal één toetsaanslag verwijderd.
Dat is wat Toolz.dev IS: Iets meer dan vijftig van die tools, gebouwd aan de clientzijde, zodat uw tokens en bestanden de uwe blijven. speld de JSON-formatter, de regex-tester, en de tijdstempel converter vandaag, en voeg de rest toe zoals het werk vereist. Gratis voor altijd, privé door ontwerp.
