Entwicklerproduktivitätstools: Die 40, die ich tatsächlich jede Woche eröffne

Ich halte auf meinem zweiten Monitor ein Browserfenster geöffnet, das nur Dienstprogramme ist. JSON-Formater, Zeitstempelkonverter, Regex-Tester, Hash-Generator. Es gibt es seit Jahren durch WP Adminify-Releases durch Laravel-Seitenprojekte durch jede nächtliche Debugging-Sitzung, bei der eine Webhook-Nutzlast minimiert eintrifft und ich sehen muss, was tatsächlich darin ist.

Lange Zeit zeigten diese Tabs auf sieben verschiedene Websites. Einige waren in Ordnung. Einige waren Werbefarmen, die meine Nutzlast auf einen Server hochgeladen haben, von dem ich noch nie gehört habe. Einer von ihnen - ich werde es nicht nennen - ich habe ein Inszenierungs-JWT in eingefügt, bevor der Gedanke mich eingeholt hat: Dieser Token ging einfach über den Draht zu einer anderen Box. Es war ein Inszenierungszeichen, nichts brannte, aber das Gefühl blieb. Ich habe toolz.dev teilweise gebaut, weil ich meinen eigenen Tab-Strip wollte, und zum Teil, weil ich diesen bestimmten Fehler nie wieder machen wollte.

Dies ist also keine Liste von 500 Tools, die aus einem Verzeichnis gekratzt werden. Es ist das Set, von dem tatsächlich leben toolz.dev Im Moment - 40 von ihnen - organisiert die Art und Weise, wie ich sie benutze: zu dem Moment am Arbeitstag, an dem ich nach einem greife. Jeder läuft in Ihrem Browser. Nichts Uploads. Es gibt kein Konto.

tl; dr: Die fünf öffne ich am meisten, um eine Meile: JSON-Formater Für nicht lesbare API-Antworten, Zeitstempelkonverter Für Log-Forensik, Regex-Tester Für Musterarbeit, Base64-Konverter für JWTs und Daten-URIs und UUID-Generator Für die Saattestdaten. Alles unten läuft clientseitig - Ihre Nutzlast verlässt nie die Registerkarte. Wenn Sie nur eins mit einem Lesezeichen versehen, markieren Sie den JSON-Formater.

Warum nicht einfach die CLI verwenden?

Faire Frage, und ich benutze die CLI. jq ist besser als jedes Web-Tool für Skripter. base64 -d ist zwei Tastenanschläge. Wenn eine Aufgabe in ein Shell-Skript geht, gehört sie in ein Shell-Skript.

Es gibt jedoch drei Situationen, in denen ein Browser-Tab wirklich gewinnt, und nach ungefähr einem Jahrzehnt habe ich aufgehört, mich wegen ihnen schuldig zu fühlen:

1. Visuelle Rückkopplungsschleifen. Regex ist das Offensichtliche. 14 Übereinstimmungen leuchten in einer Stichprobe von echtem Text, während Sie eingeben, ist eine andere Aktivität als das Ausführen grep -P Und das gleiche für Farbverläufe und Farben erhalten - Sie können keinen Hex-Code anschauen.
2. Die Maschine gehört nicht Ihnen. Client-Laptop, gesperrte Arbeitsmaschine, jemand anderes während einer Pairing-Sitzung. kein jq, keine Installationsrechte, keine Zeit.
3. Die Aufgabe ist wirklich einmalig. Ich schreibe kein Python-Skript, um eine CSV in JSON zu konvertieren. Ich werde es einfügen, klicken und mit meinem Leben weitermachen.

Hier ist der ehrliche Vergleich, den ich einem Junior-Entwickler geben würde, der gefragt wird, welchen ich verwenden soll:

Diese letzte Zeile ist die tatsächliche Regel, die ich befolge. Wenn ich etwas mehr als zweimal machen werde, geht es in einem Skript. Alles andere bekommt eine Registerkarte.

Welche Tools öffne ich während eines schlechten API-Tages?

Dies ist der Cluster, der seinen Aufenthalt verdient. Eine API eines Drittanbieters benimmt sich falsch, Sie haben eine Nutzlast und müssen sie verstehen, bevor Sie etwas reparieren können.

JSON-Formater - Die, die ich behalten würde, wenn ich nur einen behalten könnte

Der minimierte JSON ist unlesbar und schlimmer, wenn es ist ungültig Der Browserfehler sagt Ihnen "unerwartetes Token" und einen Zeichenversatz, der für einen Menschen nichts bedeutet. der JSON-Formater Pretty-Druckt es mit echter Einkerbung und zeigt auf die tatsächliche Linie, die unterbrochen ist. Neunzig Prozent der Zeit, in der der Schuldige ein nachlaufendes Komma ist, das in JavaScript-Objektliteralen legal und in JSON illegal ist - eine Unterscheidung, die mich mehr Stunden gekostet hat, als ich addieren möchte. Tiefer Tauchgang: So formatieren Sie JSON onlinedrohen

Base64-Konverter – für JWTs und Daten-URIs

Ein JWT besteht aus drei durch Punkte getrennten Base64URL-Segmenten. Fügen Sie die mittlere in die Base64-Konverter Und Sie können die Behauptungen - Emittent, Ablauf, Umfang - lesen, ohne den Token an einen Decoder eines Drittanbieters zu versenden. (Ich benutze die JWT-Decoder Wenn ich möchte, dass alle drei Segmente gleichzeitig analysiert werden, aber ich greife immer noch nach RAW base64, wenn eine Nutzlast komisch aussieht und ich die Bytes sehen möchte.) Der Unicode-Gotcha und warum btoa() wirft auf ein Emoji, ist in der Base64-Codierungshandbuchdrohen

Zeitstempelkonverter — Protokoll-Forensik

1752278400drohen ist das gestern oder 2029? der Zeitstempelkonverter Verwandelt Unix-Sekunden, Millisekunden und ISO 8601 in etwas, worüber ein Mensch in der Zeitzone, die Ihnen wichtig ist, nachdenken kann. Zwei Drittel meines Debuggings sind Zeitstempel von drei Diensten, die jeweils in einem anderen Format angemeldet sind, und einer davon ist in UTC, während die anderen nicht sind.

YAML-Validator – Da die Einrückung lasttragend ist

Kubernetes Manifeste, GitHub-Aktionen, Docker-Compose. YAML ist ledspace-signifikant und interpretiert Ihre Absicht still und nicht aus. der YAML-Validator Fängt den Tab-Vs-Space und den nicht zitierten no dass YAML 1.1 hilfreich als boolean analysiert falsedrohen (Ja, wirklich. Das Norwegen-Problem ist real: der Ländercode NO wird false es sei denn, Sie zitieren es.)

JSON Diff - Was hat sich tatsächlich geändert?

Zwei API-Antworten, eine funktionierende und eine nicht. In einem Texteditor nebeneinander anzustarren ist ein Spiel, das verloren geht. json diff Zeigt Ihnen die drei unterschiedlichen Tasten an und ignoriert die 200, die es nicht tun.

Der Rest des Debug-Regals

• SQL-Formater - Für die 90-Zeilen-Abfrage mit vier Joins, die jemand in einer Zeile geschrieben hat.
• Hash-Generator — MD5/SHA-1/SHA-256/SHA-512, hauptsächlich zum Überprüfen eines Downloads oder eines Cache-Schlüssels.
• Cron Parser - weil 0 */2 * * * und */2 * * * * unterscheiden sich um ein Zeichen und etwa sechzig Mal die Last.
• unterwürgen - PHP serialize() Ausgabe aus a wp_options Reihe Wenn Sie jemals die gespeicherten Einstellungen eines WordPress-Plugins debuggen, wissen Sie genau, warum dies existiert.

Was verwende ich, wenn ich Code schreibe und nicht debugge?

Regex, ohne das Verraten

Ich schreibe Regex in der Regex-Tester bevor es jemals eine Codebasis berührt. Füge ein realistisches Beispiel ein, schreibe das Muster, schaue dir die Spiele an. der Regex-Builder ist die andere Hälfte davon - es ist so, wenn Sie wissen, was Sie auf Englisch wollen und sich nicht erinnern können, ob es ist \b oder \Bdrohen Der Spickzettel mit vollständigem Muster sowie die katastrophale Rückverfolgungsfalle, die einen Server mit einem verschachtelten Quantifizierer einfrieren kann, befindet sich in der Regex Builder-Anleitungdrohen

UUIDs zum Säen

Zwanzig Testreihen, zwanzig eindeutige IDs, gerade jetzt. UUID-Generator V1, V4 und V7 in großen Mengen. Verwenden Sie V7 für neue Primärschlüssel - es ist zeitlich geordnet, sodass Ihr B-Tree-Index nicht durch zufällige Einfügungen gerissen wird. Ich habe das den teuren Weg gelernt und es in der UUID-Generator-Anleitungdrohen

Codierung, beide Geschmacksrichtungen

URL-En für Abfragezeichenfolgen, die enthalten & und = Und ein Raum. HTML-Entitäten Für den Moment müssen Sie anzeigen <script> auf einer Seite als Text und nicht als Vorfallbericht. Diese beiden sind langweilig und ich benutze sie ständig.

Formatstreit

Daten kommen ungefähr immer in der falschen Form. Der Umbausatz umfasst die Bewegungen, die ich tatsächlich mache:

• JSON zu CSV — Wenn ein Stakeholder nach "die Daten" fragt und eine Tabelle bedeutet. Verschachtelte Objekte werden in Punktnotationsspalten abgeflacht. Details in der JSON zu CSV-Leitfadendrohen
• CSV zu JSON - Umgekehrt zum Aussaat.
• json zu Yaml - Zum Verwandeln eines Konfigurations-Blobs in etwas, das ein Mensch bearbeiten wird.
• XML zu JSON - Jede alte SOAP-Integration, für immer.
• Binärübersetzer - Text ↔ Binär / Hex / Dezimal / Oktal. Meist für den Unterricht und für das ungerade Protokoll-Byte.

Das gesamte Codierungsregal mit den hinteren Argumenten befindet sich in der Anleitung für die Coding-Toolsdrohen

Welche verwende ich für Text und Inhalt?

Ich schreibe viel - Plugin-Dokumente, Changelogs, diesen Blog. Dies sind die Werkzeuge zwischen Entwurf und Veröffentlichung.

• Wortzähler - Wörter, Zeichen, Lesezeit. Auch die schnellste Möglichkeit, eine Meta-Beschreibung mit dem Budget von 160 Zeichen zu überprüfen, bevor Google sie kürzt. Mehr in der Wortzähler-Anleitungdrohen
• Gehäusekonverter - Camelcase, Snake_case, Kebab-Case, Pascalcase. Ich benenne Variablen auf diese Weise öfter um als das Refactor-Tool meines Editors, das schwach peinlich, aber wahr ist. Fallkonverter-Anleitungdrohen
• Schneckengenerator — Titel der URL, mit diakritischen Daten richtig behandelt. Café Décor sollte werden cafe-decor, nicht caf-dcordrohen
• Textdiff — Zwei Konfigurationsdateien oder zwei Versionen eines Absatzes nebeneinander.
• Lorem Ipsum — Platzhalterkopie für ein Layout, das noch keinen Inhalt hat.
• String Reverse - Nische, aber es zeigt sich in der Interviewvorbereitung und bei Palindrome-Checks mehr als Sie denken.

Der Volltextsatz wird in der Handbuch für Textwerkzeugedrohen

Was ist mit Design und Frontend-Arbeit?

Ich bin ein Entwickler, der Dinge akzeptabel aussehen lassen muss, nicht ein Designer. Das ist eine bestimmte Arbeit, und diese drei machen es.

• Farbpflücker — Hex ↔ RGB ↔ HSL, mit Kontrastprüfung, damit Sie nicht 3:1-Körpertext versenden. HSL ist das Format, das Hover-Zustände als Subtraktion anstelle einer Vermutung macht. Volle Behandlung: Farbauswahl & Konverter-Anleitungdrohen
• Gradientengenerator — Linear, radial, konisch, mit Live-Vorschau und kopierbarem CSS. Schreiben conic-gradient() Blind ist eine besondere Art von Elend. CSS-Gradientengenerator-Anleitungdrohen
• CSS-Minifizierer und HTML-Minifire - Im Moment müssen Sie etwas in eine inline einfügen <style> Tag und will es klein.
• Meta-Tag-Generator — Titel, Beschreibung, offene Grafik, Twitter-Karten und JSON-LD in einem Durchgang. Ich habe dies gebaut, weil ich bei jedem Projekt die gleichen vierzehn Tags von Hand geschrieben habe.

Was verwende ich für Dateien - Bilder, PDFs, alles andere?

Die Bildwerkzeuge laufen alle über die Canvas-API des Browsers, was bedeutet, dass ein 4-MB-PNG niemals Ihre Maschine verlässt. Das ist nicht Marketing; es ist genau das, was passiert, wenn die Verarbeitung ein <canvas> und keine Post-Anfrage.

• Bildkompresse — Qualitätsschieber, Live-Größe-Auslesung. Die meisten Screenshots, die ich versende, fallen um 70–85% ohne sichtbaren Unterschied. siehe das Bildkomprimierungshandbuchdrohen
• Bildgröße ändern — Genaue Abmessungen oder Prozentsatz, Seitenverhältnis gesperrt.
• Formatkonverter - PNG / JPEG / WEBP / AVIF. WebP ist die Standardeinstellung, die ich jetzt versende.
• Hintergrundentferner — Läuft das Segmentierungsmodell im Browser. Es ist das einzige Werkzeug, bei dem ich die erste Ladung bemerke.
• QR-Generator — URLs, WLAN-Anmeldeinformationen, vCards. Ich habe den ISO / IEC 18004-Encoder für diesen von Hand, Fehlerkorrektur und alles geschrieben, was entweder eine großartige Nutzung eines Wochenendes oder eines schrecklichen war.
• Passwort-Generator - Verwendet crypto.getRandomValues(), nicht Math.random()drohen Diese Unterscheidung ist wichtiger als der Längenschieber.

Und ein paar Kleinigkeiten, die ich gebaut habe, weil ich sie einmal brauchte und dann immer wieder brauchte: Einheitenkonverter, Prozentualer Rechner, Datumsdifferenz, Text zur Handschriftdrohen

Der breitere Bildsatz befindet sich in der Anleitung für Bildwerkzeuge, und PDFs bekommen ihre eigene Behandlung in der PDF-Tools-Anleitungdrohen

Wie knüpfen diese in der realen Arbeit an?

Individuell spart jedes Werkzeug eine Minute. Die Verbundenheit erfolgt, wenn Sie sie anketten. Hier ist eine tatsächliche Sequenz von vor einer Woche, bei der eine Integration intermittierend zurückgegeben wurde:

1. Kopieren Sie die fehlgeschlagene Anfrage Authorization Kopfball. Auf den Punkten aufteilen, Segment zwei in die Base64-Konverterdrohen lesen expdrohen
2. exp ist ein Unix-Zeitstempel. in das Zeitstempelkonverterdrohen Es lief 41 Sekunden vor dem Anforderung ab.
3. Das ist ein Uhrverzerrungsproblem, kein Auth-Problem. Überprüfen Sie den Aktualisierungs-Cron mit dem Cron Parser — Es wurde alle 60 Minuten das Token für einen Token mit einer 60-minütigen TTL aktualisiert. Keine Marge. Rennzustand.
4. Ändern Sie den Cron auf 50 Minuten. fertig

Vier Werkzeuge, vielleicht drei Minuten, und die Antwort war eine Änderung um ein Zeichen zu einem Cron-Ausdruck. Die Alternative - das Hinzufügen von Protokollierung, das Umsetzen und das Warten auf die Wiederaufnahme - war ein halber Tag.

Die andere Kette, die ich ständig leite, ist der Inhalt einer: Entwurf → Wortzähler → Schneckengenerator → Bildkompresse Für das Headerbild → Meta-Tag-Generator → Veröffentlichen.

Warum ist "Klientenseite" eigentlich wichtig?

Vor allem wegen der Story-Token-Geschichte oben in diesem Beitrag. Aber lassen Sie mich eher auf die Behauptung als auf die Hand eingehen, da "Privacy-First" ein Satz ist, der von jeder Bedeutung abgeleitet wurde.

Wenn ein Tool clientseitig ist, wird die Datei oder die Zeichenfolge, die Sie einfügen, von JavaScript behandelt, das auf Ihrem Tab ausgeführt wird. Es geht in eine Variable in den Speicher Ihres Browsers und kommt dadurch wieder heraus. Es gibt keine fetch(), nein FormData, kein Upload. Sie können dies in etwa zehn Sekunden selbst überprüfen: Öffnen Sie DevTools, gehen Sie auf die Registerkarte Netzwerk, fügen Sie etwas in jedes Werkzeug auf toolz.dev ein und beobachten Sie, wie nichts passiert. Das ist der ganze Beweis. Wenn eine Netzwerkanforderung ausgelöst wird, wenn Sie auf "Konvertieren" klicken, befinden sich Ihre Daten auf dem Server eines anderen.

Was das Sie konkret einkauft:

• Sie können Geheimnisse einfügen. Staging-Tokens, interne API-Antworten, Kunden-CSV. Es geht nirgendwo hin.
• Es ist schnell. Keine Rundreise. A 5 MB JSON-Dateiformate in der Zeit, die der Browser benötigt, um es zu analysieren.
• Keine Dateigröße Decke Jenseits Ihres eigenen RAM.
• Keine Ratengrenze, Weil es keinen Server gibt, der Sie begrenzen kann.

Der Kompromiss ist real und ich werde ihn nennen: Heavy Work (ein 200-MB-Video, ein OCR-Pass über 500 Seiten) ist in einem Browser wirklich langsamer als auf einem Server mit einer GPU. Client-Seite ist die richtige Standardeinstellung, keine universelle Antwort.

Häufig gestellte Fragen

Sind diese Entwicklerproduktivitätstools tatsächlich kostenlos?

Ja – Nein Konto, keine Nutzungsbegrenzung, keine Testversion, die abläuft. Die Werkzeuge laufen auf Ihrer Maschine, was bedeutet, dass sie mich effektiv nichts pro Nutzung kosten, was bedeutet, dass es nichts zu messen gibt.

Benötige ich ein Konto, um sie zu verwenden?

kein . Öffnen Sie ein Werkzeug, verwenden Sie es, schließen Sie die Registerkarte. Es gibt keine Anmeldewand, und da die Verarbeitung clientseitig ist, gibt es keine Sitzung, an die Ihre Daten überhaupt angehängt werden können.

Ist es sicher, sensible Daten wie API-Schlüssel oder Token einzufügen?

Ja - und Sie können es bestätigen, anstatt mir zu vertrauen. Öffnen Sie die Registerkarte "DevTools-Netzwerk" Ihres Browsers, fügen Sie sie ein und achten Sie auf ausgehende Anfragen. Es gibt keine. Das einzige, was ich immer noch vermeiden würde, auch hier, ist das Einfügen von a Erzeugung Geheimtipp: Nicht drehen – nicht wegen des Tool, sondern weil Zwischenablagen, Bildschirmfreigaben und Browsererweiterungen alle echte Angriffsflächen sind.

Funktionieren diese Tools offline?

Die Seite muss einmal geladen werden. Danach funktionieren die meisten Tools weiter, wenn Ihre Verbindung unterbrochen wird, da sich das JavaScript, das die Arbeit erledigt, bereits auf Ihrem Tab befindet. Laden Sie die Seite offline neu und Sie erhalten nichts.

Wie vergleichen sich diese mit CLI-Tools wie JQ oder OpenSSL?

verschiedene Jobs. CLI gewinnt für alles, was mit Skripten, wiederholten oder in CIs versehen ist - es ist zusammensetzbar und reproduzierbar. Browsertools gewinnen für einmalige Aufgaben, alles, was von einer visuellen Vorschau (Regex, Farbverläufe, Farben, Bildqualität) profitiert, und Maschinen, auf denen Sie keine Software installieren können. Ich benutze beide täglich und denke nicht, dass es ein Wettbewerb ist.

Welche Tools sollte ich zuerst mit einem Lesezeichen versehen?

Wenn Sie Code schreiben: JSON Formatter, Timestamp Converter, Regex Tester, Base64 Converter. Wenn Sie Inhalt schreiben: Wortzähler, Slug-Generator, Bildkomprimierung. Wenn Sie Frontend tun: Farbauswahl, Gradientengenerator, Meta-Tag-Generator. Lesezeichen als Ordner und klicken Sie mit der mittleren Maustaste auf den Ordner, um sie alle gleichzeitig zu öffnen.

Funktionieren die Tools auf dem Handy?

Sie reagieren und funktionieren, aber ich werde ehrlich sein - ich habe sie für eine Tastatur und ein breites Ansichtsfenster entworfen. Einfügen- und Kopieraufgaben sind auf einem Telefon in Ordnung. Alles, was ein Farbspektrum oder eine Regex-Probe betrifft, wird ein Kampf sein.

Gibt es eine API für diese Tools?

Derzeit nicht. Alles ist clientseitig, was im Grunde im Widerspruch zu einer serverseitigen API steht. Für die programmatische Verwendung sind die zugrunde liegenden Operationen alle eine Bibliothek, die Sie bereits schreiben - in welcher Sprache Sie bereits schreiben - json_encode, base64_decode, preg_match, und so weiter.

Was sind die besten kostenlosen Online-Tools für Entwickler?

Es hängt von Ihrer Arbeit ab, aber ein solider Kern umfasst Formatierung und Inspektion (JSON Formatter, Base64 Converter), Zeit und Text (Zeitstempelkonverter, Wortzähler, Slug-Generator), Musterarbeit (Regex-Tester) und Medien (Bildkomprimierung, Farbauswahl). Toolz.dev hält mehr als 600 davon an einem Ort, alles kostenlos und clientseitig. Das beste Werkzeug ist normalerweise das, das bereits in einer Registerkarte geöffnet ist, wenn Sie die Reibung treffen.

Kann ich diese Entwicklertools verwenden, ohne etwas zu installieren?

Ja - es gibt nichts zu installieren und keine Erweiterung hinzuzufügen. Jedes Tool ist eine Webseite, die in Ihrem Browser seine Logik ausführt. Sie öffnen also eine URL und beginnen mit der Arbeit an jedem Betriebssystem. Sobald die Seite geladen ist, funktioniert sie auch dann, wenn Ihre Verbindung abfällt.

Die Kurzversion

Die Produktivität der Entwickler ist kein großes Freischalten. Es ist das Entfernen von hundert kleinen Reibungen: die Nutzlast, die Sie nicht lesen können, den Zeitstempel, den Sie nicht analysieren können, die Regex, die Sie erraten, den Screenshot, der 4 MB beträgt, wenn es 400 KB betragen sollte. Keiner von diesen Einzelnen ist einen Blog-Beitrag wert. Insgesamt sind sie der größte Unterschied zwischen einem Tag, an dem Sie etwas versandt haben, und einem Tag, an dem Sie beschäftigt waren.

Alles hier ist bei toolz.dev, kostenlos, in Ihrem Browser, mit Ihren Daten auf Ihrem Computer. Beginnen Sie mit dem JSON-Formater - Wenn Sie nur einen Tab aus diesem Beitrag nehmen, lohnt sich dies bis zur Mittagszeit.