ثبتکننده کنسول همه خروجی کنسول (console.log، console.warn، console.error، console.info) را ضبط میکند و در یک پنل شناور مستقیماً روی صفحه نمایش میدهد. خطاهای JavaScript، پیامهای debug و هشدارها را در زمان واقعی بدون باز کردن DevTools مرورگر مشاهده کنید. پیامها بر اساس نوع رنگبندی میشوند و شامل timestamps و stack traceها برای خطاها هستند.
باز کردن DevTools مرورگر فقط برای بررسی خروجی کنسول فضای صفحه ارزشمندی را اشغال میکند — به ویژه روی صفحههای کوچکتر یا وقتی نیاز دارید کل صفحه را در حال نظارت بر logها ببینید. ثبتکننده کنسول یک جایگزین سبکوزن ارائه میدهد: یک پنل شناور که همه خروجی کنسول را همانطور که اتفاق میافتد، روی صفحه overlayشده نشان میدهد. پنل console.log، console.warn، console.error، console.info و استثناهای ضبطنشده با stack traceهای کامل را ضبط میکند. پیامها رنگبندی میشوند (خطاها قرمز، هشدارها زرد، info آبی، logها سفید/خاکستری) و شامل timestamps برای ردیابی زمان وقوع رویدادها هستند. دکمههای فیلتر به شما امکان میدهند فقط انواع پیام خاص را نشان دهید — فقط خطاها را هنگام اشکالزدایی یک crash نشان دهید، یا فقط هشدارها را هنگام جستجوی اعلانهای deprecation نشان دهید. پنل قابل کشیدن، تغییر اندازه و نیمهشفاف است تا محتوای صفحه را بیش از حد مسدود نکند.
پیامهای کنسول در زمان واقعی همانطور که ثبت میشوند ظاهر میشوند. logهای مقداردهی اولیه صفحه، مدیریت پاسخ API، رویدادهای تعامل کاربر و پیامهای خطا — همه در پنل شناور live streaming میکنند.
خطاها قرمز، هشدارها کهربایی/زرد، info آبی و logهای استاندارد سفید/خاکستری. فوراً بین یک خطای حیاتی و یک پیام log معمولی فقط بر اساس رنگ تمایز قائل شوید.
خطاهای JavaScript شامل stack trace کامل با نامهای فایل، نامهای تابع و شماره خطوط هستند. روی مرجع فایل کلیک کنید تا دقیقاً مشخص شود خطا از کجا سرچشمه گرفته بدون باز کردن DevTools.
دکمههای فیلتر در بالا به شما امکان میدهند انواع پیام خاص را نشان/پنهان کنید: همه، فقط خطاها، فقط هشدارها، فقط info، فقط logها. نشان شمارش روی هر فیلتر نشان میدهد چه تعداد پیام از آن نوع وجود دارد.
هر پیام زمانی که ثبت شده را نشان میدهد (فرمت HH:MM:SS). توالی رویدادها را ردیابی کنید، مشکلات عملکرد را شناسایی کنید (چقدر بین فراخوانی API و پاسخ زمان گذشته) و پیامها را با اقدامات کاربر مرتبط کنید.
برای شروع تازه همه پیامها را پاک کنید، یا در حال تعامل با صفحه ادامه به جمعآوری دهید. پنل تعداد کل پیامها را نشان میدهد و میتواند وقتی نیازی نیست به حداقل رسانده شود.
نیاز دارید خروجی کنسول را ببینید در حالی که کل صفحه قابل مشاهده باشد؟ ثبتکننده کنسول به شما امکان میدهد logها را بدون اینکه پنل DevTools فضا اشغال کند نظارت کنید. عالی برای صفحههای کوچکتر یا در طول ارائهها.
اگر JavaScript شما پاسخهای API را ثبت میکند، ثبتکننده کنسول آنها را در زمان واقعی نشان میدهد. دادههای request/response را بدون جابجایی بین صفحه و DevTools مشاهده کنید.
برخی خطاهای JavaScript به صورت بیصدا شکست میخورند — هیچ تغییر UI قابل مشاهدهای نیست، اما یک خطا در کنسول. ثبتکننده کنسول آنها را روی صفحه قابل مشاهده میکند تا در طول مرور معمولی متوجه شوید.
در طول یک نمایش زنده، پنل ثبتکننده کنسول را در یک گوشه قابل مشاهده نگه دارید. اگر چیزی اشتباه پیش رفت، میتوانید فوراً پیام خطا را بدون قطع نمایش با باز کردن DevTools ببینید.
scriptهای شخص ثالث (آنالیتیکس، ویجتهای چت، شبکههای تبلیغاتی) اغلب خطاها یا هشدارهایی میاندازند. ثبتکننده کنسول اینها را ضبط میکند تا بتوانید سلامت وابستگیهای خارجی را نظارت کنید.
داک شناور DevSuite Pro را باز کرده و روی آیکون ثبتکننده کنسول کلیک کنید. یک پنل شناور ظاهر میشود و فوراً شروع به ضبط خروجی کنسول میکند.
صفحه را به طور معمول استفاده کنید — دکمهها را کلیک کنید، ناوبری کنید، فرمها را submit کنید. پیامهای کنسول همانطور که توسط JavaScript صفحه ثبت میشوند در پنل ظاهر میشوند.
از دکمههای فیلتر برای نشان دادن فقط خطاها، هشدارها یا logها استفاده کنید. نشانهای شمارش نشان میدهند چه تعداد پیام برای هر نوع وجود دارد.
برای پیامهای خطا، stack trace را گسترش دهید تا فایل و شماره خط محل وقوع خطا را ببینید. از این برای شناسایی منبع باگ استفاده کنید.
برای بازنشینی پنل «پاک کردن» را کلیک کنید، یا ابزار را غیرفعال کنید تا آن را ببندید. هیچ اثری روی صفحه باقی نمیماند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
