Vor Jahren hatte mein & quot; dev tools" Lesezeichenordner etwa zwanzig Einträge, jeder eine andere Einzweck-Website, jeder mit seinem eigenen Anzeigenlayout, seinem eigenen Cookie-Banner, und - das ist der Teil, der mich endlich gestört hat - einen eigenen Server, auf den meine Daten stillschweigend hochgeladen wurden Ich habe ein Staging-API-Token in eines von ihnen eingefügt, um es zu dekodieren, und nach der Hälfte der Zeit dachte ich: Ich habe keine Ahnung, was diese Seite mit dieser Zeichenfolge macht Das war der Tag, an dem ich aufhörte, zufälligen Toolseiten zu vertrauen und mit dem Aufbau begann Toolz.dev, wo jedes Tool in Ihrem Browser läuft und nichts, was Sie einfügen, die Registerkarte verlässt.
Das ist das Toolkit, das dabei herauskam Nicht ein & quot; top 600 tools" listicle - Toolz.dev hat gerade etwas mehr als fünfzig Tools, und ich würde Ihnen lieber die zeigen, die ein arbeitender Webentwickler jede Woche öffnet, als die Zählung aufzuladen Sie sind hier nach der Arbeit gruppiert, die Sie erledigen: Daten formen, Text winden, CSS schreiben, Bilder vorbereiten, SEO versenden, und die Sicherheits-und-Kodierungs-Auswahlmöglichkeiten dazwischen Alles ist kostenlos, braucht 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 wohne auch in einem Terminal Die ehrliche Antwort ist, dass für einmalige, Look-at-it-Aufgaben ein visuelles Tool mit sofortigem Feedback das Erinnern 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 gehen. Eine riesige Anzahl von & quot; free online" Tools laden alles hoch, was Sie auf einen Server einfügen, um es zu verarbeiten Das ist in Ordnung für ein öffentliches Sample und ein echtes Problem für ein Produktionstoken, einen Kundendatensatz oder ein unveröffentlichtes Asset 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, um den Sie sich Sorgen machen müssen Diese Kombination, visuell-instant plus privat-by-default, ist der ganze Grund, diese in einer Tab-Gruppe zu belassen, 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 Arbeitstier - fügen Sie eine minifizierte API-Antwort ein und erhalten Sie eine eingerückte, lesbare Ausgabe mit dem Syntaxfehler, der sich befindet, wenn der JSON ungültig ist Wann Sie es 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 leisen YAML-Fallen - Tabs in Einrückung, doppelte Schlüssel und die Typ-Zwang-Überraschungen, die sich drehen version: 1.10 In die Zahl 1.1 - bevor eine Kubernetes - oder CI-Datei einen Deploy sprengt.
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 ein Token in Header, Payload und Signatur auf und zeigt Ihnen die Ansprüche - so entdecken Sie das exp Sie haben geschworen, dass es in Ordnung sei, liegt tatsächlich in der Vergangenheit. Greifen Sie darauf statt zu einem generischen Decoder, da JWTs base64url verwenden (RFC 4648 §5), nicht Standardbasis64, und eine Ebene Base64-Konverter Ist das richtige Tool für alles andere - Basis-Authentenheader, Daten-URIs, codierte Nutzlasten Die 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 Flips zwischen camelCase, snake_case, kebab-case und PascalCase - von unschätzbarem Wert, wenn Sie Variablennamen über eine Codebasis portieren Die 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 Gradienten und gibt Produktion CSS zurück - kein Raten bei 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 Ding auf einer Seite, daher amortisiert sich diese Kategorie Kernnetzvitaledrohen 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üsselentferner - schnell und privat, großartig auf flachem Hintergrund und ehrlich über seine Grenzen 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 Ihren Titel, Ihre Beschreibung, aufbaut Grafik öffnenund 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 Zeile, die mir am meisten am Herzen liegt, ist die zweite Für eine öffentliche Probe ist es egal, wo die Verarbeitung geschieht; für ein Produktionsgeheimnis ist es enorm wichtig Das Erstellen des gesamten Toolkits auf Client-Seite bedeutet, dass ich nie nach & quot; fragen muss. Ist dies die sichere Website, um dies in & quot; einzufügen. - 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 Kern-Entwurfsentscheidung Die Tools verarbeiten alles Client-seitig in JavaScript, also wird das, was Sie einfügen - ein JWT, eine API-Antwort, ein unveröffentlichtes Bild - auf Ihrem Computer behandelt und nicht auf einen Server hochgeladen Das ist der Hauptgrund, sie über Upload-basierte Alternativen zu verwenden.
Wie viele Werkzeuge hat Toolz.dev?
Etwas mehr als fünfzig im Moment, die sich auf die Kategorien Daten, Text, Codierung, CSS, Farbe, Bild, SEO, Sicherheit und Taschenrechner erstrecken Ich würde das Set lieber bewusst vergrößern, als eine Zahl zu beanspruchen, die größtenteils Füllmaterial ist - jedes hier aufgeführte Tool existiert und funktioniert heute.
Funktionieren die Tools auf dem Handy?
Ja, die Schnittstellen sind responsive und funktionieren in mobilen Browsern Schwerere Jobs - vor allem große Bildverarbeitung - sind schneller und komfortabler auf dem Desktop, aber die Tools selbst laufen so oder so.
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 weiterhin ohne Verbindung - nützlich in einem Flugzeug oder einem flockigen Netzwerk Sie müssen nur online sein, um ein Tool beim ersten Mal zu öffnen; danach benötigt die Verarbeitung selbst keinen Server.
Was ist der Unterschied zwischen clientseitigen und serverseitigen Online-Tools?
Ein clientseitiges Tool verrichtet seine Arbeit in Ihrem Browser, sodass die Daten, die Sie einfügen, Ihre Maschine nie verlassen Ein serverseitiges Tool lädt Ihre Eingabe auf einen entfernten Computer hoch, um sie zu verarbeiten, und sendet das Ergebnis zurück. Die Ausgabe kann identisch aussehen, aber nur clientseitige Tools behalten ein Produktionstoken, eine private Datei oder einen Kundendatensatz von einem anderen & #39; s-Server - weshalb jedes Tool hier clientseitig erstellt ist.
Kann ich diese anstelle meines Terminals oder IDE-Tools verwenden?
Für einmalige, visuelle Aufgaben - Formatieren eines Blobs, Dekodieren eines Tokens, Anblick eines Diffs, Aufbau eines Gradienten - sind sie oft schneller als das Merken des Befehlszeilenäquivalents. Für geskriptete, wiederholbare Arbeiten möchten Sie Ihr Terminal trotzdem. In der Praxis sitzen sie nebeneinander: Feuern Sie die Anfrage in Ihrem gewohnten Client ab und fügen Sie dann die Ausgabe 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' s Toolkit ist nicht eine große App - es ist ein Dutzend kleine, scharfe Werkzeuge, nach denen Sie ohne nachzudenken greifen Die Falle streut sie auf ein Dutzend skizzenhafte Websites, die Ihre Daten hochladen, um sie zu verarbeiten Der Fix besteht darin, diejenigen, denen Sie vertrauen, in einer einzigen Tab-Gruppe zu behalten, die alle lokal laufen, alle kostenlos, 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.
