3 مستودعات
Awesome GitHub RepositoriesVisual Layout Debugging
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.
Awesome Visual Layout Debugging GitHub Repositories
اعثر على أفضل المستودعات باستخدام الذكاء الاصطناعي.سنبحث عن أفضل المستودعات المطابقة باستخدام الذكاء الاصطناعي.
- zxlie/fehelper
zxlie/FeHelper
5,618عرض على GitHubFeHelper هو صندوق أدوات لإضافات متصفح الويب ومجموعة أدوات تطوير الواجهة الأمامية مدمجة في Chrome و Firefox و Edge. يعمل كأداة لتحويل البيانات، وأداة لتصحيح أخطاء صفحات الويب، ومساعد برمجة مدعوم بالذكاء الاصطناعي. يتميز المشروع بدمج نماذج محلية وواجهات برمجة تطبيقات متوافقة مع OpenAI لكتابة وإعادة هيكلة وإصلاح الكود مباشرة داخل المتصفح. كما يوفر قدرات لتوليد مخططات TypeScript وتعريفات Zod من عينات البيانات باستخدام الذكاء الاصطناعي. تغطي مجموعة الأدوات نطاقاً واسعاً من أدوات المطورين، بما في ذلك تصحيح أخطاء الشبكة لاتصالات HTTP و WebSocket، وترميز وفك ترميز البيانات لتنسيقات مثل JWT و Base64، وأدوات معالجة JSON للتنسيق والإصلاح والمقارنة بين الهياكل. كما تتضمن أدوات الواجهة الأمامية لقياس تخطيط الصفحة، وتنسيق الكود المصدري، وحقن سكربتات المستخدم المخصصة. تشمل القدرات الإضافية مجموعة متنوعة من أدوات الوسائط والمستندات لتحرير Markdown، ومعالجة رموز QR، وتحويل الصور، إلى جانب مولدات أدوات للمعرفات الفريدة وكلمات المرور الآمنة.
Offers a tool to inspect page performance and capture color samples to resolve visual layout issues.
JavaScriptchatgptchrome-extensioncode-beautify - thoughtbot/neat
thoughtbot/neat
4,368عرض على GitHubNeat هو إطار عمل شبكي (grid framework) لـ Sass ونظام تخطيط متجاوب يستخدم لبناء بنيات ويب مرنة قائمة على الأعمدة. يوفر نهجاً منظماً لإدارة خصائص التخطيط وإعدادات التصميم العالمية من خلال خريطة تكوين مركزية ومجموعة أدوات من Sass mixins والدوال. يتميز النظام بقدرته على التعامل مع بنيات الشبكة المتداخلة، مما يسمح بوضع شبكات مرنة داخل حاويات شبكة أخرى مع الحفاظ على محاذاة دقيقة وتحكم في المسافات. كما يتضمن أدوات تطوير لتصحيح أخطاء تخطيط الواجهة الأمامية التي تعرض خطوط توجيه خلفية لتصور وضع الأعمدة وعرض المسافات. يغطي إطار العمل نطاقاً واسعاً من بدائيات التخطيط، بما في ذلك امتداد الأعمدة، والإزاحة، وإعادة الترتيب، بالإضافة إلى حاويات الصفحات المركزية وإدارة clearfix. وهو يتيح التصميم المتجاوب من خلال اختصارات استعلامات الوسائط التي تتكيف مع امتدادات الأعمدة وتكوينات نقاط التوقف عبر عروض إطارات العرض المختلفة. يتم توفير واجهة سطر أوامر لتثبيت أو تحديث أو إزالة ملفات إطار عمل التخطيط داخل دليل المشروع.
Allows for the inspection of visual alignment and gutter widths through rendered guide lines during development.
Rubybourbonbourbon-familycss - oddbird/susy
oddbird/susy
3,831عرض على GitHubSusy 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.
SCSS
