📌 About This Tool

A diagnostic CSS tool that helps identify common web design issues with visual highlights.

🚀 How to Use

Option 1: Use Pre-made Favelet

1. Drag the CSS Debug Favelet link to your bookmarks bar
2. Navigate to any webpage
3. Click the bookmark to apply debugging styles

Option 2: Create Your Own

1. Get the CSS file from: debug.css
2. Go to Meyerweb Favelet Creator
3. Paste the CSS URL in "URL of stylesheet"
4. Name it (e.g., "CSS Debug") and create the favelet
5. Drag to your bookmarks bar

🔍 Features

• All elements: Dashed red outline
• Tables: Solid red border
• Table cells: Dashed purple border
• Inline styles: Orange dotted border
• Images without alt: Solid red border
• Font tags: Yellow background
• Empty links: Blue outline
• RTL elements: Light blue background
• LTR elements: Light pink background

📖 Languages

This tool supports both LTR and RTL (Right-to-Left) content, making it ideal for multilingual websites.

📜 License

Released under MIT License - Free to use with attribution.

📌 درباره این ابزار

یک ابزار تشخیصی CSS که با هایلایت‌های بصری به شناسایی مشکلات رایج طراحی وب کمک می‌کند.

🚀 نحوه استفاده

گزینه ۱: استفاده از ابزار از پیش ساخته شده

1. لینک ابزار دیباگ CSS را به نوار نشانک‌ها بکشید
2. به صفحه‌وب مورد نظر بروید
3. روی نشانک کلیک کنید تا استایل‌های دیباگ اعمال شوند

گزینه ۲: ساخت ابزار شخصی

1. فایل CSS را از این آدرس دریافت کنید: debug.css
2. به سازنده Favelet بروید
3. آدرس CSS را در قسمت "URL of stylesheet" قرار دهید
4. نامی برای آن انتخاب کنید (مثلاً "CSS Debug") و ابزار را بسازید
5. آن را به نوار نشانک‌ها بکشید

🔍 ویژگی‌ها

• تمام المان‌ها: حاشیه قرمز نقطه‌چین
• جداول: حاشیه قرمز یکدست
• سلول‌های جدول: حاشیه بنفش نقطه‌چین
• استایل‌های inline: حاشیه نارنجی نقطه‌دار
• تصاویر بدون alt: حاشیه قرمز یکدست
• تگ‌های font: پس‌زمینه زرد
• لینک‌های خالی: حاشیه آبی
• المان‌های RTL: پس‌زمینه آبی روشن
• المان‌های LTR: پس‌زمینه صورتی روشن

📖 زبان‌ها

این ابزار از هر دو محتوای LTR و RTL (راست به چپ) پشتیبانی می‌کند و برای وبسایت‌های چندزبانه ایده‌آل است.