Vor Jahren hatte mein "Dev Tools" -Lesezeichenordner ungefähr zwanzig Einträge, jede mit einer anderen einseitigen Website mit jeweils eigenem Anzeigenlayout, einem eigenen Cookie-Banner und - dies ist der Teil, der mich endlich gestört hat - einen eigenen Server, auf den meine Daten leise hochgeladen wurden. Ich habe einen Staging-API-Token in einen von ihnen eingefügt, um ihn zu dekodieren, und nach der Hälfte dachte ich: Ich habe keine Ahnung, was diese Seite mit dieser Zeichenfolge macht. Das war der Tag, an dem ich aufhörte, zufälligen Werkzeugseiten zu vertrauen, und angefangen zu bauen toolz.dev, wo jedes Tool in Ihrem Browser läuft und nichts, was Sie einfügen, die Registerkarte verlässt.
Dies ist das Toolkit, das daraus hervorgegangen ist. Keine "Top 600 Tools" - toolz.dev hat momentan etwas mehr als fünfzig Tools, und ich würde Ihnen lieber zeigen, welche ein funktionierender Webentwickler jede Woche öffnet, als die Anzahl zu füllen. Sie werden hier nach der Aufgabe gruppiert, die Sie erledigen: Daten formen, Text streiten, CSS schreiben, Bilder vorbereiten, SEO aus dem Versand und die Aufgaben zwischen Sicherheit und Codierung dazwischen. Alles ist kostenlos, benötigt kein Konto und verarbeitet lokal.
tl; dr: Halten Sie eine Browser-Registergruppe während des Erstellens geöffnet. Für Daten: JSON-Formater, json diff, YAML-Validator, CSV-Betrachterdrohen Für Debuggen von Token: JWT-Decoder, Base64-Konverter, Zeitstempelkonverterdrohen Für Regex: Regex-Testerdrohen Für CSS: Gradientengenerator, Farbpflücker, CSS-Minifiziererdrohen Für Bilder: Größe ändern, komprimieren, Formatkonverterdrohen Für SEO: Meta-Tag-Generator, Graph-Vorschau öffnendrohen Alle clientseitig, alles kostenlos.
Warum sollten Sie sich mit Browsertools beschäftigen, wenn Sie ein Terminal haben?
Faire Frage - Ich lebe auch in einem Terminal. Die ehrliche Antwort ist, dass für einmalige Aufgaben, die sich an die IT-Aufgaben stellen, ein visuelles Tool mit sofortiger Rückmeldung schlägt, das sich an die jq Beschwörung oder die openssl Flagge Wenn eine API um 2 Uhr morgens einen minimierten Blob übergibt, möchte ich kein Formatierungsskript schreiben, sondern einfügen und sehen. Wenn ich sehen muss, ob sich zwei JSON-Antworten unterscheiden, ist ein rot / grüner Diff schneller als durch alles.
Aber der entscheidende Faktor ist nicht die Bequemlichkeit, es ist Wohin die Daten gehendrohen Eine große Anzahl von "kostenlosen Online" Tools laden alles hoch, was Sie einfügen, um es zu verarbeiten. Das ist in Ordnung für eine öffentliche Stichprobe und ein echtes Problem für einen Produktions-Token, einen Kundendatensatz oder ein unveröffentlichtes Vermögen. Jedes Tool in diesem Handbuch läuft vollständig in Ihrem Browser - die Verarbeitung erfolgt in Javascript auf Ihrem Computer, und es gibt keinen Upload-Schritt, über den Sie sich Sorgen machen müssen. Diese Kombination, visuell und sofort sowie privat nach Standard, ist der ganze Grund, diese in einer Tab-Gruppe zu halten, anstatt sie auszuschalten.
Daten formen: JSON, YAML, CSV, XML
Dies ist die Kategorie, die ich am häufigsten verwende, da der größte Teil der Webentwicklung strukturierte Daten zwischen Systemen bewegt und beim Bruch schielt.
der JSON-Formater Ist das Arbeitspferd - Fügen Sie eine minimierte API-Antwort ein und erhalten Sie eingerückte, lesbare Ausgaben, wobei der Syntaxfehler gefunden wird, wenn der JSON ungültig ist. Wenn Sie wissen müssen Was hat sich geändert? Zwischen zwei Nutzlasten json diff Vergleicht strukturell statt zeilenweise, so dass neu geordnete Schlüssel keine Phantomunterschiede erzeugen. Für die Konfigurationsseite des Jobs ist YAML-Validator Fängt die ruhigen YAML-Fallen ab – Registerkarten in Einrückung, doppelte Schlüssel und die Typ-Zwangsüberraschungen, die sich drehen version: 1.10 in die Zahl 1.1 — bevor eine Kubernetes- oder CI-Datei einen Deploy in die Luft jagt.
Daten bleiben selten in einer Form. der JSON zu CSV und CSV zu JSON Konverter bewegen sich zwischen API-Ausgabe und Tabellenkalkulationen CSV-Betrachter Rendert eine unordentliche CSV als echte Tabelle, damit Sie sie tatsächlich lesen können XML zu JSON und json zu Yaml Die Tools decken das Format-Hops ab, das Sie mit Legacy-APIs und Konfigurationsdateien treffen. Wenn Sie die tiefere Version dieser Kategorie wünschen, wird Komplette Anleitung zu JSON-Tools Geht durch den gesamten Workflow.
Debuggen von Token und Zeit: JWT, Base64, Zeitstempel
Auth und Time sind dort, wo "der Code richtig aussieht" Fehler, und sie werden fast immer durch gelöst Blick auf die Daten anstatt die Logik nochmals zu lesen.
der JWT-Decoder Teilt einen Token in Header, Payload und Signatur und zeigt Ihnen die Ansprüche - so entdecken Sie das exp Sie schwor es war in Ordnung, ist tatsächlich in der Vergangenheit. Greifen Sie danach anstelle eines generischen Decoders, da JWTs base64url (RFC 4648 §5), nicht Standard Base64 und eine Ebene verwenden Base64-Konverter ist das richtige Werkzeug für alles andere - grundlegende Auth-Header, Daten-URIs, codierte Nutzlasten. der Zeitstempelkonverter Verwandelt Unix-Sekunden und Millisekunden in echte Daten (die Verwechslung von Sekunden-gegen-Millisekunden ist der häufigste Authentifizierungsfehler, den ich sehe), und der Zeitzonenkonverter und Datumsdifferenz Die Werkzeuge handhaben die "Wann der Zeit für den Benutzer" und "wie lange zwischen diesen beiden Ereignissen" Fragen. Ich habe den gesamten Debugging-Flow in die geschrieben API-Debugging-Tools Wenn Sie die Kriegsgeschichten wollen.
Regex ohne Rätselraten
Reguläre Ausdrücke sind einmal schreiben, für immer debuggen. der Regex-Tester Ermöglicht das Erstellen eines Musters gegen Beispieltext mit Live-Match-Hervorhebung, sodass Sie sehen, was in dem Moment übereinstimmt, in dem Sie es eingeben, anstatt einen Validator bereitzustellen und zu hoffen. Wenn Sie lieber ein Muster aus Bausteinen zusammenbauen möchten, Regex-Builder nähert sich ihm aus der anderen Richtung. In beiden Fällen ist der Punkt der gleiche: Testen Sie das Muster gegen echte Zeichenfolgen, bevor es ein Formular schützt oder ein Protokoll analysiert. der Regex Builder-Anleitung Deckt die gemeinsamen Muster ab, die es wert sind, sich zu merken.
Text-Wrangling: Zählen, Diffing, Platzhalter
Die unglamourösen Streicherarbeiten summieren sich. der Wortzähler Überprüft den Inhalt gegen Längenbeschränkungen (Meta-Beschreibungen, Tweets, Überschriften). der Gehäusekonverter Zwischen CamelCase, Snake_Case, Kebab-Case und PascalCase – von unschätzbarem Wert, wenn Sie Variablennamen über eine Codebasis portieren. der Textdiff Vergleicht zwei Blöcke und hebt jede Änderung hervor, die Codeüberprüfung außerhalb von Git und Konfigurationsprüfung in einem gerollt wird.
Für das Bauen und Prototyping speziell: Lorem Ipsum Generator Füllt Mockups mit dem Recht Menge des Platzhaltertextes (es gibt eine Vollständiger Leitfaden zur Größe von Platzhaltertext), das Schneckengenerator Verwandelt Titel in saubere URL-Pfade und String Reverse Das Werkzeug übernimmt das ungerade Einzelstück. der Handbuch für Textwerkzeuge binden diese zusammen.
CSS und Farbe
Hier lebt die Front-End-Polnisch. der Gradientengenerator Gibt Ihnen einen visuellen Editor für lineare und radiale Farbverläufe und die Rückführung der Produktion-CSs - keine Vermutung an Winkeln und Stopps (die Farbverlaufsführer geht tiefer). der Farbpflücker Konvertiert zwischen hex, rgb und hsl und ist dort, wo ich den Kontrast prüfe, bevor eine Farbe ein Accessibility Audit nicht besteht. Farbauswahl-Anleitung Deckt die Kontrastmathematik ab. Wenn es Zeit ist zu versenden, CSS-Minifizierer und HTML-Minifire Streifen Leerzeichen und Kommentare zum Rasieren von Bytes vom Draht.
Bilder für das Web
Bilder sind normalerweise das schwerste auf einer Seite, daher lohnt sich diese Kategorie in den wichtigsten Web-Vitals. der Bildgröße ändern Werkzeug stellt genaue Abmessungen ein (und es gibt eine subtile Retina-Falle, die in ihrer Führer), das Bildkompressor Verkleinert die Dateigröße, während die Qualität beibehalten wird, und die Bildformat-Konverter Wechselt zwischen PNG, JPG und WEBP, damit Sie das richtige Format für den Job bereitstellen. der Hintergrundentferner ist ein Farbschlüssel-Entferner - schnell und privat, großartig auf flachem Hintergrund und ehrlich über seine Grenzen in seiner Führerdrohen der Anleitung für Bildwerkzeuge ist die Säule für dieses Set.
Versand: SEO, Teilen und Sicherheit
Die letzte Meile bevor eine Seite live geht. der Meta-Tag-Generator Erstellt Ihren Titel, Beschreibung, offenen Grafik und Twitter-Karten-Tags und die Graph-Vorschau öffnen Zeigt an, wie der Link aussehen wird, wenn er freigegeben wird, bevor Sie den harten Weg in der sozialen Sprache herausfinden. der robots.txt-Generator und UTM-Builder Umgang mit Crawl-Regeln und Kampagnen-Tracking und QR-Generator Erstellt einen scannbaren Code für Druck oder Folien. Auf der Seite der Sicherheitshygiene ist die Passwort-Generator und Hash-Generator Decken Sie starke Geheimnisse und Integritätsprüfungen ab, und die UUID-Generator Spuckt Kennungen für Testdaten und Datenbankschlüssel aus.
Clientseitige Tools vs. Upload-basierte Tools: Der Vergleich, der zählt
| toolz.dev (Client-Seite) | Typisches "Kostenloses Online-Tool" | |
|---|---|---|
| Wo die Verarbeitung stattfindet | In Ihrem Browser | Auf einem Remote-Server |
| Ihre Daten (Token, Dateien, Code) | Verlässt niemals die Registerkarte | Auf einen Dritten hochgeladen |
| Anmelden / Login | keine | Oft für vollständige Funktionen erforderlich |
| Nutzungsgrenzen | Keine auf den Werkzeugen | häufig gekappt oder paywalled |
| rasen | Sofort, keine Rundreise | hängt vom Upload + Server ab |
| Funktioniert mit sensiblen Daten | Ja, von Design | riskant - Sie vertrauen ihrem Server |
| Anzahl der Werkzeuge | etwas mehr als fünfzig, kuratiert | Normalerweise ein Tool pro Website |
Die Reihe, die mir am meisten wichtig ist, ist die zweite. Für eine öffentliche Probe ist es egal, wo die Verarbeitung stattfindet, für ein Produktionsgeheimnis ist es enorm wichtig. Wenn ich die gesamte Toolkit-Clientseite aufbaue, muss ich niemals fragen: "Ist dies die sichere Seite, in die ich dies einfügen kann" - sie alle sind es.
Wie ich das tatsächlich benutze: Verketten Sie die Werkzeuge
Die meisten realen Aufgaben sind eine kleine Pipeline, kein einziger Klick:
Debuggen einer API-Antwort: Fügen Sie sie in die JSON-Formater, dekodieren Sie jeden Token mit dem JWT-Decoder, drehen Sie die exp Anspruch auf ein Datum mit dem Zeitstempelkonverter, dann vergleichen Sie die gebrochene Reaktion mit einer funktionierenden mit der json diffdrohen
Ein Heldenbild vorbereiten: Hintergrundentferner Wenn es einen Ausschnitt braucht, dann Bildgröße ändern Für genaue Abmessungen dann Bildkompressor Um Ihr Seitengewichtsbudget zu erreichen, konvertieren Sie mit dem Formatkonverter Auf dem Weg nach draußen.
Versand einer neuen Seite: Generieren Sie Tags mit dem Meta-Tag-Generator, überprüfen Sie die Share-Karte in der Graph-Vorschau öffnen, und bestätigen Sie, dass Ihre Kopie mit dem passt Wortzählerdrohen
Behalten Sie die fünf oder sechs, die Sie täglich berühren, in einer angehefteten Registerkartengruppe. Der Rest ist eine Suche in der ⌘K-Palette, wenn Sie sie benötigen.
Häufig gestellte Fragen
Sind diese Webentwickler-Tools wirklich kostenlos?
Ja. Jedes Tool auf toolz.dev ist kostenlos ohne Premium-Tier, ohne Feature-Gate und ohne Verwendungsbegrenzung für die Tools selbst. Es ist kein Konto erforderlich, um sie zu verwenden.
Muss ich ein Konto erstellen oder mich anmelden?
kein . Öffnen Sie ein Werkzeug und verwenden Sie es sofort. Es gibt keine Anmeldung, und da die Tools in Ihrem Browser ausgeführt werden, gibt es nichts zu synchronisieren mit einem Profil.
Ist es sicher, Token, Schlüssel oder private Daten einzufügen?
Ja, und das ist die zentrale Designentscheidung. Die Tools verarbeiten alles in JavaScript, was Sie einfügen - ein JWT, eine API-Antwort, ein unveröffentlichtes Bild - wird auf Ihrem Computer verarbeitet und nicht auf einen Server hochgeladen. Dies ist der Hauptgrund, sie über Upload-basierte Alternativen zu verwenden.
Wie viele Werkzeuge hat toolz.dev?
Im Moment etwas mehr als fünfzig, das Daten, Text, Codierung, CSS, Farbe, Bild, SEO, Sicherheit und Taschenrechner umfasst. Ich würde das Set lieber absichtlich anbauen, als eine Zahl zu beanspruchen, die hauptsächlich Füller ist - jedes hier aufgeführte Werkzeug existiert und funktioniert heute.
Funktionieren die Tools auf dem Handy?
Ja, die Schnittstellen sind responsiv und funktionieren in mobilen Browsern. Schwerere Jobs - insbesondere große Bildverarbeitung - sind auf dem Desktop schneller und komfortabler, aber die Tools selbst laufen in beide Richtungen.
Funktionieren diese Tools offline?
Meistens ja. Da jedes Tool in Ihrem Browser in JavaScript ausgeführt wird, arbeitet ein Tool nach dem Laden seiner Seite immer ohne Verbindung - nützlich in einem Flugzeug oder einem flockigen Netzwerk. Sie müssen nur online sein, um ein Tool zum ersten Mal zu öffnen, danach braucht die Verarbeitung selbst keinen Server.
Was ist der Unterschied zwischen clientseitigen und serverseitigen Online-Tools?
Ein clientseitiges Tool erledigt seine Arbeit in Ihrem Browser, sodass die Daten, die Sie einfügen, niemals Ihre Maschine verlassen. Ein serverseitiges Tool lädt Ihre Eingaben auf einen Remote-Computer hoch, um sie zu verarbeiten, und sendet das Ergebnis zurück. Die Ausgabe kann identisch aussehen, aber nur clientseitige Tools speichern einen Produktionstoken, eine private Datei oder einen Kundendatensatz von einem anderen Server - weshalb jedes Tool hier clientseitig erstellt wird.
Kann ich diese anstelle meines Terminals oder IDE-Tools verwenden?
Für einmalige, visuelle Aufgaben - Formatieren eines Blobs, Dekodieren eines Tokens, Augenabweichung, Erstellen eines Farbverlaufs - sind sie oft schneller als das Befehlszeilenäquivalent. Für skriptgesteuerte, wiederholbare Arbeiten möchten Sie weiterhin Ihr Terminal. In der Praxis sitzen sie nebeneinander: Geben Sie die Anfrage in Ihrem üblichen Client ab und fügen Sie die Ausgabe in diese ein, um sie zu lesen.
Welche Tools sollte ich zuerst mit einem Lesezeichen versehen?
Beginnen Sie mit denen, die Sie täglich berühren: JSON-Formater, JWT-Decoder, Regex-Tester, Zeitstempelkonverterund welche der CSS- oder Bildwerkzeuge zu Ihrer Arbeit passen. Fügen Sie den Rest hinzu, während Sie die Aufgaben treffen, die sie benötigen.
Abschluss
Ein modernes Webentwickler-Toolkit ist keine große App - es ist ein Dutzend kleine, scharfe Werkzeuge, nach denen Sie ohne nachzudenken greifen. Die Falle verteilt sie auf ein Dutzend skizzenhafter Websites, auf denen Ihre Daten hochgeladen werden, um sie zu verarbeiten. Der Fix besteht darin, die, die Sie vertrauen, in einer einzelnen Registerkartengruppe zu halten, alle lokal, alle frei und alle einen Tastendruck entfernt.
das ist was toolz.dev IS: Etwas mehr als fünfzig dieser Tools, die clientseitig gebaut wurden, damit Ihre Token und Dateien Ihre bleiben. Stecken Sie das JSON-Formater, das Regex-Testerund das Zeitstempelkonverter heute und fügen Sie den Rest wie die Arbeit voraus. Für immer frei, privat von Design.
