Herramientas de Desarrollador
Un conjunto de utilidades cotidianas para desarrolladores — convertir colores, generar hashes criptográficos, trabajar con timestamps Unix y decodificar JWTs.
Tareas rápidas
Un clic abre la herramienta ya preparada para la tarea.
Herramientas para Desarrolladores - Colores, Hashes, Timestamps y JWT
Esta es la categoría de las pequeñas conversiones que interrumpen el trabajo de verdad. Un diseño le entrega un color HEX y el CSS quiere HSL. Una línea de log lleva un timestamp de Unix y necesita saber qué hora era en su zona horaria. Una API devuelve un token y hay que ver qué contiene. Una página de descarga publica un SHA-256 y toca comprobar el archivo. Ninguna es difícil; todas son molestas a mano, y las cuatro funcionan aquí sin cuenta.
Qué hay en esta categoría
| Herramienta | Qué hace | Cuándo usarla |
|---|---|---|
| Conversor de Color | Convierte entre HEX, RGB y HSL | Una paleta está en una notación y su hoja de estilos quiere otra |
| Generador de Hash | Calcula MD5, SHA-1, SHA-256 y SHA-512 de un texto o un archivo | Verificar una descarga, comparar dos archivos o generar una clave de caché |
| Conversor de Timestamp | Convierte timestamps de Unix a fechas legibles y al revés, entre zonas horarias | Un log, una columna de base de datos o una respuesta de API tiene un número donde debería haber una fecha |
| Decodificador JWT | Separa un JSON Web Token y muestra su cabecera, su payload y su caducidad | Está depurando autenticación y necesita ver los claims |
| Eliminador de CSS no utilizado | Conserva solo el CSS que usa una página, a partir de una exportación Coverage de Chrome o del HTML | Un tema o un maquetador carga mucho más CSS del que la página necesita |
| Formateador de código | Formatea o minifica HTML, CSS, JavaScript y SQL, con dialectos SQL y detección automática del lenguaje | Un bundle, una plantilla o una consulta llegó en una sola línea ilegible, o un fragmento tiene que ser lo más pequeño posible |
| Explicador de expresiones cron | Lee una programación cron en lenguaje claro, campo a campo, con sus próximas ejecuciones en hora local o en UTC | Una tarea se ejecuta a la hora equivocada, o necesita asegurarse de lo que hace una línea de crontab antes de desplegarla |
| Calculadora de subredes | Red, broadcast, rango de hosts, máscaras y tipo de dirección para IPv4 e IPv6, y división de una red en subredes | Escribe una regla de firewall, un plan de VPC o la configuración de un router, y el rango tiene que ser exacto |
| Analizador de user agent | Lee el navegador, el motor, el sistema operativo y el dispositivo de cualquier cadena user agent, e identifica los rastreadores de buscadores y de IA | Una línea de log, un informe de analítica o un informe de error muestra un user agent que necesita entender |
| JSON a tipos | Convierte una muestra de JSON en tipos de TypeScript, Go, Python, C# o Rust, o en un JSON Schema | Una API devuelve JSON y su código necesita modelos tipados para él |
Notaciones de color y por qué conviene conocer HSL
HEX y RGB describen exactamente lo mismo con distinta caligrafía: #4F46E5 es rgb(79, 70, 229), tres canales de 0-255 escritos en hexadecimal en vez de en decimal. Convertir entre ellos es mecánico.
HSL es un modelo genuinamente distinto, y por eso se gana su sitio. Describe un color como tono (posición en la rueda de color, 0-360), saturación (cuán vivo, 0-100%) y luminosidad (0-100%). La ventaja práctica: oscurecer un color un 10% para un estado hover es un solo cambio en un número, y construir una paleta de tonos emparentados consiste en mantener fijos tono y saturación y recorrer la luminosidad. Hacer lo mismo en HEX significa recalcular tres canales y adivinar.
El contraste es la otra razón. El texto necesita una relación de contraste de al menos 4,5:1 contra su fondo para cumplir WCAG AA en tamaños normales. La luminosidad en HSL predice mucho mejor dónde está usted que mirar fijamente un código hexadecimal.
Hashes: para qué sirven y para qué no
Una función hash convierte cualquier entrada en una huella de longitud fija. La misma entrada da siempre la misma salida; cambiar un solo carácter da una completamente distinta; y no se puede retroceder del hash a la entrada. Eso hace de los hashes la herramienta correcta para verificar integridad y la equivocada para guardar contraseñas.
| Algoritmo | Salida | Estado |
|---|---|---|
| MD5 | 128 bits | Roto para seguridad. Se pueden fabricar colisiones a propósito. Válido como suma de verificación sin fines de seguridad o clave de caché |
| SHA-1 | 160 bits | Roto desde 2017. Aún aparece en sistemas antiguos y en los IDs de objeto de Git; no lo elija para nada nuevo |
| SHA-256 | 256 bits | El estándar actual para verificar archivos, firmas y certificados |
| SHA-512 | 512 bits | La misma familia con un resumen mayor, a menudo más rápido en hardware de 64 bits |
El uso cotidiano es verificar una descarga: el sitio publica un SHA-256, usted calcula el hash del archivo recibido con el generador de hash, y las dos cadenas coinciden carácter por carácter o no coinciden. Detecta igual de bien una descarga truncada que un espejo manipulado.
Para lo que los hashes no sirven es para contraseñas. Un SHA-256 simple de una contraseña se ataca a miles de millones de intentos por segundo en hardware corriente. Guardar contraseñas exige una función lenta, con sal y diseñada para ello - bcrypt, scrypt o Argon2 -, cara a propósito. Si está hasheando una contraseña con algo de la tabla de arriba, eso es un fallo. El generador de hash tiene una pestaña bcrypt justo para esto: crea un hash bcrypt con el coste que usted elija y comprueba una contraseña contra uno guardado, y la página de bcrypt la abre directamente.
Timestamps de Unix y la confusión de zonas horarias
Un timestamp de Unix cuenta segundos desde la medianoche UTC del 1 de enero de 1970. No tiene zona horaria, y precisamente por eso lo usan los sistemas: es un instante inequívoco y cualquier lenguaje puede convertirlo a hora local para mostrarlo. Un número de diez dígitos son segundos; uno de trece son milisegundos, que es lo que devuelve Date.now() en JavaScript y una causa muy frecuente de fechas que aterrizan en 1970 o en el año 55000.
El conversor de timestamp va en ambos sentidos y muestra el resultado en UTC junto a su hora local, que suele ser la comparación que de verdad necesita al leer un log escrito en un servidor de otra región. Dos fechas que conviene conocer: 2147483647 es el último segundo que cabe en un timestamp de 32 bits con signo, en enero de 2038, y 0 es la propia época: un timestamp de 0 o una fecha del 1 de enero de 1970 casi siempre significa que un valor nunca se estableció.
Leer un JWT
Un JSON Web Token son tres segmentos Base64 seguros para URL separados por puntos: una cabecera que dice qué algoritmo lo firmó, un payload de claims y una firma. El decodificador JWT lo separa y muestra los dos primeros como JSON legible, con exp e iat convertidos a fechas, que normalmente es toda la pregunta cuando una petición está siendo rechazada.
Dos cosas conviene dejar claras. Primera: el payload no está cifrado. Cualquiera que tenga el token puede leer todos sus claims, así que un JWT no es sitio para nada privado. Segunda: decodificar no es verificar. Leer los claims le dice lo que el token afirma, no si la firma es válida. Eso solo puede responderlo el servidor que tiene la clave, y ninguna herramienta de navegador debería pedirle que pegue su secreto de firma para averiguarlo.
Como un token es una credencial viva mientras siga vigente, importa dónde lo pega. Este decodificador funciona íntegramente en su navegador: JavaScript analiza el token en su propia máquina y no se envía a ninguna parte, algo que puede confirmar en el panel de red.
Categorías relacionadas
- Herramientas de codificación - debajo de un JWT hay Base64 seguro para URL, y saberlo explica la mayoría de los fallos al decodificar.
- Generadores - crean los identificadores y secretos que estas herramientas inspeccionan después.
- Herramientas de texto - formatee el JSON que sale de un payload decodificado.
- Herramientas de imagen - convierta recursos mientras avanza en la misma tarea de diseño.