ابزار ویرایش و اجرای آنلاین HTML، CSS و JavaScript
HTML، CSS و JavaScript را در یک Workspace واحد بنویسید، نتیجه را زنده ببینید، Console را بررسی کنید و Layout را در اندازه‌های مختلف تست کنید.
کنسول
بررسی سریع صفحه
الگوهای آماده شروع
امنیت و اجرای منابع
Preview داخل iframe بدون allow-same-origin اجرا می‌شود؛ کد کاربر به DOM صفحه وبتیک دسترسی مستقیم ندارد.
پروژههای ذخیرهشده
ابزار ویرایش آنلاین فرانت‌اند برای ساخت و تست سریع رابط کاربری
برای تست یک کامپوننت یا ایده فرانت‌اند لازم نیست هر بار پروژه کامل بسازید. این محیط سه بخش HTML، CSS و JavaScript را کنار پیش‌نمایش، کنسول و ابزارهای تشخیصی قرار می‌دهد تا روند ویرایش، اجرا و بررسی سریع‌تر شود.
بخش تست واکنش‌گرایی برای بررسی چند عرض رایج، خروجی HTML برای گرفتن فایل مستقل و ذخیره پروژه برای نگه‌داشتن نسخه‌های مختلف یک آزمایش در دسترس است.
راهنمای استفاده از Frontend Playground
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
Frontend Playground یک محیط آزمایش سه‌پنله برای HTML، CSS و JavaScript است. کد را اجرا می‌کنید، نتیجه را در Preview می‌بینید، Console و Runtime Errorها را بررسی می‌کنید و با عرض‌های مختلف رفتار Responsive را تست می‌کنید.
قبل از شروع این موارد را بدانید
- HTML، CSS و JavaScript را در Editor مخصوص خودشان قرار دهید.
- برای تست Responsive از Width Presetها استفاده کنید.
- اگر کد به Resource خارجی یا API نیاز دارد، CORS و محدودیت‌های Browser می‌توانند روی نتیجه اثر بگذارند.
قدم‌به‌قدم با ابزار کار کنید
- ۱. کد را در سه Editor بنویسیدHTML، CSS و JavaScript هرکدام پنل جدا دارند.
- ۲. پروژه را اجرا کنیدبا دکمه «اجرا» Preview و Console به‌روزرسانی می‌شوند.
- ۳. عرض و Zoom را تست کنیدPresetهای 375، 768، 1280 یا حالت آزاد برای بررسی Responsive استفاده می‌شوند.
- ۴. خطا و Diagnostics را ببینیدConsole، Runtime Error و بررسی سریع صفحه را برای پیدا کردن مشکل استفاده کنید.
- ۵. پروژه را نگه دارید یا Export کنیدSnapshot محلی بسازید یا HTML مستقل خروجی بگیرید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Run
- نسخه فعلی HTML/CSS/JS را در Preview اجرا می‌کند.
- Console
- log، warn، error و خطاهای Runtime را نمایش می‌دهد.
- Responsive Width
- عرض محیط Preview را تغییر می‌دهد.
- Preset/Snippet
- نمونه‌های شروع سریع برای آزمایش.
- Export HTML
- یک فایل مستقل از پروژه فعلی می‌سازد.
خروجی ابزار را چطور تفسیر کنید؟
اگر Preview درست نیست، اول Console Error را بخوانید، بعد HTML Structure و سپس CSS/Layout را بررسی کنید. Diagnostics مکمل است و همه مشکلات Frontend را تشخیص نمی‌دهد.
اگر مرحله بعدی کارتان این است
اگر می‌خواهید موضوع را عمیق‌تر دنبال کنید
سوالات رایج
کد JavaScript اجرا می‌شود؟
بله، Frontend Playground برای اجرای واقعی HTML/CSS/JS طراحی شده و Preview در محیط Sandbox جداگانه نمایش داده می‌شود.
فرق این ابزار با HTML Studio چیست؟
Frontend Playground برای اجرای کد و Live Preview است؛ HTML Studio روی Format، Minify و تحلیل ساختار HTML تمرکز دارد.
می‌توان خروجی را به فایل تبدیل کرد؟
بله، پروژه را می‌توانید به HTML مستقل Export کنید.