Il y a des années, mon dossier de "dev tools" comportait une vingtaine d'entrées, chacune un site Web à usage unique différent, chacun avec sa propre mise en page, sa propre bannière de cookies et - c'est la partie qui m'a finalement dérangé - son propre serveur sur lequel mes données étaient discrètement téléchargées. J'ai collé un jeton d'API de staging dans l'un d'eux pour le décoder, et à mi-chemin, j'ai pensé : je n'ai aucune idée de ce que ce site fait avec cette chaîne. C'était le jour où j'ai cessé de faire confiance aux sites d'outils aléatoires et j'ai commencé à créer toolz.dev, où chaque outil s'exécute dans votre navigateur et rien que vous collez ne quitte l'onglet.
C'est la boîte à outils qui en est sortie. Pas un "top 600 outils" Listicle — Toolz.dev a un peu plus de cinquante outils en ce moment, et je préfère vous montrer ceux qu'un développeur Web en activité ouvre chaque semaine plutôt que de compenser le nombre. Ils sont regroupés ici par le travail que vous faites : façonner les données, agiter du texte, écrire des CSS, préparer des images, expédier le référencement et les tâches de sécurité et d'encodage entre les deux. Tout est gratuit, sans compte et traite localement.
tl;dr : Gardez un groupe d'onglets de navigateur ouvert pendant que vous créez. Pour les données : Formateur JSON, Diff JSON, Validateur de YAML, Visionneuse CSV. Pour les jetons de débogage : Décodeur JWT, Convertisseur de base64, Convertisseur d'horodatage. Pour regex : testeur de regex. Pour CSS : Générateur de gradient, cueillette de couleurs, CSS Minifier. Pour les images : redimensionner, compresser, Convertisseur de format. Pour le référencement : Générateur de balises, Ouvrir un aperçu du graphique. Tout côté client, tout est gratuit.
Pourquoi s'embêter avec les outils de navigateur lorsque vous avez un terminal ?
Question juste - je vis dans un terminal aussi. La réponse honnête est que pour les tâches ponctuelles, à regarder, un outil visuel avec des retours instantanés, en se souvenant de la jq incantation ou le openssl drapeau. Lorsqu'une API me remet une goutte miniifiée à 2 h du matin, je ne veux pas écrire un script de mise en forme, je veux le coller et le voir. Lorsque j'ai besoin de regarder si deux réponses JSON diffèrent, un différentiel rouge/vert est plus rapide que de passer en revue quoi que ce soit.
Mais le facteur décisif n'est pas la commodité, c'est Où vont les données. Un grand nombre d'outils "gratuits en ligne" téléchargent tout ce que vous collez sur un serveur pour le traiter. C'est très bien pour un échantillon public et un problème réel pour un jeton de production, un dossier client ou un actif inédit. Chaque outil de ce guide s'exécute entièrement dans votre navigateur. Le traitement se produit en Javascript sur votre machine et il n'y a aucune étape de téléchargement à craindre. Cette combinaison, visuelle et instantanée, plus privée par défaut, est la raison de les conserver dans un groupe d'onglets au lieu de les détruire.
Données de mise en forme : JSON, YAML, CSV, XML
C'est la catégorie que j'utilise le plus, car la plupart des développements Web sont le déplacement de données structurées entre les systèmes et l'emboutissant à l'éclair lorsqu'il se casse.
le Formateur JSON Est le bourreau de travail — Collez une réponse API minime et obtenez une sortie lisible et lisible avec l'erreur de syntaxe située lorsque le JSON est invalide. Quand tu as besoin de savoir Ce qui a changé Entre deux charges utiles, la Diff JSON Compare structurellement plutôt que ligne par ligne, de sorte que les clés réorganisées ne créent pas de différences fantômes. Pour le côté config du travail, le Validateur de YAML Attrape les traps de Yaml silencieux - onglets dans Indentation, Duplicate Keys et The Type-Coercion Surprises qui tournent version: 1.10 dans le chiffre 1.1 — avant qu'un fichier Kubernetes ou CI ne fasse exploser un déploiement.
Les données restent rarement dans une même forme. le JSON vers CSV et CSV à JSON Les convertisseurs se déplacent entre la sortie de l'API et les tableurs, le Visionneuse CSV Rend un CSV désordonné comme un vrai tableau afin que vous puissiez réellement le lire, et le XML vers JSON et JSON vers Yaml Les outils couvrent les sauts de format que vous accédez à l'aide des API et des fichiers de configuration. Si vous voulez la version plus profonde de cette catégorie, le Guide complet des outils JSON Parcoure tout le flux de travail.
Débogage de jetons et temps : JWT, Base64, horodatage
Auth et Heure sont les "Bugs" qui ont l'air corrects. Les bugs viennent à cacher, et ils sont presque toujours résolus par Regarder les données au lieu de relire la logique.
le Décodeur JWT divise un jeton en en-tête, charge utile et signature et vous montre les réclamations, c'est ainsi que vous découvrez que exp Vous avez juré que c'était bien, c'est en fait dans le passé. Atteignez-le au lieu d'un décodeur générique, car les JWT utilisent Base64URL (RFC 4648 §5), pas la base64 standard et un plain Convertisseur de base64 est le bon outil pour tout le reste - en-têtes de base, URI de données, charges utiles codées. le Convertisseur d'horodatage Transforme les secondes unix et les millisecondes en dates réelles (le mélange de secondes contre millisecondes est le bogue d'authentification le plus courant que je vois), et le Convertisseur de fuseau horaire et Date de différence Les outils gèrent le "quelle heure était-ce pour l'utilisateur ?" et "combien de temps entre ces deux questions". J'ai rédigé tout le flux de débogage dans le Guide des outils de débogage de l'API Si vous voulez les histoires de guerre.
Regex sans les conjectures
Les expressions régulières sont une fois écrites, déboguer pour toujours. le testeur de regex Vous permet de créer un modèle par rapport à un exemple de texte avec la mise en évidence des correspondances en direct, afin que vous voyiez ce qui correspond au moment où vous le tapez au lieu de déployer un validateur et d'espérer. Si vous préférez assembler un motif à partir de blocs de construction, le Regex Builder s'approche de l'autre sens. Dans tous les cas, le point est le même : testez le modèle par rapport aux chaînes réelles avant qu'il ne protège une forme ou n'analyse un journal. le Guide de construction de Regex Couvre les modèles courants qui méritent d'être mémorisés.
Cellules de texte : comptage, boîtier, écart, espace réservé
Les corvées de cordes peu glamour s'additionnent. le compteur de mots Vérifie le contenu par rapport aux limites de longueur (méta descriptions, tweets, en-têtes). le Convertisseur de boîtier Bascule entre CamelCase, Snake_Case, Kebab-Case et Pascalcase — inestimable lorsque vous portez des noms de variables sur une base de code. le Diff de texte Compare deux blocs et met en évidence chaque modification, qui est une révision de code en dehors de l'audit Git et de la configuration.
Pour la construction et le prototypage spécifiquement : le Générateur de Lorem IPSUM Remplit les maquettes avec le droit quantité du texte de l'espace réservé (il existe un Guide complet de dimensionnement du texte d'espace réservé), le générateur de limace Transforme les titres en chemins d'URL propres et les Chaîne inversée L'outil gère l'étrange ponctuelle. le Guide des outils de texte les lie ensemble.
CSS et couleur
Le polonais frontal vit ici. le Générateur de gradient Vous donne un éditeur visuel pour les dégradés linéaires et radiaux et les mains de production de retours CSS - aucune devinette aux angles et aux arrêts (le Guide de dégradé va plus loin). le cueillette de couleurs Convertit entre HEX, RGB et HSL et c'est là que je vérifie le contraste avant qu'une couleur ne finisse par échouer à un audit d'accessibilité ; le Guide de sélection de couleurs Couvre les mathématiques de contraste. Quand il est temps d'expédier, le CSS Minifier et minificateur HTML Dépouillez les espaces blancs et les commentaires pour raser les octets du fil.
Images pour le web
Les images sont généralement la chose la plus lourde sur une page, donc cette catégorie est rentable dans les principaux éléments vitaux du Web. le Redimensionnement d'images Les outils définissent des dimensions exactes (et il y a un piège à rétine qui vaut la peine d'être connu, couvert dans son guide), le Compresseur d'images Réduit la taille du fichier tout en maintenant la qualité, et le Convertisseur de format d'image Se déplace entre PNG, JPG et WebP afin que vous serviez le bon format pour le travail. le dissolvant d'arrière-plan est un dissolvant de clé de couleur - rapide et privé, idéal sur les arrière-plans plats et honnête sur ses limites dans ses guide. le Guide des outils d'image est le pilier de cet ensemble.
Expédition : référencement, partage et sécurité
Le dernier kilomètre avant la mise en ligne d'une page. le Générateur de balises Construit votre titre, la description, le graphique ouvert et les balises de la carte Twitter, ainsi que le Ouvrir un aperçu du graphique Montre à quoi ressemblera le lien lorsqu'il sera partagé avant de découvrir les difficultés sur les réseaux sociaux. le Générateur robots.txt et Constructeur UTM Gérer les règles d'exploration et le suivi des campagnes, et le Générateur QR Fait un code numérisé pour l'impression ou les diapositives. Du côté de la sécurité, l'hygiène, le générateur de mots de passe et générateur de hasch couvrir de solides secrets et des contrôles d'intégrité, et le Générateur UUID Spit les identifiants des données de test et des clés de base de données.
Outils côté client ou outils basés sur le téléchargement : la comparaison qui compte
| toolz.dev (côté client) | "Outil en ligne gratuit" typique | |
|---|---|---|
| Où le traitement se produit | dans votre navigateur | sur un serveur distant |
| Vos données (tokens, fichiers, code) | Ne quitte jamais l'onglet | Téléchargé dans un tiers |
| Inscription/Connexion | nul | Souvent requis pour les fonctionnalités complètes |
| Limites d'utilisation | Aucun sur les outils | Souvent plafonné ou payant |
| allure | Instantané, pas de trajet aller-retour | Dépend du téléchargement + serveur |
| Fonctionne avec des données sensibles | Oui, par conception | Risque : vous faites confiance à leur serveur |
| Nombre d'outils | Un peu plus de cinquante ans, organisés | Généralement un outil par site |
La ligne qui me tient le plus à cœur est la deuxième. Pour un échantillon public, peu importe où la transformation se produit, pour un secret de production, cela importe énormément. Construire toute la boîte à outils côté client signifie que je n'ai jamais à demander "est-ce le site sûr pour coller cela dans" - ils le sont tous.
Comment j'utilise réellement ceci : enchaîner les outils
La plupart des tâches réelles sont un petit pipeline, pas un simple clic :
Déboguer une réponse à une API : collez-la dans le Formateur JSON, décodez n'importe quel jeton avec le Décodeur JWT, tournez le exp réclamer à une date avec le Convertisseur d'horodatage, puis comparez la réponse interrompue à une réponse interrompue avec un Diff JSON.
Préparation d'une image de héros : dissolvant d'arrière-plan S'il a besoin d'une découpe, alors Redimensionnement d'images Pour les dimensions exactes, puis Compresseur d'images Pour atteindre votre budget de poids de page, convertir en WebP avec le Convertisseur de format En sortant.
Expédition d'une nouvelle page : générer des balises avec le Générateur de balises, vérifiez la carte de partage dans le Ouvrir un aperçu du graphique, et confirmez que votre copie correspond à la compteur de mots.
Gardez les cinq ou six que vous touchez quotidiennement dans un groupe d'onglets épinglés. Les autres sont une recherche dans la palette ⌘K lorsque vous en avez besoin.
Questions fréquentes
Ces outils de développement Web sont-ils vraiment gratuits ?
Oui. Chaque outil sur Toolz.dev est gratuit sans niveau Premium, sans portail de fonction et sans limite d'utilisation sur les outils eux-mêmes. Aucun compte n'est requis pour les utiliser.
Dois-je créer un compte ou me connecter ?
non . Ouvrez un outil et utilisez-le immédiatement. Il n'y a pas d'inscription et, comme les outils s'exécutent dans votre navigateur, il n'y a rien à synchroniser avec un profil.
Est-il sûr de coller des jetons, des clés ou des données privées ?
Oui, et c'est la décision de conception de base. Les outils traitent tout ce qui concerne le client en JavaScript, donc ce que vous collez - un JWT, une réponse API, une image inédite - est géré sur votre machine et n'est pas téléchargé sur un serveur. C'est la principale raison de les utiliser sur des alternatives basées sur le téléchargement.
Combien d'outils dispose de Toolz.dev ?
Un peu plus d'une cinquantaine de personnes à l'heure actuelle, couvrant les catégories de données, de texte, de codage, de CSS, de couleur, d'image, de référencement, de sécurité et de calculatrice. Je préfère développer délibérément l'ensemble plutôt que de revendiquer un nombre qui est principalement du remplissage - chaque outil répertorié ici existe et fonctionne aujourd'hui.
Les outils fonctionnent-ils sur mobile ?
Oui, les interfaces sont réactives et fonctionnent dans les navigateurs mobiles. Les travaux plus lourds – en particulier le traitement de grande image – sont plus rapides et plus confortables sur le bureau, mais les outils eux-mêmes fonctionnent dans les deux sens.
Ces outils fonctionnent-ils hors ligne ?
Surtout oui. Étant donné que chaque outil s'exécute en JavaScript dans votre navigateur, un outil continue de fonctionner sans connexion une fois sa page chargée, utile sur un plan ou un réseau floconneux. Il vous suffit d'être en ligne pour ouvrir un outil la première fois, après quoi le traitement lui-même n'a besoin d'aucun serveur.
Quelle est la différence entre les outils en ligne côté client et côté serveur ?
Un outil côté client fait son travail dans votre navigateur, de sorte que les données que vous collez ne quittent jamais votre machine. Un outil côté serveur télécharge votre entrée sur un ordinateur distant pour le traiter et renvoie le résultat. La sortie peut sembler identique, mais seuls les outils côté client conservent un jeton de production, un fichier privé ou un enregistrement client sur le serveur de quelqu'un d'autre, c'est pourquoi chaque outil ici est construit côté client.
Puis-je les utiliser à la place de mon terminal ou de mon outillage IDE ?
Pour les tâches visuelles ponctuelles - formater une blob, décoder un jeton, regarder un diff, créer un dégradé - elles sont souvent plus rapides que la mémoire de la ligne de commande. Pour un travail scripté et répétable, vous voudrez toujours votre terminal. En pratique, ils sont assis côte à côte : lancez la demande dans votre client habituel, puis collez la sortie dans ces derniers pour la lire.
Quels outils dois-je mettre en signet en premier ?
Commencez par ceux que vous toucherez quotidiennement : le Formateur JSON, Décodeur JWT, testeur de regex, Convertisseur d'horodatage, et quels sont ceux des outils CSS ou Image qui correspondent à votre travail. Ajoutez le reste au fur et à mesure que vous atteignez les tâches qui en ont besoin.
arrivée
Une boîte à outils moderne pour les développeurs Web n'est pas une grande application - ce sont une douzaine de petits outils pointus que vous atteignez sans réfléchir. Le trap les disperse sur une douzaine de sites Web sommaires qui téléchargent vos données pour les traiter. Le correctif consiste à garder ceux auxquels vous faites confiance dans un seul groupe d'onglets, tous fonctionnant localement, tous gratuits, tous d'un seul coup de clé.
c'est ce que toolz.dev IS : un peu plus de cinquante de ces outils, construits côté client, afin que vos jetons et fichiers restent les vôtres. Épingler le Formateur JSON, le testeur de regex, et le Convertisseur d'horodatage Aujourd'hui, et ajoutez le reste selon le besoin de travail. Gratuit pour toujours, privé par conception.
