ابزار مرتب‌سازی و فشرده‌سازی HTML آنلاین
HTML خام را مرتب یا Minify کنید، DOM نهایی مرورگر را ببینید، Selectorهای CSS را تست کنید و مشکلات ساختاری رایج را سریع‌تر پیدا کنید.
Outline تیترها
مرورگر بعضی HTMLهای ناقص را خودکار تعمیر می‌کند. «Normalize DOM» نسخه‌ای را می‌سازد که از DOM تفسیرشده‌ی مرورگر دوباره Serialize شده؛ قبل از جایگزینی سورس آن را مرور کنید.
Preview بدون allow-scripts اجرا می‌شود؛ بنابراین JavaScript داخل HTML شما در Preview اجرا نمی‌شود. این ابزار برای بررسی HTML است، نه اجرای اسکریپت.
HTML Formatter با DOM Inspector و Selector Lab
Formatting فقط برای زیبایی کد نیست؛ وقتی Nesting عمیق باشد، ساختار درست و اشتباه HTML سریع‌تر دیده می‌شود. HTML Studio علاوه بر Beautify و Minify، DOM Tree و Diagnostics را هم کنار Editor قرار می‌دهد.
Normalize DOM نشان می‌دهد مرورگر Source را چگونه اصلاح و تفسیر کرده و Selector Tester کمک می‌کند قبل از انتقال کد به پروژه، Match شدن Selectorها را بررسی کنید.
راهنمای استفاده از HTML Studio
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
HTML Studio برای مرتب‌سازی و Minify کردن HTML، دیدن Preview و DOM Tree، بررسی Heading Outline، Diagnostics و تست CSS Selector است. تمرکز ابزار روی Source و ساختار DOM است، نه اجرای کامل JavaScript.
قبل از شروع این موارد را بدانید
- HTML کامل یا Fragment هر دو قابل استفاده‌اند.
- DOM مرورگر ممکن است Markup ناقص را Repair کند و با Source فرق داشته باشد.
- برای اجرای JavaScript واقعی از Frontend Playground استفاده کنید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. Source را وارد کنیدHTML را در Editor قرار دهید.
- ۲. Format یا Minify کنیدبرای خوانایی از مرتب‌سازی و برای خروجی فشرده از Minify استفاده کنید.
- ۳. Preview و DOM را بررسی کنیدPreview، DOM Tree و Heading Outline ساختار واقعی را نشان می‌دهند.
- ۴. Selector را تست کنیددر Selector Lab یک CSS Selector وارد کنید تا Matchها مشخص شوند.
- ۵. Normalize را فقط در صورت نیاز اعمال کنیدNormalize DOM ساختاری را نشان می‌دهد که Parser مرورگر از Source می‌سازد.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Normalize DOM
- نسخه اصلاح‌شده DOM توسط مرورگر را تولید می‌کند.
- Diagnostics
- مشکلاتی مثل id تکراری، alt، label و heading jump را نشان می‌دهد.
- Selector Lab
- تعداد و عناصر Match شده توسط Selector را بررسی می‌کند.
- Outline
- سلسله‌مراتب Headingهای صفحه را نمایش می‌دهد.
خروجی ابزار را چطور تفسیر کنید؟
اگر Source و DOM Tree فرق دارند، Parser مرورگر احتمالاً ساختار را Repair کرده است. قبل از Apply Normalize تفاوت را بررسی کنید. Diagnostics را به‌عنوان Checklist کمکی بخوانید، نه Validator کامل.
اگر مرحله بعدی کارتان این است
سوالات رایج
Beautify و Minify چه تفاوتی دارند؟
Beautify کد را برای خوانایی مرتب می‌کند؛ Minify Whitespace و بخش‌های غیرضروری را برای خروجی فشرده‌تر کاهش می‌دهد.
آیا Formatter ساختار HTML را تغییر می‌دهد؟
هدف Formatter تغییر ساختار نیست؛ اما Normalize DOM عمداً ساختاری را نشان می‌دهد که Parser مرورگر از HTML می‌سازد.
فرق HTML Studio با Frontend Playground چیست؟
HTML Studio برای بررسی و آماده‌سازی Source است؛ Frontend Playground برای اجرای HTML/CSS/JS و دیدن رفتار نهایی.