Herramientas de productividad para desarrolladores: los 40 que abro en realidad todas las semanas

Mantengo una ventana del navegador abierta en mi segundo monitor que no es más que pestañas de utilidad. Formateador JSON, convertidor de marca de tiempo, probador de expresión regular, generador de hash. Ha estado allí durante años, a través de los lanzamientos de WP Adminify, a través de proyectos del lado de Laravel, a través de cada sesión de depuración nocturna donde llega una carga payhook minificada y necesito ver lo que realmente contiene.

Durante mucho tiempo, esas pestañas apuntaron a siete sitios web diferentes. Algunos estaban bien. Algunas eran granjas publicitarias que cargaban mi carga útil en un servidor del que nunca había oído hablar. Uno de ellos, I' No voy a nombrarlo - pegé un JWT de puesta en escena antes de que la idea me alcanzara: Esa ficha acaba de pasar por el cable a la caja de otra persona. Era una ficha de puesta en escena, nada quemado, pero la sensación se quedó. Construí Toolz.dev en parte porque quería mi propia tira de pestañas y en parte porque nunca quería volver a cometer ese error en particular.

Así que esta es una lista de 500 herramientas extraídas de un directorio. Es el set en el que realmente se vive Toolz.dev en este momento, unos 40 de ellos, organicé la forma en que los uso: por el momento de la jornada laboral en el que busco uno. Cada uno se ejecuta en tu navegador. Nada carga. No hay cuenta.

TL;Dr: Los cinco que más abro, por una milla: Formateador JSON Para respuestas de API ilegibles, Convertidor de marca de tiempo Para log forense, Probador de expresión regular Para el trabajo de patrones, Convertidor Base64 Para JWT y URI de datos, y generador de UUID para sembrar datos de prueba. Todo lo siguiente se ejecuta en el lado del cliente: su carga útil nunca sale de la pestaña. Si solo marca una cosa, marque el formateador JSON.

¿Por qué no usar el CLI?

Pregunta justa, y uso el CLI. jq Es mejor que cualquier herramienta web para secuencias de comandos. base64 -d es dos pulsaciones. Si una tarea va a un script de shell, pertenece a un script de shell.

Pero hay tres situaciones en las que una pestaña del navegador realmente gana, y después de una década de hacer esto, he dejado de sentirme culpable por ellas:

1. Bucles de retroalimentación visual. Regex es el obvio. Ver 14 coincidencias se ilumina en una muestra de texto real mientras escribes una actividad diferente a la de ejecutar grep -P y obtener un sí/no. Lo mismo para degradados y colores: no se puede mirar un código hexadecimal.
2. La máquina no es tuya. Laptop de cliente, máquina de trabajo bloqueada, escritorio de otra persona durante una sesión de emparejamiento. prohibido jq, sin derechos de instalación, sin tiempo.
3. La tarea es genuinamente única. No estoy escribiendo un script de Python para convertir un CSV a JSON. Voy a pegarlo, hacer clic y seguir con mi vida.

Aquí está la comparación honesta que le doy a un desarrollador junior preguntando cuál usar:

Esa última fila es la regla real que sigo. Si voy a hacer una cosa más de dos veces, va en un guión. Todo lo demás obtiene una pestaña.

¿Qué herramientas abro durante un mal día de API?

Este es el grupo que gana su mantenimiento. Una API de terceros se está portando mal, tiene una carga útil y debe comprenderla antes de poder arreglar nada.

Formateador JSON - el que I'd conservar si pudiera conservar solo uno

JSON minificado es ilegible y, peor aún, cuando es dar licencia El error del navegador le dice "token inesperado" y un desfase de carácter que no significa nada para un humano. los Formateador JSON bonito lo imprime con sangría real y apunta a la línea real que ' está roto. El noventa por ciento de las veces el culpable es una coma final, lo cual es legal en los objetos literales de JavaScript e ilegal en JSON, una distinción que me ha costado más horas de las que quiero sumar. Buceo más profundo: Cómo formatear JSON en línea.

Convertidor Base64: para JWT y URI de datos

Un JWT es tres segmentos Base64URL separados por puntos. Pega el del medio en el Convertidor Base64 y puede leer los reclamos (emisor, vencimiento, alcances) sin enviar el token a un decodificador de terceros. (Yo uso el Decodificador JWT cuando quiero analizar los tres segmentos a la vez, pero sigo buscando Base64 sin formato cuando una carga útil se ve rara y quiero ver los bytes.) El Unicode entendido y por qué btoa() se lanza sobre un emoji, está en el Guía de codificación Base64.

Convertidor de marca de tiempo - registro forense

1752278400. ¿Eso es ayer o 2029? los Convertidor de marca de tiempo gira Unix segundos, milisegundos y ISO 8601 en algo sobre lo que un humano puede razonar, en la zona horaria que te importa. Dos tercios de la depuración de mi incidente son marcas de tiempo alineadas de tres servicios que registraron cada uno en un formato diferente, y uno de ellos está en UTC mientras que los demás están en 't.

Validador YAML - porque la sangría soporta carga

Kubernetes manifiestos, acciones de GitHub, Docker-Compose. YAML es significativo en blanco y reinterpretará silenciosamente su intención en lugar de un error. los Validador YAM Captura el tab-vs-space y el no comillas no Que Yaml 1.1 analiza de manera útil como booleano false. (Sí, de verdad. El problema de Noruega es real: el código de país NO se convierte en false a menos que lo cite.)

JSON Diff - ¿Qué cambió realmente?

Dos respuestas de API, una en funcionamiento y otra no. Mirarlos uno al lado del otro en un editor de texto es un juego perdido. Diferencia de JSON Te muestra las tres claves que difieren e ignoran las 200 que no.

El resto del estante de depuración

• Formateador SQL- para la consulta de 90 líneas con cuatro uniones que alguien escribió en una línea.
• generador de hachas- MD5/SHA-1/SHA-256/SHA-512, principalmente para verificar una descarga o una clave de caché.
• analizador de cron- porque 0 */2 * * * y */2 * * * * difieren en un personaje y unas sesenta veces la carga.
• insegurizar- PHP serialize() salida de un wp_options Fila. Si alguna vez has depurado la configuración almacenada de un complemento de WordPress, sabes exactamente por qué existe esto.

¿Qué uso cuando estoy escribiendo código, no depurando?

Regex, sin adivinar

Escribo expresión regular en el Probador de expresión regular Antes de que toque una base de código. Pega una muestra realista, escribe el patrón, mira el punto destacado de los partidos. los Constructor de expresiones regulares es la otra mitad de esto - it's para cuando sabes lo que quieres en inglés y puedes't recuerda si es 's \b investigaciones operacionales \B. La hoja de trucos de patrón completo, además de la trampa de retroceso catastrófico que puede congelar un servidor con un cuantificador anidado, está en el Guía de constructor de expresiones regulares.

UUID para la siembra

Veinte filas de prueba, veinte identificaciones únicas, ahora mismo. generador de UUID lo hace v1, v4 y v7 al por mayor. Utilice v7 para nuevas claves primarias: it's ordenado por tiempo, por lo que su índice de árbol B no't se tritura con inserciones aleatorias. Aprendí que es una forma costosa y lo escribí en el Guía del generador de UUID.

Codificación, ambos sabores

Codificador de URL Para cadenas de consulta que contienen & y = y un espacio. Entidades HTML Por el momento necesitas mostrar <script> en una página como texto en lugar de como un informe de incidente. Estos dos son aburridos y los uso constantemente.

Discusión de formato

Los datos llegan en la forma incorrecta aproximadamente siempre. El conjunto de conversión cubre los movimientos que realmente hago:

• JSON a CSV- cuando una parte interesada solicita "los datos" y significa una hoja de cálculo. Los objetos anidados se aplanan en columnas de notación de puntos. Detalles en el Guía de JSON a CSV.
• CSV a JSON- al revés, para la siembra.
• JSON a YAM- por convertir una mancha de configuración en algo que un humano editará.
• XML a JSON- cada integración SOAP heredada, para siempre.
• traductor binario- texto ↔ binario/hex/decimal/octal. Principalmente para enseñanza y para el byte de protocolo impar.

Todo el estante de codificación, con el razonamiento detrás de cada uno, está en el Guía de herramientas de codificación.

¿Cuáles uso para texto y contenido?

Escribo mucho: documentos de complementos, registros de cambios, este blog. Estas son las herramientas entre redactar y publicar.

• Contador de palabras- palabras, caracteres, tiempo de lectura. También la forma más rápida de comparar una meta descripción con el presupuesto de 160 caracteres antes de que Google la trunca. Más en el Guía de contador de palabras.
• Convertidor de caja- camelCase, snake_case, kebab-case, PascalCase. Cambio el nombre de las variables en masa de esta manera con más frecuencia que cuando uso mi herramienta de refactorización editor's, lo cual es un poco vergonzoso pero cierto. Guía de conversión de cajas.
• generador de babosas- título de URL, con signos diacríticos manejados correctamente. Café Décor debería convertirse cafe-decor, no caf-dcor.
• Diferencia de texto- dos archivos de configuración, o dos versiones de un párrafo, uno al lado del otro.
• lorem ipsum- copia de marcador de posición para un diseño que aún no tiene contenido.
• Cuerda de marcha atrás- nicho, pero aparece en la preparación de la entrevista y en los controles palíndromos más que tú 'd piensa.

El conjunto de texto completo se cubre en el Guía de herramientas de texto.

¿Qué pasa con el diseño y el trabajo de frontend?

Soy un desarrollador que tiene que hacer que las cosas parezcan aceptables, no un diseñador. Ese es un trabajo específico, y estos tres lo hacen.

• selector de colores- HEX ↔ RGB ↔ HSL, con verificación de contraste para que no envíes 't envío 3:1 cuerpo de texto. HSL es el formato que hace que los estados flotantes sean una resta en lugar de una suposición. Tratamiento completo: Selector de color y guía de convertidor.
• Generador de gradiente- lineal, radial, cónico, con vista previa en vivo y CSS copiable. Escritura conic-gradient() Blind es un tipo especial de miseria. Guía del generador de gradiente CSS.
• Minifiero CSS y Minifiero HTML- por el momento necesitas alinear algo en un <style> Etiqueta y lo quiero pequeño.
• Generador de metaetique- titlu, descriere, Gráfico abierto, tarjetas de Twitter y JSON-LD en una sola pasada. Construí esto porque estaba escribiendo a mano las mismas catorce etiquetas en cada proyecto.

¿qué uso para archivos: imágenes, archivos PDF y todo lo demás?

Todas las herramientas de imagen se ejecutan a través de la API de lienzo del navegador, lo que significa que un PNG de 4 MB nunca sale de su máquina. Eso no es marketing; es justo lo que sucede cuando el procesamiento es un <canvas> Y no una solicitud de publicación.

• comprimir imagen- control deslizante de calidad, lectura de tamaño en vivo. La mayoría de las capturas de pantalla que envío caen 70-85% sin diferencia visible. Ver el Guía de compresión de imágenes.
• Cambiar tamaño de imagen- dimensiones exactas o un porcentaje, relación de aspecto bloqueada.
• Convertidor de formato- PNG/JPEG/WebP/AVIF. WebP es el valor predeterminado que envío ahora.
• Eliminador de fondo- ejecuta el modelo de segmentación en el navegador. It's la única herramienta donde noto la primera carga.
• Generador QR- URL, credenciales WiFi, vCards. Escribí el codificador ISO/IEC 18004 para este a mano, corrección de errores y todo, lo cual fue un gran uso de un fin de semana o terrible.
• generador de contraseñas- usos crypto.getRandomValues(), no Math.random(). Esa distinción importa más que el control deslizante de longitud.

Y algunas probabilidades y extremos los construí porque las necesitaba una vez y luego seguí necesitándolas: Convertidor de unidades, Calculadora de porcentaje, Diferencia de fecha, Texto a escritura a mano.

El conjunto de imágenes más amplio está en el Guía de herramientas de imagen, y los PDF reciben su propio tratamiento en el Guía de herramientas de PDF.

¿Cómo se encadenan estos en el trabajo real?

Individualmente cada herramienta ahorra un minuto. La composición ocurre cuando los encadenas. Aquí hay una secuencia real de hace una semana, depurando una integración que devolvía 401S de forma intermitente:

1. Copie la solicitud fallida'S Authorization cabecera Dividir en los puntos, pegar el segmento dos en el Convertidor Base64. interpretar exp.
2. exp es una marca de tiempo de Unix. en el Convertidor de marca de tiempo. Caducó 41 segundos antes de que se disparara la solicitud.
3. Ese es un problema de sesgo de reloj, no un problema de autenticación. Compruebe el cron de actualización con el analizador de cron- fue actualizar el token cada 60 minutos para un token con un TTL de 60 minutos. Sin margen. Condición de carrera.
4. Cambie el cron a 50 minutos. hecho

Cuatro herramientas, tal vez tres minutos, y la respuesta fue un cambio de un carácter a una expresión cron. La alternativa (agregar registro, volver a implementar, esperar a que se repita) era medio día.

La otra cadena que ejecuto constantemente es la de Contenido: Borrador → Contador de palabras → generador de babosas → comprimir imagen Para la imagen de encabezado → Generador de metaetique → Publicar.

¿Por qué es realmente importante el "lado del cliente"?

Debido a la historia de tokens de puesta en escena en la parte superior de esta publicación, en su mayoría. Pero permítanme ser preciso sobre la afirmación en lugar de ondulado, ya que "privacidad-primero" es una frase que se ha drenado de todo significado.

Cuando una herramienta está en el lado del cliente, el archivo o la cadena que pega se maneja con JavaScript que se ejecuta en su pestaña. Entra en una variable en la memoria de su navegador y, como resultado, vuelve a aparecer. no hay fetch(), no FormData, sin carga. Puede verificar esto usted mismo en unos diez segundos: abra DevTools, vaya a la pestaña Red, pegue algo en cualquier herramienta en Toolz.dev y vea que no suceda nada. Esa es la prueba completa. Si se activa una solicitud de red al hacer clic en "Convertir", sus datos están en el servidor de alguien.

Lo que te compra concretamente:

• Puedes pegar secretos. Tokens de puesta en escena, respuestas de API internas, CSV de cliente de un cliente. No va a ninguna parte.
• Es rápido. Sin viaje de ida y vuelta. Un archivo JSON de 5 MB en el tiempo que tarda el navegador en analizarlo.
• Sin techo de tamaño de archivo Más allá de su propia carnero.
• Sin límite de tarifas, Porque no hay ningún servidor que te limite.

La compensación es real y la nombraré: trabajo pesado (un video de 200 MB, un pase de OCR de más de 500 páginas) es realmente más lento en un navegador que en un servidor con una GPU. El lado del cliente es el valor predeterminado correcto, no una respuesta universal.

Preguntas frecuentes

¿Estas herramientas de productividad para desarrolladores son realmente gratuitas?

Sí, sin cuenta, sin límite de uso, sin prueba que expire. Las herramientas se ejecutan en su máquina, lo que significa que efectivamente no me cuestan nada por uso, lo que significa que no hay nada que medir.

¿Necesito una cuenta para usarlos?

prohibido Abra una herramienta, úsela, cierre la pestaña. No hay un muro de registro y, como el procesamiento está en el lado del cliente, no hay sesión para adjuntar sus datos en primer lugar.

¿Es seguro pegar datos confidenciales como claves API o tokens?

Para las herramientas del lado del cliente, sí, y puede confirmarlo en lugar de confiar en mí. Abra su navegador 's DevTools Network, pegue y esté atento a las solicitudes salientes. Hay 't cualquiera. Lo único que todavía evito en cualquier lugar, incluso aquí, es pegar un obra secreto que puedes 't rotar, no por la herramienta, sino porque los portapapeles, los espacios compartidos de pantalla y las extensiones del navegador son superficies de ataque reales.

¿Estas herramientas funcionan sin conexión?

La página tiene que cargarse una vez. Después de eso, la mayoría de las herramientas siguen funcionando si su conexión se cae, porque el JavaScript que hace el trabajo ya está en su pestaña. Vuelva a cargar la página sin conexión y no obtendrá nada.

¿Cómo se comparan estos con las herramientas de CLI como JQ o OpenSSL?

Diferentes trabajos. CLI gana por cualquier cosa escrita, repetida o en CI - it's componible y reproducible. Las herramientas del navegador ganan por tareas únicas, cualquier cosa que se beneficie de una vista previa visual (regex, gradientes, colores, calidad de imagen) y máquinas donde pueda 't instalar software. Utilizo tanto a diario como don't piénselo's una competencia.

¿Qué herramientas debo marcar primero?

Si escribe código: JSON formateador, conversor de marca de tiempo, comprobador de expresión regular, convertidor base64. Si escribe contenido: contador de palabras, generador de slug, comprimido de imagen. Si lo hace Frontend: Selector de Color, Generador de Gradientes, Generador de Meta Tag. Marque los como una carpeta y haga clic en la carpeta para abrirlos todos a la vez.

¿Las herramientas funcionan en el móvil?

Ellos're responsive y funcionan, pero I' Seré honesto: los diseñé para un teclado y una ventana gráfica amplia. Las tareas de pegar y copiar están bien en un teléfono. Cualquier cosa que involucre un espectro de colores o una muestra de expresiones regulares será una pelea.

¿Hay una API para estas herramientas?

Actualmente no. Todo está del lado del cliente por diseño, lo que está fundamentalmente en desacuerdo con una API del lado del servidor. Para uso programático, las operaciones subyacentes están a una llamada de biblioteca en cualquier idioma que usted 'ya está escribiendo - json_encode, base64_decode, preg_match, y así sucesivamente.

¿Cuáles son las mejores herramientas gratuitas en línea para desarrolladores?

Depende de su trabajo, pero un núcleo sólido cubre el formato y la inspección (formateador JSON, convertidor base64), tiempo y texto (convertidor de marca de tiempo, contador de palabras, generador de slug), trabajo de patrón (tester de expresiones regulares) y medios (comprimido de imagen, selector de color). Toolz.dev mantiene más de 600 de ellos en un solo lugar, todos gratuitos y del lado del cliente. La mejor herramienta suele ser la que ya está abierta en una pestaña cuando golpeas la fricción.

¿Puedo usar estas herramientas de desarrollador sin instalar nada?

Sí, no hay nada que instalar ni extensión que agregar. Cada herramienta es una página web que ejecuta su lógica en su navegador, por lo que abre una URL y comienza a trabajar en cualquier sistema operativo. Una vez que la página se ha cargado, sigue funcionando incluso si se corta la conexión.

la versión corta

La productividad del desarrollador no es un gran desbloqueo. Es la eliminación de cien pequeñas fricciones: la carga útil que no puedes leer, la marca de tiempo que no puedes analizar, la expresión regular que estás adivinando, la captura de pantalla que es 4 MB cuando debería ser de 400 KB. Ninguno de esos individualmente vale una publicación de blog. Colectivamente son la mayor parte de la diferencia entre un día en el que enviaste algo y un día en el que estabas ocupado.

Todo aquí está en Toolz.dev, gratis, en su navegador, con sus datos en su máquina. Comience con el Formateador JSON- si solo tomas una pestaña de esta publicación, esa ' es la que se amortiza sola a la hora del almuerzo.