Snippets prácticos de CSS y JavaScript, casos de uso, trucos de UX — con código listo para pegar en JustZix.
Ningún artículo coincide con tu búsqueda.
Cuatro pequeños retoques de UX del editor de reglas que, juntos, cambian el día a día: un badge con el conteo de líneas en las pestañas CSS/JS/Acciones (v3.2.82), una scrollbar de 10 → 14 px (v3.2.80), un límite de etiqueta de acción de 8 → 12 caracteres (v3.2.81) y una barra de herramientas de carpeta reorganizada (v3.2.80).
Renderizar 700 entradas de log en la Output Console pasó de ~5 segundos a ~100 milisegundos (v3.2.30). La primera ventana de la extensión en un shadow DOM — un paso hacia aislar los estilos de la página de la UI de la extensión, más una mejora seria de rendimiento.
Un menú desplegable en la cabecera de la ventana del AI Helper (v3.2.81) con dos opciones: copiar toda la conversación como Markdown, o copiar la última entrada de la API con el contexto completo de la conversación. El flujo «mover una idea de un dominio a otro» dejó de requerir copiar y pegar manual.
El indicador de contexto en el AI Helper (v3.2.71–73) ya no estima — ahora usa los valores reales de tokens desde la API del proveedor (Anthropic, OpenAI, Gemini), desglosados en input fresco / caché / output. Coste real de IA sin calculadoras.
La ventana del AI Helper (v3.2.76) se renderiza como un shadow root, así que el CSS de la página ya no puede colarse en la UI de la extensión. Funciona igual en play.google.com, Notion y cualquier dominio con estilos agresivos.
El popup browser-action y todos los modales de la extensión por fin tienen modo oscuro completo. Un nuevo tema auto sigue al sistema operativo. El selector de tema se ha rehecho como 3 botones (claro / oscuro / auto) en lugar de un solo botón cíclico.
Una reconstrucción completa de la pestaña Network en la Output Console: dos campos de dominios con múltiples entradas separadas por «|», Alt+clic para añadir al instante, deslizadores exponenciales con campos de entrada, columnas redimensionables en DataLayer y acortado de URL largas.
La × en TEMP CSS/JS solía borrar el contenido — corregido en v3.2.2. Además, un nuevo botón «vaciar» con deshacer (v3.2.3). Dos intenciones, dos botones.
La antigua «ayuda de la API» bajo Ctrl+Shift+H se ha convertido en una guía completa de dos columnas sobre la interfaz de la extensión dentro de la página: 8 secciones, funciona globalmente en cada página y en 8 idiomas. Desde v3.0.0 y v3.0.1.
Tres nuevos atajos a partir de la v3.2.4 abren el panel de edición de JustZix en una ventana aparte del navegador, seleccionan automáticamente la primera regla activa en la página actual y aterrizan en la pestaña CSS, JS o Acciones. Los mismos atajos dentro del panel cambian de pestaña.
JustZix incluye ahora dos motores de tutorial integrados: uno en el panel de edición y otro directamente en la página. 19 pasos del escenario «Tu primer proyecto», fragmentos de código copiables, 8 idiomas, Esc lo cierra.
Los sitios con la CSP más estricta — Facebook, X, GitHub — bloquean la inyección común de JS. JustZix atraviesa ese muro con una estrategia de tres capas: chrome.userScripts, new Function, blob-script. Cero configuración en el 99% de los casos y una autorización única para el resto.
Reglas listas para usar para Slack, Trello, Discord, Outlook, Notion, GitHub, GitLab, Telegram y Gmail — densidad, barras laterales y un modo de enfoque.
Reglas listas para usar para Wikipedia, Medium, BBC, Goodreads, Hacker News y Stack Overflow — ancho de lectura, tipografía y modos oscuro y sepia.
Reglas listas para usar para Netflix, Disney+, Spotify, SoundCloud, Twitch, Vimeo y YouTube — detén los tráileres que se reproducen solos y recorta las filas de recomendaciones.
Reglas listas para usar para Amazon, eBay, AliExpress, Etsy y Allegro — oculta las ofertas patrocinadas, los contadores de presión y los carruseles de venta cruzada, y resalta el precio.
Reglas CSS y JS listas para usar para YouTube, Reddit, X, Instagram, Facebook, TikTok, Threads, Pinterest y LinkedIn — oculta el feed «Para ti», las sugerencias y los contadores.
Una nueva opción por conjunto de reglas evita que el JavaScript se vuelva a ejecutar al navegar por una SPA — se acabaron los listeners duplicados y los intervalos en paralelo.
La pestaña Network de la Output Console tiene un conjunto completo de filtros: por dominio (Dominios+/Dominios-), por tamaño y por tiempo — además de añadir dominios con un clic.
Todos los atajos de teclado integrados de JustZix en un solo lugar: editores de código, la consola, la ventana Output, la pestaña Network, las ventanas TEMP y los atajos de acciones.
Una guía práctica para diagnosticar y corregir las diferencias entre dispositivos en JustZix usando el historial de sincronización y la resincronización completa.
La pestaña Estado del panel de sincronización de JustZix ahora muestra un historial de sincronización, el estado de tu biblioteca en la cuenta y un botón de resincronización completa.
JustZix detecta la navegación SPA mediante pushState — las reglas, barras de acciones y ventanas emparejadas a una ruta URL se activan sin recargar la página manualmente.
La sincronización en la nube de JustZix ahora cubre tu tema, el idioma de la interfaz y las estadísticas de uso sumadas entre todos los dispositivos emparejados.
Cuatro herramientas nuevas de AI Helper: el asistente prueba el código en ventanas TEMP, lee los errores de la consola de la página y crea no solo reglas, sino barras de acciones y botones.
Abre el panel de edición de JustZix y te saluda el Panel de control — mosaicos con el inventario de tu biblioteca, estadísticas de uso, estado de la extensión y atajos al trabajo reciente.
Remodela el panel de Booksy con JustZix — un calendario más denso, citas de hoy y sin confirmar resaltadas, promos ocultas y un modo enfoque sin distracciones.
Remodela Allegro con JustZix — oculta los listados patrocinados, consigue una cuadrícula de resultados más densa, resalta el envío gratis y Smart, y quita banners y carruseles.
Oculta los banners de Pro y las promos de plantillas, agranda el lienzo del editor y despeja los paneles laterales de Canva con unas pocas reglas CSS y JS en JustZix.
Oculta las publicaciones promocionadas, los módulos "Personas que quizás conozcas" y la columna de noticias de la derecha. Un feed de LinkedIn más tranquilo con unas pocas reglas CSS y JS.
Densifica las tablas de productos y pedidos, resalta el stock bajo y los pedidos sin pagar, oculta los banners de venta — reglas CSS y JS listas para el panel de Shopify.
Oculta los avisos de venta de plugins, despeja el menú de administración, ensancha el editor de entradas y fija el cuadro de Publicar — reglas CSS y JS listas para wp-admin.
Despeja y remodela Gmail, Google Calendar, Docs y Sheets: oculta los paneles de Meet y promociones, compacta la bandeja, ensancha el panel de lectura y añade un modo enfoque.
Remodela Notion a tu medida: páginas a todo el ancho, un modo enfoque, fuentes personalizadas, bloques de aviso con estilo, filas de base de datos a rayas y cabeceras de tabla fijas.
Una guía práctica para trasladar userscripts a reglas de JustZix: cómo se compara el modelo de reglas asociadas por URL y cuándo usar cada herramienta.
Limpia los parámetros de seguimiento de los enlaces, neutraliza los píxeles de seguimiento y ordena las URL compartidas con reglas defensivas de JustZix listas para copiar.
Ensancha las vistas de código, fija las cabeceras de archivo y domina el ruido de la interfaz de GitHub con reglas CSS prácticas de JustZix creadas para desarrolladores que leen mucho código.
Oculta publicaciones promocionadas, contenido sugerido y cebo de interacción en Reddit y X con reglas CSS de JustZix limitadas que puedes copiar y pegar.
Oculta los Shorts, elimina el desorden de la pantalla final y fija una velocidad de reproducción por defecto en YouTube con reglas CSS y JS de JustZix listas para copiar.
Una guía práctica para mejorar las imágenes en cualquier página: zoom al pasar el ratón, forzar la carga inmediata y añadir un botón de descarga de un clic con JustZix.
Sustituye los reproductores de vídeo personalizados rotos u ocultos por la barra de control nativa del navegador usando una regla JavaScript y CSS de JustZix.
Una regla de JustZix que pausa y silencia el vídeo y el audio de reproducción automática en el momento en que empieza, para que las páginas se abran en silencio sin sonido sorpresa.
Usa la API de imagen en imagen con una regla de JustZix para sacar cualquier vídeo a una ventana flotante, incluso en sitios que ocultan el botón nativo.
Añade controles de velocidad de reproducción personalizados a cada elemento de vídeo con una regla JavaScript de JustZix, incluidos atajos de teclado y una insignia de velocidad flotante.
Convierte scripts puntuales útiles en botones de acción de JustZix: copia una página como markdown, quita los parámetros de seguimiento y abre los enlaces externos en pestañas nuevas.
Asigna teclas al desplazamiento, la navegación y los clics en sitios que carecen de atajos. Una regla JavaScript de JustZix convierte cualquier página en una aplicación manejada por teclado.
Deja de hacer clic en "mostrar más" y "página siguiente". Una regla JavaScript de JustZix puede expandir las secciones colapsadas y cargar cada página por ti.
Las ventanas de consentimiento de cookies interrumpen cada visita. Usa una pequeña regla JavaScript de JustZix para descartarlas automáticamente en el momento en que aparecen.
Algunos sitios bloquean la selección de texto, copiar y el menú contextual. Reactiva todo ello con tres breves fragmentos de JavaScript y una regla CSS.
Un pequeño fragmento de JavaScript de JustZix que mide cualquier artículo y muestra una insignia flotante de tiempo de lectura y recuento de palabras.
Quita las columnas de recomendaciones, las barras fijas y los hilos de comentarios tóxicos de cualquier artículo con unas pocas reglas de display de JustZix bien dirigidas.
Cambia las páginas blancas deslumbrantes por superficies de lectura cálidas y de poco brillo con recetas CSS para tonos sepia, crema y papel suave.
Por qué la longitud de línea hace o deshace la legibilidad, y las reglas CSS exactas para bloquear cualquier artículo a una medida cómoda.
Convierte cualquier página de artículo desordenada en una vista de lectura limpia y tranquila usando un puñado de reglas CSS inyectadas por JustZix.
Da estilo a las barras de desplazamiento y crea temas de alto contraste o escala de grises para cualquier sitio web con reglas CSS de JustZix. Recetas prácticas centradas en la accesibilidad.
Haz legibles los sitios web apretados ajustando el tamaño de fuente, la altura de línea y el ancho del contenido con reglas CSS de JustZix. Recetas para copiar para una página más tranquila.
Sustituye tipografías feas o difíciles de leer en cualquier sitio usando reglas CSS de JustZix. Recetas para fuentes del sistema, fuentes web personalizadas y monoespaciada para código.
Recolorea enlaces, botones y resaltados en cualquier sitio con reglas CSS de JustZix. Recetas prácticas para anular los colores de acento sin tocar el marcado.
Convierte cualquier sitio web brillante en un tema oscuro cómodo con unas pocas reglas CSS de JustZix. Recetas para copiar de modos oscuros basados en filtros y nativos.
Quita las publicaciones patrocinadas, el contenido sugerido y las barras laterales ruidosas de tus feeds sociales con un conjunto completo de recetas CSS y JS de JustZix listas para copiar.
Las barras de navegación fijas se comen tu pantalla y ocultan el texto cuando saltas a anclas. Recupera el espacio con estas recetas CSS de JustZix listas para copiar.
Oculta anuncios de banner, espacios publicitarios y bloques de contenido patrocinado usando reglas CSS ligeras de JustZix que cargan al instante sin bloqueador adicional.
Impide que las ventanas modales de boletines y las superposiciones de intención de salida interrumpan tu lectura con reglas CSS y JavaScript de JustZix listas para copiar.
Elimina los banners de cookies y las superposiciones de consentimiento con unas pocas reglas CSS y JS de copiar y pegar para que las páginas carguen limpias cada vez.
Un resumen de la última actualización de JustZix: el nuevo asistente AI Helper, la búsqueda de código dentro del editor y la Consola de Salida reconstruida de 6 pestañas.
La nueva barra de búsqueda dentro del editor: contador de coincidencias, resaltado azul y amarillo, flechas de navegación y todos los atajos de teclado para los editores CSS y JS.
Una mirada honesta a usar OpenAI, Anthropic y Gemini dentro del AI Helper de JustZix: cómo los tres funcionan igual, las diferencias reales y cómo cambiar.
AI Helper nunca cambia tu configuración en silencio. Prueba el código en ventanas TEMP visibles y cada carpeta, grupo o regla necesita tu aprobación explícita.
Un recorrido práctico: describe un objetivo a AI Helper, observa cómo inspecciona la página, prueba en una ventana TEMP y guarda la regla tras tu aprobación.
Cómo AI Helper inspecciona el DOM en vivo con query_page y lee tu biblioteca de reglas con list_structure, y por qué hacerlo bajo demanda supera a volcar la página entera.
Dónde almacena AI Helper tus claves de API, por qué las llamadas pasan por el worker en segundo plano, la sincronización opcional en la nube por clave y una higiene de claves honesta.
Cómo AI Helper ejecuta un bucle agéntico: el protocolo @@JZ_TOOL@@, el límite de 8 pasos, cada herramienta y por qué funciona igual en todos los proveedores.
Paso a paso: consigue una clave de API de OpenAI, Anthropic o Gemini, introdúcela en los Ajustes de JustZix, elige un proveedor predeterminado y selecciona un modelo.
AI Helper es un asistente de chat que vive dentro de cualquier página. Trae tu propia clave de API, dale el contexto de la página y deja que construya reglas CSS/JS contigo.
Greasemonkey es solo para Firefox. Aquí tienes una guía honesta de los equivalentes para Chrome: Tampermonkey, Violentmonkey y JustZix, con cómo elegir el correcto.
Aprende a ejecutar JavaScript en cualquier página web: la consola de DevTools, los bookmarklets y un enfoque persistente basado en reglas con JustZix, además de ejemplos reales.
Aprende a añadir CSS personalizado a cualquier sitio web. DevTools, herramientas del navegador y un enfoque con extensión explicados, con un recorrido paso a paso con JustZix y ejemplos.
¿Quieres una alternativa segura a Stylish para CSS personalizado? Un repaso honesto del historial de Stylish, del Stylus de código abierto y de JustZix — sin telemetría.
¿Buscas alternativas a Tampermonkey? Una comparación honesta de Violentmonkey, Greasemonkey, Stylus y JustZix — qué hace bien cada una y cuándo elegirla.
La Output Console de JustZix tiene una pestaña Network que captura peticiones mediante chrome.webRequest — en la pestaña, con un búfer en segundo plano, filtros y deslizadores.
La Output Console de JustZix es un visor de registros de solo lectura dentro de la pestaña — 6 pestañas para consola, red, errores y dataLayer, con filtros en vivo y búsqueda.
Haz que las reglas de JustZix se comporten de forma distinta según la hora del día o el día de la semana: un modo concentración en horario laboral, un tinte cálido nocturno, maquetaciones solo de fin de semana y más.
Depura maquetaciones responsive sin DevTools: una insignia de viewport en vivo, el nombre del breakpoint, un buscador de desbordamiento y una regla de rejilla inyectados directamente en la página.
Crea un botón de acción de JustZix que copia una página o tu selección de texto como Markdown limpio — encabezados, enlaces, listas, código — sin navegación ni anuncios.
Inyecta una capa de accesibilidad en JavaScript: detecta texto alt ausente, campos sin etiqueta, contraste bajo y saltos de encabezados en segundos, en cualquier página.
Inyecta una hoja de estilos @media print para arreglar la impresión y el Guardar como PDF en sitios que imprimen mal. Oculta la navegación, controla los saltos de página, ahorra tinta.
Vigila un elemento de precio o disponibilidad con MutationObserver, recibe un aviso cuando el precio baje de un umbral o un artículo agotado vuelva a estar en stock.
Neutraliza los patrones oscuros con CSS y JavaScript: oculta cuentas atrás falsas y recuentos de espectadores falsos, congela temporizadores y desmarca casillas premarcadas de extras.
Los muros de pago blandos ocultan un artículo que ya está en el DOM tras una capa superpuesta y un bloqueo de scroll. Aprende a quitar la capa, desbloquear el scroll y desenfocar el texto.
Intercepta fetch y XMLHttpRequest en el navegador para devolver JSON falso, simular latencia, errores 500 y listas vacías — sin servidor de mocks.
Fíjate en cualquier grupo de test A/B o variante de feature flag sobrescribiendo la cookie o el valor de localStorage que usa el sitio, para que QA pueda probar todas las ramas.
Un tester construye la toolbar QA por sí mismo y la entrega al equipo con un solo enlace TTL. Cómo configurarlo, y cuándo usar un enlace en lugar de la sincronización.
La mayor parte de un userscript se vuelve a pegar sin cambios. Qué funciona de forma distinta — la cabecera de los metadatos, las funciones GM_* — y qué lo sustituye.
El JavaScript inyectado se ejecuta con los plenos derechos de la página que visitas. Qué puede hacer realmente un snippet, qué no puede, y de quién fiarse.
Introduces una clave de sincronización en otro ordenador y tus reglas simplemente están ahí. Cómo funciona bajo el capó — y por qué JustZix no sobrescribirá tu trabajo.
Cinco reglas las recuerdas de memoria. Cincuenta no. Cómo la jerarquía JustZix de cuatro niveles escala hasta más de 100 reglas.
El patrón de URL decide dónde se ejecuta una regla. Cinco patrones que conocer, cómo se apilan en la jerarquía y los errores comunes.
window.JUSTZIX registra directamente en la ventana Output Console — diagnostica una página sin abrir las DevTools. Patrones de uso y trampas.
Las acciones JustZix pueden llamarse entre sí. Con window.JZ construyes workflows multipaso a partir de los botones — sin librería.
Una regla construida sobre una clase .css-1a2b3c muere en el próximo deploy del sitio. Cuatro reglas para escribir reglas que sobreviven a un restyling.
Una regla se ejecuta una vez, pero las páginas cambian tras la carga. Un MutationObserver hace que la regla reaccione a los nuevos elementos del DOM.
Tres acciones JustZix universales útiles casi en todas partes: copiar una URL limpia, exportar una tabla a CSV y el Picture-in-Picture.
¿Cuánto llevará este artículo? Una regla JustZix añade en lo alto de cada texto una barra con el número de palabras y un tiempo estimado.
Parallax, carruseles y vídeos en reproducción automática pueden cansar. Una regla CSS más JS calma el movimiento en cualquier página.
Las páginas «espera 5 segundos» viven de tu tiempo. Una regla JustZix extrae la URL de destino y se salta la redirección al instante.
Una regla CSS muestra qué enlaces ya has abierto. Además: por qué el selector :visited está tan fuertemente limitado por los navegadores.
Los headers sticky y las barras flotantes pueden comerse un tercio de la pantalla. Cómo despegarlos u ocultarlos con una sola regla CSS.
Las secciones de comentarios y los posts largos esconden el contenido tras «mostrar más». Una regla JustZix con un MutationObserver los expande todos automáticamente.
El modo lectura integrado es inconstante. Construye el tuyo como acción JustZix — reduce la página al artículo, exactamente como quieres.
Pasa el ratón sobre una miniatura, ves una vista previa ampliada junto al cursor. Una lightbox ligera en JavaScript puro como regla JustZix — sin librería.
¿Contenido dividido en 40 páginas? El auto-pager recupera la página siguiente y la añade cuando llegas al fondo. Scroll infinito en una regla.
El reproductor integrado se detiene en 2x. Una regla JustZix añade el control de playbackRate por teclado a cada vídeo HTML5.
¿Una página bloquea la selección del texto y el clic derecho? Una sola regla JustZix elimina el bloqueo — CSS más interceptación de los eventos en fase de capture.
Las páginas con una Content-Security-Policy estricta bloquean los scripts ajenos. JustZix inyecta tu JS igualmente — mediante chrome.scripting.executeScript y un puente postMessage.
La Output Console de JustZix ahora captura las excepciones no gestionadas y los rejections de promesas no gestionados, no solo los console.log explícitos. Qué cambia y qué todavía no captura.
Cada ventana de desarrollo JustZix se abre como pane persistente o como TEMP efímero. Un modelo de decisión simple: cuándo elegir cuál y cómo promover uno al otro.
Invoca una ventana CSS, JS, REPL u Output en cualquier página con un atajo Ctrl+Alt. Los TEMP panes desaparecen al recargar — cero configuración, cero rastro en tus reglas.
PerformanceObserver captura LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint). Lo inyectas una vez mediante una regla JS JustZix, la Output Console muestra los resultados de cada página visitada. Sin Lighthouse, sin F12.
Los posts patrocinados se mezclan en los feeds de las redes sociales junto al contenido orgánico. Los selectores CSS los fallan (hashes de clases aleatorios). Receta JustZix: matcher de atributos CSS + MutationObserver JS con text matching para 3 plataformas.
Tampermonkey/Greasemonkey son userscripts (solo JS, metadatos de cabecera). JustZix es userscript + userstyle + capa de UI (barras de acciones, panes, dashboard snap). Comparación función por función + migración de 3 scripts Tampermonkey típicos a reglas JustZix.
UI predeterminada de YouTube: spam de Shorts, vídeos sugeridos que interrumpen el flujo, sin atajo para «saltar intro/patrocinador». Pack JustZix de 6 reglas: ocultaciones CSS + auto-skip JS + atajos de teclado (J/L salto, S skip patrocinador, Shift+S compartir screenshot).
Stylish (controvertido) y Stylus son clásicas extensiones para la inyección de CSS. JustZix hace lo mismo + reglas JS + barras de acciones + 4 tipos de ventanas + snap connections + sync + enlaces de compartición TTL. Migración paso a paso con comparación función por función.
El botón flotante es «la entrada a JustZix» en cada página — una gota de 3 letras por carpeta, 4 estados (on/mixed/off/globally-off), drag+snap con barras/panes, menú contextual al clic derecho, popup widget que conmuta todas las reglas. Anatomía completa, desde la posición al teclado.
Las 3 apps de chat IA más populares tienen UIs predeterminadas calibradas para los novatos. Para los power users: burbujas de mensajes demasiado estrechas, bloques de código débiles, overlays «Upgrade to Pro». Snippets CSS + observer JS en JustZix, un clic, siempre ahí.
INPUT es un <input type="text"> nativo en la barra de acciones. Enter → blur → ejecuta código. Memory persistente por pestaña (sessionStorage + chrome.storage.local). Diferencia clave vs TEXTAREA: Enter activa la acción. Casos de uso: barra de comandos, búsqueda rápida, override de filtros, navegación URL personalizada.
SELECT es un dropdown en la barra de acciones de JustZix. Dos variantes: static (opciones hardcodeadas en el esquema) y js (el código genera las opciones dinámicamente). La primera es genial para presets fijos (Light/Dark, elección del idioma), la segunda para listas dinámicas (categorías del DOM, marcadores hotkey).
BUTTON es el tipo de acción JustZix más antiguo y más usado. Clic = ejecuta código en el MAIN world. Sin estado, sin memory — una función pura. Personalización completa (fondo, color del texto, padding) + customStyles para una integración al píxel en la barra de acciones.
Desde v2.13.42/55/70 los clics derechos en las cabeceras de los panes (CSS / JS / JS Console / Output Console) abren un menú contextual: desconecta las snap connections, desactiva un pane, cambia fuente + tamaño — sin volver a la página de opciones.
Cuatro listeners en capture-phase sobre document (v2.13.75 + v2.13.78): Ctrl+Shift+L (clear), Ctrl+Shift+S (conmuta la búsqueda), Ctrl+Shift+K (recorre el viewMode), Ctrl+Shift+H (popup de ayuda API). Todos activos cuando al menos una Output Console está renderizada en la página. Más un popup de ayuda arrastrable (v2.13.80).
La acción TEXTAREA (v2.13.21) es un <textarea> nativo en la barra de acciones de JustZix. Memory persistente por pestaña (sessionStorage + backup chrome.storage.local). Enter = salto de línea nativo (NO blur). El código arranca al blur. Casos de uso: bloc de notas QA, borradores de comentarios, snippets SQL/curl/JSON por dominio.
Una guía a todas las ventanas JustZix del frontend y a los tipos de acción. Cuatro tipos de pane (CSS pane / JS Console / JS pane / Output Console), las dos acciones más potentes (TOGGLE3 / SLIDER), la API window.JZ + window.JUSTZIX y las snap connections para disponerlo todo como mini-dashboard. El mapa completo del «mini-IDE en la pestaña» — qué elegir cuándo, y cómo todo encaja.
CSS pane + JS pane + JS Console + Output Console + barras de acciones + botón flotante — todos viven en un espacio de IDs snap compartido. Arrastra uno cerca de otro → se enganchan en un grupo. Arrastra el grupo → todo se mueve junto. El posicionamiento por anchor mantiene el layout estable durante los redimensionados de la ventana.
La Output Console (v2.13.66+) es el 4.º tipo de ventana en JustZix. Un visor de logs de solo lectura captura todos los console.log/warn/error/info/debug de la página (sync + async). Un canal window.JUSTZIX.log dedicado (primario desde v2.13.76, con nombre de marca, riesgo de colisión despreciable) con viewMode [C/J/C+J]. Filtros por nivel + búsqueda + 2000 líneas. Inmune a la CSP gracias a la inyección chrome.scripting (v2.13.74).
La acción SLIDER es un <input type="range"> nativo en la barra de acciones. El drag en vivo actualiza la memory sin ejecutar el código (evento input), al soltar se ejecuta el código (evento change). El value es un Number, no un String. Casos de uso: brillo, zoom, font-size, velocidad de animación — pilotados como un fader físico.
La acción TOGGLE3 es un segmented control con exactamente 3 estados. Cada estado tiene su propia label, value, color y código JS. La memory mantiene el estado activo por acción. 5 colores configurables: bg/texto activo + bg/hover/texto inactivo.
Cada acción de JustZix obtiene dos namespaces en el MAIN world: window.JZ (helpers para las acciones — click/value/setValue sobre elementos data-jz-action-*) y window.JUSTZIX (logger — log/warn/error/info/debug en la Output Console). El nombre de marca JUSTZIX nunca colisiona con los scripts de la página (Google Ads posee window.JZ en sus páginas). Construye mini-apps donde los botones pulsan otros botones, los sliders pilotan variables CSS y la Output Console sustituye a las DevTools.
Código JS persistente con Ctrl+Enter / clic en ▶ para ejecutarlo. Sin auto-ejecución al cargar. Estado dirty, overlay de error, sessionStorage por pestaña. Casos de uso: scripts destructivos + operaciones en masa.
Una ventana REPL flotante con historial de comandos, Ctrl+L = limpiar, Ctrl+Enter = eval. Captura console.log/warn/error/info del contexto de la página. Persistencia por pestaña.
Un textarea flotante inyectado en la página con inyección <style> en tiempo real (debounce 200ms). Persistencia por pestaña, multi-pane, jerarquía de scope. Qué hace y cómo empezar en 30 segundos.
Cinco técnicas de marcado visual para los entornos que no son de producción: banner rojo, badge flotante, cambio de favicon, tinte del viewport, prefijo del título. CSS+JS para copiar y pegar en JustZix.
Cómo construir tu propia toolbar QA: rellenar formularios, resetear el estado, copiar la URL con token de autenticación, avanzar las fechas, depurar las peticiones. Todo en JustZix, sin soporte dev.
Cuatro patrones de JavaScript para añadir tus propios atajos de teclado en cualquier sitio. Sin esperar al autor, sin extensiones pesadas tipo Vimium. Copia y pega en JustZix.
Cuatro snippets de JavaScript para verificar que los eventos de GTM se disparan en el momento adecuado con el payload correcto. Sin cambios en el código de producción. Listos para copiar y pegar en JustZix.
Cuatro maneras de forzar el modo oscuro en cualquier sitio: filtro invert, override de prefers-color-scheme, override de variables CSS, tema dedicado por sitio. Código para copiar y pegar en JustZix.
Cinco snippets de CSS y JavaScript probados para ocultar los banners de cookies en cualquier sitio. Código para copiar y pegar que funciona al instante en JustZix.