Outils de productivité des développeurs : les 40 que j'ouvre réellement chaque semaine

Je garde une fenêtre de navigateur ouverte sur mon deuxième moniteur qui n'est rien d'autre que des onglets utilitaires. Formateur JSON, convertisseur de horodatage, testeur de regex, générateur de hachage. Il existe depuis des années, grâce aux versions de WP Adminify, à travers des projets parallèles Laravel, à travers chaque session de débogage de fin de soirée où une charge utile Webhook arrive minifiée et j'ai besoin de voir ce qu'il contient réellement.

Pendant longtemps ces onglets pointaient sur sept sites Web différents Certains allaient bien Certains étaient des fermes publicitaires qui ont téléchargé ma charge utile sur un serveur I&#39 ; n'avait jamais entendu parler de L'un d'eux - I&#39 ; ne va pas le nommer - j'ai collé une mise en scène dans JWT avant que la pensée ne me rattrape : Ce jeton vient de passer par-dessus le fil de la boîte de quelqu'un d'autre. C'était un signe de mise en scène, rien n'a brûlé, mais la sensation de se coincer. J'ai construit Toolz.dev en partie parce que je voulais ma propre bande de tabulation, et en partie parce que je n'ai plus jamais voulu refaire cette erreur.

Il ne s'agit donc pas d'une liste de 500 outils rayés d'un répertoire. C'est le décor qui est réellement en ligne Toolz.dev en ce moment - une quarantaine d'entre eux - ont organisé la façon dont je les utilise : au moment de la journée de travail où j'en cherche un Chacun s'exécute dans votre navigateur Rien ne télécharge Il n'y a pas de compte.

tl;dr : Les cinq que j'ouvre le plus, à un mile : Formateur JSON Pour les réponses API illisibles, Convertisseur d'horodatage Pour la forensic des journaux, testeur de regex Pour le travail de modèle, Convertisseur de base64 pour les JWT et les URI de données, et Générateur UUID pour les données de test d'ensemencement Tout ce qui se trouve ci-dessous fonctionne côté client - votre charge utile ne quitte jamais l'onglet Si vous ne marquez qu'une chose, marquez le formateur JSON.

Pourquoi ne pas simplement utiliser la CLI ?

question juste, et j'utilise la CLI. jq est meilleur que n'importe quel outil Web pour les scripts. base64 -d est deux frappes de clé. Si une tâche va dans un script shell, elle appartient à un script shell.

Mais il y a trois situations où un onglet de navigateur gagne vraiment, et après une décennie de faire cela, j'ai cessé de me sentir coupable à leur sujet :

1. Boucles de rétroaction visuelle. La regex est la plus évidente. Voir 14 correspondances s'allumer dans un exemple de texte réel lorsque vous tapez une activité différente de l'exécution grep -P et obtenir un oui/non. Idem pour les dégradés et les couleurs - vous ne pouvez pas regarder un code hexadécimal.
2. La machine n'est pas à vous. Ordinateur portable client, machine de travail verrouillée, bureau de quelqu'un d'autre lors d'une session de jumelage. non jq, aucun droit d'installation, pas de temps.
3. La tâche est véritablement unique. Je n'écris pas de script python pour convertir un CSV en JSON. Je vais le coller, cliquer et continuer ma vie.

Voici la comparaison honnête que je donnerais à un développeur junior demandant à quoi utiliser :

Cette dernière ligne est la règle réelle que je suis. Si je vais faire plus de deux fois, ça va dans un scénario. Tout le reste reçoit un onglet.

Quels outils dois-je ouvrir lors d'une mauvaise journée d'API ?

C'est le cluster qui gagne son don. Une API tierce se comporte mal, vous avez une charge utile et vous devez la comprendre avant de pouvoir réparer quoi que ce soit.

Formatteur JSON - celui que I&#39 ; je garderais si je ne pouvais en garder qu'un

JSON minifié est illisible, et pire, quand il est nul L'erreur du navigateur vous indique "token inattendu" et un décalage de caractères qui ne signifie rien pour un humain. le Formateur JSON pretty-imprime avec une indentation réelle et pointe sur la ligne réelle que&#39 ; s cassé Quatre-vingt-dix pour cent du temps le coupable est une virgule traînante, ce qui est légal dans les littéraux d'objets JavaScript et illégal dans JSON - une distinction qui m'a coûté plus d'heures que je ne veux ajouter Plonge plus profond : Comment formater JSON en ligne.

Base64 Converter - pour JWT et URI de données

Un JWT est composé de trois segments Base64URL séparés par des points. Collez le milieu dans le Convertisseur de base64 et vous pouvez lire les réclamations - émetteur, expiration, portées - sans expédier le jeton à un décodeur tiers. (J'utilise le Décodeur JWT quand je veux que les trois segments soient analysés en même temps, mais j'atteins toujours la Base64 brute lorsqu'une charge utile semble bizarre et que je veux voir les octets.) Le Unicode je t'ai eu, et pourquoi btoa() jette sur un emoji, est dans le Guide d'encodage Base64.

Convertisseur d'horodatage - log forensics

1752278400. C'est hier ou 2029 ? le Convertisseur d'horodatage tourne Unix secondes, millisecondes, et ISO 8601 dans quelque chose sur lequel un humain peut raisonner, dans le fuseau horaire qui vous tient à cœur Les deux tiers de mon débogage incident sont des estampilles horaires de trois services qui se sont chacun connectés dans un format différent, et l'un d'eux est en UTC tandis que les autres sont & #39 ; t.

Validateur YAML - parce que l'indentation est porteuse

Kubernetes Manifestes, actions GitHub, Docker-Compose. YAML est significatif pour les espaces blancs et il réinterprétera silencieusement votre intention plutôt qu'une erreur. le Validateur de YAML Attrape le tab-vs-space et le non-quoted no que Yaml 1.1 s'analyse utilement comme booléen false. (Oui, vraiment. Le problème de la Norvège est réel : le code du pays NO se transforme false à moins que vous ne le citez.)

JSON Diff - qu'est-ce qui a réellement changé ?

Deux réponses API, une fonctionnante et non. Les regarder côte à côte dans un éditeur de texte est un jeu perdant. Diff JSON Vous montre les trois clés qui diffèrent et ignorent les 200 qui ne le font pas.

Le reste de l'étagère de débogage

• Formateur SQL- pour la requête de 90 lignes avec quatre jointures que quelqu'un a écrite sur une ligne.
• générateur de hasch- MD5/SHA-1/SHA-256/SHA-512, principalement pour vérifier un téléchargement ou une clé de cache.
• analyseur- parce que 0 */2 * * * et */2 * * * * diffèrent par un caractère et une soixantaine de fois la charge.
• annuler la série- PHP serialize() sortie d'un wp_options Rangée. Si vous avez déjà débogué les paramètres stockés d'un plugin WordPress, vous savez exactement pourquoi cela existe.

Qu'est-ce que j'utilise lorsque j'écris du code, sans le déboguer ?

Regex, sans deviner

J'écris Regex dans le testeur de regex avant de toucher une base de code. Collez un échantillon réaliste, écrivez le modèle, regardez le point culminant des matchs. le Regex Builder est-ce que l'autre moitié de ceci - it&#39 ;s pour quand vous savez ce que vous voulez en anglais et can&#39 ; ne vous souvenez pas si c'est &#39 ;s \b ou \B. La feuille de triche de motifs complets, ainsi que le piège de retour catastrophique qui peut geler un serveur avec un quantificateur imbriqué, est dans le Guide de construction de Regex.

UUID pour le semis

Vingt lignes de test, vingt identifiants uniques, en ce moment. Générateur UUID fait v1, v4 et v7 en masse Utilisez v7 pour les nouvelles clés primaires - it&#39 ; s ordonnées dans le temps, donc votre index B-tree ne le fait pas&#39 ; je l'ai appris de cette manière coûteuse et je l'ai écrit dans le Guide du générateur UUID.

Encodage, les deux saveurs

Encodeur d'URL Pour les chaînes de requête contenant & et = Et un espace. Entités HTML Pour le moment, vous devez afficher <script> sur une page sous forme de texte plutôt que de rapport d'incident. Ces deux-là sont ennuyeux et je les utilise constamment.

Format de querelle

Les données arrivent à peu près toujours dans la mauvaise forme. Le jeu de conversions couvre les mouvements que je fais réellement :

• JSON vers CSV- lorsqu'une partie prenante demande &quot ; le data&quot ; et signifie une feuille de calcul. Les objets imbriqués sont aplatis dans des colonnes de notation par points. Détails dans le Guide JSON vers CSV.
• CSV à JSON- l'inverse, pour l'ensemencement.
• JSON vers Yaml- pour transformer un blob de configuration en quelque chose qu'un humain modifiera.
• XML vers JSON- chaque intégration SOAP héritée, pour toujours.
• traducteur binaire- texte ↔ binaire/hex/décimal/octal. Principalement pour l'enseignement et pour l'octet protocolaire impair.

L'ensemble de l'étagère de codage, avec le raisonnement derrière chacun, est dans le Guide des outils de codage.

Lesquels dois-je utiliser pour le texte et le contenu ?

J'écris beaucoup - plugin docs, changelogs, ce blog Ce sont les outils entre draft et publish.

• compteur de mots- mots, caractères, temps de lecture Aussi le moyen le plus rapide de vérifier une méta description par rapport au budget de 160 caractères avant que Google ne la tronque Plus dans le Guide du compteur de mots.
• Convertisseur de boîtier- camelCase, snake_case, kebab-case, PascalCase. Je renomme les variables en bloc de cette façon plus souvent que j'utilise mon outil de refactor editor&#39 ; s, ce qui est légèrement embarrassant mais vrai. Guide du convertisseur de cas.
• générateur de limace- titre de l'URL, avec les signes diacritiques gérés correctement. Café Décor devrait devenir cafe-decor, pas caf-dcor.
• Diff de texte- deux fichiers de configuration, ou deux versions d'un paragraphe, côte à côte.
• Lorem Ipsum- copie d'espace réservé pour une mise en page qui n'a pas encore de contenu.
• Chaîne inversée- niche, mais cela apparaît dans la préparation des entretiens et dans les chèques palindrome plus que vous et le numéro 39 ; je pense.

Le jeu de textes complets est couvert dans le Guide des outils de texte.

Qu'en est-il du design et du travail frontal ?

Je suis un développeur qui doit rendre les choses acceptables, pas un designer. C'est un travail spécifique, et ces trois-là le font.

• cueillette de couleurs- HEX ↔ RVB ↔ HSL, avec vérification du contraste pour que vous expédiiez et n°39 ; t du corps de texte 3 :1. HSL est le format qui fait des états de vol stationnaire une soustraction au lieu d'une supposition Traitement complet : Guide de sélection de couleurs et de convertisseur.
• Générateur de gradient- linéaire, radial, conique, avec un aperçu en direct et un CSS copiable. Écriture conic-gradient() L'aveugle est un type de misère tout particulier. Guide du générateur de dégradé CSS.
• CSS Minifier et minificateur HTML- pour le moment, vous devez intégrer quelque chose dans un <style> taguez et voulez-le petit.
• Générateur de balises- titre, description, ouvrir le graphique(traduction), les cartes Twitter et JSON-LD en un seul passage. J'ai construit cela parce que j'écrivais manuellement les mêmes quatorze balises sur chaque projet.

Qu'est-ce que j'utilise pour les fichiers - Images, PDF, tout le reste ?

Les outils d'image sont tous exécutés via l'API Canvas du navigateur, ce qui signifie qu'un PNG de 4 Mo ne quitte jamais votre machine. Ce n'est pas du marketing, c'est exactement ce qui se passe lorsque le traitement est un <canvas> Et pas une demande de poste.

• Compresse d'images- curseur de qualité, lecture en direct. La plupart des captures d'écran que j'expédie tombent 70 % sans différence visible. Voir le Guide de compression d'images.
• Redimensionnement d'images- dimensions exactes ou pourcentage, rapport hauteur/largeur verrouillé.
• Convertisseur de format- PNG/JPEG/WebP/AVIF. WebP est la valeur par défaut que j'expédie maintenant.
• dissolvant d'arrière-plan- exécute le modèle de segmentation dans le navigateur It&#39 ; est le seul outil où je remarque le premier chargement.
• Générateur QR- URL, identifiants WiFi, vCards. J'ai écrit l'encodeur ISO/IEC 18004 pour celui-ci à la main, correction d'erreurs et tout, ce qui était soit une grande utilisation d'un week-end, soit un terrible.
• générateur de mots de passe- utilisations crypto.getRandomValues(), pas Math.random(). Cette distinction compte plus que le curseur de longueur.

Et quelques bric-à-brac que j'ai construits parce que j'en avais besoin une fois, puis j'en ai eu besoin : Convertisseur d'unités, Calculateur de pourcentage, Date de différence, Texte à l'écriture manuscrite.

L'ensemble d'images plus large est dans le Guide des outils d'image, et les PDF reçoivent leur propre traitement dans le Guide des outils PDF.

Comment ces chaînes se joignent-elles dans un travail réel ?

Chaque outil permet d'économiser une minute. La composition se produit lorsque vous les enchaînez. Voici une séquence réelle d'une semaine, débogage d'une intégration qui renvoyait 401 s par intermittence :

1. Copiez la demande d'échec Authorization en-tête. fendez sur les points, collez le segment deux dans le Convertisseur de base64. lire exp.
2. exp est un horodatage Unix. dans le Convertisseur d'horodatage. Il a expiré 41 secondes avant la mise en œuvre de la demande.
3. C'est un problème d'obstruction d'horloge, pas un problème d'authentification. Vérifiez le rafraîchissement cron avec le analyseur- c'était rafraîchir le jeton toutes les 60 minutes pour un jeton avec un TTL de 60 minutes. Aucune marge. Condition de course.
4. Changez le cron en 50 minutes. Terminé.

Quatre outils, peut-être trois minutes, et la réponse était un changement d'un caractère vers une expression cron L'alternative - ajouter une journalisation, redéployer, attendre qu'elle se reproduise - était une demi-journée.

L'autre chaîne que je dirige constamment est celle du contenu : Draft → compteur de mots → générateur de limace → Compresse d'images Pour l'image d'en-tête → Générateur de balises → Publier.

Pourquoi "le côté client" est-il vraiment important ?

En raison de l'histoire de la mise en scène en haut de cet article, principalement. Mais permettez-moi d'être précis sur la revendication plutôt que de "la confidentialité" est une phrase qui a été drainée de tout sens.

Lorsqu'un outil est côté client, le fichier ou la chaîne que vous collez est gérée par JavaScript en cours d'exécution dans votre onglet. Il entre dans une variable dans la mémoire de votre navigateur et revient en conséquence. il n'y a pas fetch(), non FormData, pas de téléchargement. Vous pouvez le vérifier vous-même en une dizaine de secondes : ouvrez DevTools, accédez à l'onglet Réseau, collez quelque chose dans n'importe quel outil sur Toolz.dev et ne regardez rien. C'est la preuve. Si une demande de réseau se déclenche lorsque vous cliquez sur "Convertir", vos données sont sur le serveur de quelqu'un.

Ce que cela vous achète concrètement :

• Vous pouvez coller des secrets. Jetons de staging, réponses d'API internes, CSV client. Ça ne va nulle part.
• C'est rapide. Pas de voyage aller-retour. Un format de fichier JSON de 5 Mo dans le temps nécessaire au navigateur pour l'analyser.
• Pas de plafond de taille de fichier au-delà de votre propre RAM.
• Pas de limite de tarif, Parce qu'il n'y a pas de serveur pour vous limiter.

Le compromis est réel et je l'appellerai : un travail lourd (une vidéo de 200 Mo, un passage OCR sur 500 pages) est vraiment plus lent dans un navigateur que sur un serveur avec un GPU. Le côté client est le bon défaut, pas une réponse universelle.

Questions fréquentes

Ces outils de productivité des développeurs sont-ils réellement gratuits ?

Oui - pas de compte, pas de plafond d'utilisation, pas d'essai qui expire Les outils fonctionnent sur votre machine, ce qui signifie qu'ils ne me coûtent effectivement rien par utilisation, ce qui signifie là&#39 ; n'a rien à mesurer.

Ai-je besoin d'un compte pour les utiliser ?

non . Ouvrez un outil, utilisez-le, fermez l'onglet. Il n'y a pas de mur d'inscription, et parce que le traitement est côté client, il n'y a pas de session à laquelle j'attache vos données en premier lieu.

Est-il sûr de coller des données sensibles comme des clés d'API ou des jetons ?

Pour les outils côté client, oui - et vous pouvez le confirmer plutôt que de me faire confiance Ouvrez votre navigateur&#39 ; s DevTools Network tab, collez, et surveillez les demandes sortantes Il y a n'importe qui&#39 ; n'importe laquelle La seule chose que I&#39 ; d éviter encore n'importe où, y compris ici, c'est de coller un production secret vous pouvez&#39 ; t tourner - pas à cause de l'outil, mais parce que les presse-papiers, les partages d'écran et les extensions de navigateur sont tous de véritables surfaces d'attaque.

Ces outils fonctionnent-ils hors ligne ?

La page doit être chargée une fois. Après cela, la plupart des outils continuent de fonctionner si votre connexion s'abaisse, car le Javascript qui effectue le travail est déjà dans votre onglet. Rechargez la page lorsque vous déconnectez et vous n'obtiendrez rien.

Comment se comparent-ils aux outils CLI comme JQ ou OpenSSL ?

Différents emplois. CLI gagne pour tout ce qui est scénarisé, répété ou en CI - it&#39 ; s composable et reproductible Les outils de navigateur gagnent pour les tâches ponctuelles, tout ce qui bénéficie d'un aperçu visuel (regex, dégradés, couleurs, qualité d'image), et les machines où vous pouvez installer le logiciel &#39 ; t. J'utilise à la fois quotidiennement et don&#39 ; t think it&#39 ; s'agit d'un concours.

Quels outils dois-je mettre en signet en premier ?

Si vous écrivez du code : formateur JSON, convertisseur de horodatage, testeur de regex, convertisseur base64. Si vous écrivez du contenu : compteur de mots, générateur de slug, compresse d'image. Si vous faites du frontend : sélecteur de couleurs, générateur de dégradé, générateur de balises méta. Marquez-les comme un dossier et cliquez sur le milieu pour les ouvrir tous en même temps.

Les outils fonctionnent-ils sur mobile ?

Ils&#39 ; sont réactifs et ils fonctionnent, mais I&#39 ; sera honnête - je les ai conçus pour un clavier et une large fenêtre d'affichage Les tâches de collage et de copie sont correctes sur un téléphone Tout ce qui implique un spectre de couleurs ou un échantillon de regex va être un combat.

Existe-t-il une API pour ces outils ?

Pas actuellement Tout est côté client par conception, ce qui est fondamentalement en contradiction avec une API côté serveur Pour une utilisation programmatique, les opérations sous-jacentes sont toutes un appel de bibliothèque dans n'importe quelle langue que vous et #39 ; écrivez déjà - json_encode, base64_decode, preg_match, et ainsi de suite.

Quels sont les meilleurs outils en ligne gratuits pour les développeurs ?

Cela dépend de votre travail, mais un noyau solide couvre le formatage et l'inspection (formatateur JSON, convertisseur de base64), l'heure et le texte (convertisseur d'horodatage, compteur de mots, générateur de slug), travail de modèle (testeur de regex) et média (compresseur d'images, sélecteur de couleurs). Toolz.dev en conserve plus de 600 surfaces, tous gratuits et côté client. Le meilleur outil est généralement celui déjà ouvert dans un onglet lorsque vous frappez la friction.

Puis-je utiliser ces outils de développement sans rien installer ?

Oui - il n'y a rien à installer et aucune extension à ajouter Chaque outil est une page Web qui exécute sa logique dans votre navigateur, donc vous ouvrez une URL et commencez à travailler sur n'importe quel système d'exploitation Une fois la page chargée, elle continue de fonctionner même si votre connexion tombe.

la version courte

La productivité des développeurs n'est pas un gros déverrouillage. C'est la suppression d'une centaine de petites frictions : la charge utile que vous ne pouvez pas lire, l'horodatage que vous ne pouvez pas analyser, la regex que vous devinez, la capture d'écran qui est de 4 Mo alors qu'elle devrait être de 400 Ko. Aucun de ceux-ci ne vaut individuellement un article de blog. Collectivement, ils font la plus grande différence entre une journée où vous avez expédié quelque chose et une journée où vous étiez occupé.

Tout ici est à Toolz.dev, gratuit, dans votre navigateur, avec vos données restant sur votre machine. Commencez par le Formateur JSON- si vous ne prenez qu'un seul onglet de ce message, celui-là et le numéro 39 ; est celui qui se paie à l'heure du déjeuner.