چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید

آپدیت روزانه

بیش از 1000 پست آموزشی

نیازهای روز

دیباگ کدهای فشرده جاوااسکریپت

یکی از پروسه‌های بهبود سئو وب سایت کاهش حجم نهایی فایل‌های CSS و JS می‌باشد که به آن Minification یا Minimization گفته می‌شود. این عمل موجب حذف شدن کامنت‌ها، فضاء خالی بین دستورات و ... می‌گردد. در سوی دیگر با عمل فشرده سازی کدهای نهایی جاوااسکریپت و سی اس اس موجب عدم خوانایی بهتر این دستورات برای انسان‌ها می‌شود.

مشاهده وب‌سایت توسط کاربران متخصص طراح سایت و تیم‌های امنیتی فقط با اجرا و مشاهده آن توسط مرورگرها پایان نمی‌پذیرد. بلکه کلیک راست و کلیک بر روی آیتم Inspect Element تازه شروع یک بازی برای آنان است. قربانی این مطلب وب‌سایت دیجی کالا و البته مرورگر کروم و فایرفاکس اجراکننده آن خواهند بود.

یکی از قابلیت‌های کاملا مفید پنجره Inspector مرورگر فایرفاکس، نمایش رویداد عناصر HTML در جلو آن عناصر است و CTRL + Shift + F از قابلیت مهم مرورگر کروم جهت جستجو در فایل‌های بارگزاری شده می‌باشد. تصویر ذیل بخش فوتر دیجی‌کالا است که قصد داریم به Trace کدهای جاوااسکریپت آن بپردازیم.

وب‌سایت دیجی کالا همانند سایر وب‌سایت‌ها فایل نهایی JS و CSS  را فشرده سازی نموده است و اگر قصد داشته باشید کدهای جاوااسکریپت آن را Trace نماید نخست باید نام تابع و مکان آن را یافته سپس با کمک ماژول Prettify Source به دیباگ آن بروید.

بر روی دکمه تایید ایمیل با استفاده از مرورگر فایرفاکس کلیک راست نموده و گزینه Inspect Element را کلیک نماید سپس نام متد را با کلیک بر روی آیکن ev بیابید. از طریق Shortcut با اجرا کنسول مرورگر کروم نام  فایل که این متد در آن واقع است را جستجو نماید اکنون نام فایل را در جستجوگر Debugger مرورگر فایرفاکس جستجو کنید.

با بارگزاری فایل جاوااسکریپت، داخل پنجره کلیک راست نموده و آیتم Prettify Source را کلیک کنید تا کدهای فشرده شده قابل خواندن شوند اکنون نام تابع را جستجو نماید و بعد از یافتن متد، Break Point را در هر مکان که قصد دیباگ آن را دارید فعال کنید.

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must log on to comment.