Il y a des années, mon & quot ;dev tools" ; dossier de signets comportait une vingtaine d'entrées, chacune un site Web à usage unique différent, chacune avec sa propre disposition publicitaire, 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 API de mise en scène dans l'une d'elles 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 à des sites d'outils aléatoires et j'ai commencé à construire 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 tools" ; 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 que de pad the count Ils sont regroupés ici par le travail que vous faites : mise en forme des données, wrangling text, écriture de CSS, prepping images, expédition du référencement, et les tâches de sécurité et d'encodage entre les deux Tout est gratuit, n'a besoin d'aucun 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 battements de rétroaction instantanés se souvenant du 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 énorme nombre de " ; gratuit en ligne" ; les outils téléchargent tout ce que vous collez sur un serveur pour le traiter. C'est bien pour un échantillon public et un véritable problème pour un jeton de production, un enregistrement 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 seule raison de les conserver dans un groupe d'onglets au lieu de les afficher.
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 cheval de bataille - collez une réponse API minifiée et obtenez une sortie en retrait et lisible avec l'erreur de syntaxe localisée lorsque le JSON n'est pas valide. Quand vous avez 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 pièges YAML silencieux - onglets en indentation, touches en double et surprises de type coercition qui tournent version: 1.10 dans le numéro 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 le découvrez exp vous avez juré que tout allait bien est en fait dans le passé Atteignez-vous pour lui au lieu d'un décodeur générique, car les JWT utilisent base64url (RFC 4648 §5), pas la base standard64, et une plaine Convertisseur de base64 est le bon outil pour tout le reste - En-têtes d'authentification 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 gradients linéaires et radiaux et le CSS de production de mains en arrière - aucune supposition 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 se paie Noyau Web Vitals. 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 couleur - rapide et privé, excellent sur des fonds plats et honnête quant à ses limites 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, description, ouvrir le graphique, et les balises de carte Twitter, et 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 | Risqué - 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ù le traitement a lieu ; pour un secret de production, cela compte énormément. Construire toute la boîte à outils côté client signifie que je n'ai jamais besoin de demander " ; est-ce le site sûr pour coller ceci 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 principale Les outils traitent tout côté 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 de cinquante pour le moment, 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 rempli - 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 - le traitement d'images volumineux en particulier - sont plus rapides et plus confortables sur le bureau, mais les outils eux-mêmes fonctionnent dans un sens ou dans l'autre.
Ces outils fonctionnent-ils hors ligne ?
Surtout oui. Parce que chaque outil fonctionne en JavaScript dans votre navigateur, un outil continue de fonctionner sans connexion une fois sa page chargée - utile sur un avion ou un réseau défectueux. Il suffit d'être en ligne pour ouvrir un outil la première fois ; après cela, 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 la traiter et renvoie le résultat La sortie peut paraître identique, mais seuls les outils côté client conservent un jeton de production, un fichier privé ou un enregistrement client sur quelqu'un d'autre et le serveur n°39 ; 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 ponctuelles et visuelles - formater un blob, décoder un jeton, regarder un diff, construire un gradient - elles sont souvent plus rapides que de se souvenir de l'équivalent en ligne de commande Pour un travail scripté et reproductible, vous voudrez toujours votre terminal En pratique, ils s'assoient côte à côte : lancez la requête dans votre client habituel, puis collez la sortie dans ceux-ci 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
Un développeur Web moderne' ; s toolkit n'est pas une grande application - c'est une douzaine de petits outils pointus que vous recherchez sans réfléchir Le piège est de les disperser sur une douzaine de sites Web sommaires qui téléchargent vos données pour les traiter Le correctif est de garder ceux en qui vous avez confiance dans un seul groupe d'onglets, tous fonctionnant localement, tous gratuits, tous à une frappe de distance.
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.
