3 repositorios
Tools for inspecting the visual alignment and layout of page elements using color sampling and rulers.
Distinct from Performance Debugging: Focuses on visual and layout debugging rather than the raw rendering hierarchy or resource-based performance profiling.
Explore 3 awesome GitHub repositories matching development tools & productivity · Visual Layout Debugging. Refine with filters or upvote what's useful.
FeHelper es una caja de herramientas de extensión de navegador web y toolkit de desarrollo frontend integrado en Chrome, Firefox y Edge. Sirve como una utilidad de transformación de datos, una herramienta de depuración de páginas web y un asistente de codificación impulsado por IA. El proyecto se distingue por integrar modelos locales y API compatibles con OpenAI para escribir, refactorizar y reparar código directamente dentro del navegador. También proporciona capacidades para generar esquemas TypeScript y definiciones Zod a partir de muestras de datos utilizando IA. El toolkit cubre una amplia gama de utilidades para desarrolladores, incluyendo depuración de red para conexiones HTTP y WebSocket, codificación y decodificación de datos para formatos como JWT y Base64, y herramientas de procesamiento JSON para formatear, reparar y comparar estructuras. También incluye herramientas frontend para la medición del diseño de páginas, formateo de código fuente e inyección de scripts de usuario personalizados. Las capacidades adicionales incluyen una variedad de herramientas de medios y documentos para la edición de Markdown, procesamiento de códigos QR y conversión de imágenes, junto con generadores de utilidades para identificadores únicos y contraseñas seguras.
Offers a tool to inspect page performance and capture color samples to resolve visual layout issues.
Neat is a Sass grid framework and responsive layout system used to build fluid, column-based web architectures. It provides a structured approach to managing layout properties and global design settings through a central configuration map and a toolset of Sass mixins and functions. The system is distinguished by its ability to handle nested grid architectures, allowing flexible grids to be placed inside other grid containers while maintaining precise alignment and gutter control. It also includes development tools for frontend layout debugging that render background guide lines to visualize c
Allows for the inspection of visual alignment and gutter widths through rendered guide lines during development.
Susy is a Sass layout framework and grid computation engine designed to automate complex mathematical layout calculations within stylesheets. It functions as a responsive grid generator that calculates column widths, gutters, and spans based on customizable viewport breakpoints to ensure precise element alignment. The system includes a visual layout debugger that generates browser-based grid overlays to verify column alignment and baseline rhythm during development. It also provides utilities for creating repeating background colors and gradients using a template-based syntax. The framework
Ships visual overlays of columns and baselines to verify layout alignment and rhythm directly in the browser.