۱۰ ترفند مخفی در Chrome DevTools برای دیباگ کردن سریع‌تر کدها

سلام رفیق برنامه‌نویس! حتماً با Chrome DevTools آشنایی داری و کلی ازش برای دیباگ کردن و بررسی کدهات استفاده می‌کنی. اما اگه بهت بگم که کلی امکانات پنهان و قدرتمند توی این ابزار وجود داره که می‌تونه سرعت دیباگ کردن کدهات رو چندین برابر کنه، چی؟ این ابزار واقعاً یه معدن طلاست برای هر دولوپری. باور کن، تسلط به این ترفندها می‌تونه تو رو از بقیه متمایز کنه و کلی از اون لحظات خسته‌کننده console.log های پشت سر هم نجات بده. آماده‌ای برای یه شیرجه عمیق توی دنیای هیجان‌انگیز DevTools؟ اگه می‌خوای ابزارهای حرفه‌ای‌تر و کاربردی‌تری رو برای بهبود کدنویسی و دیباگ خودت پیدا کنی، حتماً یه سری به فروشگاه ابزارهای ما بزن، اونجا کلی چیزای خفن داریم که کارت رو راحت‌تر می‌کنه!

فهرست مطالب:

• ۱. کنسول نینجا: از console.log ساده فراتر برو!
• ۲. بریک‌پوینت‌های شرطی: توقف هوشمندانه کد
• ۳. ویرایش زنده کد جاوااسکریپت: بدون رفرش، تغییر و تست کن
• ۴. تکرار درخواست‌های شبکه (XHR/Fetch): از شر باگ‌های بک‌اند خلاص شو
• ۵. شبیه‌سازی شرایط شبکه: تجربه کاربری تو همه حال!
• ۶. Monitor Events و debug(): ردیابی خودکار رفتارها
• ۷. Local Overrides: تغییرات رو محلی تست کن، بدون deploy!
• ۸. پنل CSS Overview: یک نگاه جامع به استایل‌های پروژه‌ات
• ۹. Lighthouse (Audit): سایتت رو برای موفقیت بهینه کن
• ۱۰. Accessibility Tree و Emulation: وب برای همه!
• عیب‌یابی سریع: راه‌حل مشکلات رایج در DevTools
• سوالات متداول (FAQ)

۱. کنسول نینجا: از console.log ساده فراتر برو!

هممون با console.log کلی خاطره داریم، اما کنسول DevTools خیلی قدرتمندتر از این حرفاست. بیا چندتا از دستورات خفن‌ترش رو با هم ببینیم. اینها واقعاً نظم و تر و تمیزی رو به خروجی‌های کنسولت میارن و دیباگ کردن آرایه‌ها و آبجکت‌های پیچیده رو مثل آب خوردن می‌کنن.

۱.۱. console.table(): آرایه‌ها و آبجکت‌ها رو جدول کن!

به جای اینکه یه آبجکت یا آرایه رو همینجوری لاگ کنی و کلی تو در تویی ببینی، با console.table() می‌تونی اونا رو به شکل یه جدول مرتب و خانوا (خوانا) نمایش بدی. این برای دیتاهای ساختاریافته مثل لیست کاربران یا محصولات فوق‌العاده‌ست.

const users = [
    { id: 1, name: 'علی', email: 'ali@example.com' },
    { id: 2, name: 'سارا', email: 'sara@example.com' },
    { id: 3, name: 'رضا', email: 'reza@example.com' }
];
console.table(users);

// می‌تونی ستون‌های خاصی رو هم انتخاب کنی:
console.table(users, ['name', 'email']);
        

۱.۲. console.group() و console.groupEnd(): پیام‌ها رو گروهی کن!

اگه داری کلی لاگ از بخش‌های مختلف کدت می‌گیری، کنسولت شلوغ میشه. با این دستورات می‌تونی لاگ‌های مرتبط رو زیر یه عنوان گروه کنی و کنسولت رو مرتب نگه داری.

console.group('عملیات ورود کاربر');
console.log('کاربر در حال وارد کردن اطلاعات...');
console.warn('اعتبارسنجی ناموفق: ایمیل نامعتبر.');
console.log('مجدد تلاش کنید.');
console.groupEnd();

console.groupCollapsed('جزئیات بارگذاری صفحه'); // گروه به صورت پیش‌فرض بسته نمایش داده می‌شود
console.log('Font Loaded');
console.log('Images Rendered');
console.groupEnd();
        

۲. بریک‌پوینت‌های شرطی: توقف هوشمندانه کد

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

• برای تنظیمش، کافیه روی شماره خط کلیک راست کنی و گزینه “Add conditional breakpoint…” رو انتخاب کنی.
• شرط جاوااسکریپتیت رو بنویس (مثلاً i === 10 یا user.id === 'some-specific-id').

۲.۱. Logpoints: بدون توقف، فقط لاگ کن!

یه ویژگی دیگه از بریک‌پوینت‌ها، Logpoints هستن. اینا مثل console.log عمل می‌کنن، با این تفاوت که نیازی نیست کد واقعی رو دستکاری کنی. فقط یه بریک‌پوینت اضافه می‌کنی و به جای شرط، یه عبارت جاوااسکریپت می‌نویسی که می‌خوای لاگ بشه. کد اجرا میشه، چیزی لاگ میشه، و کد هم ادامه پیدا می‌کنه. خیلی شیک و تمیز!

• کلیک راست روی شماره خط و “Add logpoint…”.
• عبارتت رو بنویس (مثلاً 'مقدار i: ' + i یا 'نام کاربر: ' + user.name).

۳. ویرایش زنده کد جاوااسکریپت: بدون رفرش، تغییر و تست کن

یکی از قابلیت‌های فوق‌العاده پنل Sources، امکان ویرایش زنده کد جاوااسکریپته. اگه یه باگ ریز پیدا کردی یا می‌خوای یه تغییر کوچیک رو تست کنی، نیازی نیست بری IDE و تغییر بدی و دوباره بیلد کنی و صفحه رو رفرش کنی. کافیه بری تو پنل Sources، فایل مورد نظرت رو پیدا کنی، تغییراتت رو اعمال کنی و Ctrl+S (یا Cmd+S) رو بزنی. تغییرات بلافاصله روی صفحه اعمال میشن!

• برو به پنل Sources.
• فایل .js مورد نظر رو انتخاب کن.
• تغییراتت رو اعمال کن.
• Ctrl+S (یا Cmd+S) رو بزن.
• تمام! تغییرات بلافاصله اعمال میشن.

۴. تکرار درخواست‌های شبکه (XHR/Fetch): از شر باگ‌های بک‌اند خلاص شو

تا حالا شده یه درخواست API بفرستی، باگ بخوری، و بخوای همون درخواست رو با پارامترهای مختلف یا فقط برای اطمینان دوباره بفرستی؟ تو پنل Network، می‌تونی روی یه درخواست کلیک راست کنی و گزینه “Replay XHR/Fetch” رو انتخاب کنی. این کار همون درخواست رو دقیقاً با همون پارامترها و هدرها دوباره می‌فرسته. فوق‌العاده‌ست برای تست سناریوهای مختلف و دیباگ کردن مشکلات ارتباطی با بک‌اند. همچنین، می‌تونی از “Copy as cURL” هم استفاده کنی تا درخواست رو به صورت یه دستور cURL کپی کنی و تو ترمینال یا Postman تستش کنی.

۵. شبیه‌سازی شرایط شبکه: تجربه کاربری تو همه حال!

همه کاربرای شما اینترنت پرسرعت ندارن! برای اینکه مطمئن بشی سایتت روی اینترنت کُند یا حتی آفلاین هم خوب کار می‌کنه، باید بتونی این شرایط رو شبیه‌سازی کنی. تو پنل Network، بالای صفحه یه Dropdown برای Throttling وجود داره. می‌تونی سرعت‌های مختلف اینترنت (مثل Fast 3G, Slow 3G) رو انتخاب کنی یا حتی حالت “Offline” رو فعال کنی. این بهت کمک می‌کنه باگ‌هایی که فقط تو شرایط خاص شبکه ظاهر میشن رو پیدا کنی و تجربه کاربری بهتری ارائه بدی.

۶. Monitor Events و debug(): ردیابی خودکار رفتارها

بعضی وقتا دنبال اینی که ببینی چه رویدادهایی روی یه المان خاص اتفاق می‌افتن یا یه تابع خاص کی و با چه آرگومان‌هایی صدا زده میشه. DevTools برای این کار هم راه‌حل‌های ساده و قدرتمندی داره.

۶.۱. monitorEvents(object, [events]): ردیابی رویدادها

فرض کن می‌خوای بدونی چه رویدادهایی روی یه دکمه یا هر المان DOM دیگه‌ای در حال وقوع هستن. کافیه اون المان رو توی پنل Elements انتخاب کنی (که با $0 تو کنسول قابل دسترسه) و بعد این دستور رو تو کنسول بزنی:

// اول یک المان رو در پنل Elements انتخاب کن تا به عنوان $0 شناخته بشه
monitorEvents($0, 'click'); // فقط رویداد کلیک رو ردیابی می‌کنه
// یا
monitorEvents($0); // همه رویدادها رو ردیابی می‌کنه
// برای توقف ردیابی
unmonitorEvents($0);
        

۶.۲. debug(function) و undebug(function): توقف روی اجرای تابع

گاهی اوقات می‌خوای هر وقت یه تابع خاص صدا زده شد، کد متوقف بشه و بری تو حالت دیباگ. این دستورات دقیقاً همین کار رو برات انجام میدن.

function calculateTotal(price, quantity) {
    return price * quantity;
}

debug(calculateTotal); // هر وقت calculateTotal صدا زده بشه، کد متوقف میشه

// حالا هر جا این تابع صدا زده بشه، DevTools به حالت دیباگ میره
console.log(calculateTotal(10, 5));

undebug(calculateTotal); // برای توقف دیباگ این تابع
        

۷. Local Overrides: تغییرات رو محلی تست کن، بدون deploy!

این یکی از اون ترفندهای جادویی و مخفیه که می‌تونه زندگیتو نجات بده! فرض کن می‌خوای یه تغییر بزرگ توی یه فایل CSS یا JS اعمال کنی و نتیجه‌اش رو روی سایت زنده ببینی، اما نمی‌خوای تغییرات رو مستقیم به سرور بفرستی یا به سورس کد دست بزنی. Local Overrides بهت اجازه میده فایل‌های یک سایت رو با نسخه‌های محلی روی دیسک خودت جایگزین کنی. یعنی کروم به جای بارگذاری فایل از سرور، فایل تغییر یافته رو از روی کامپیوتر خودت میخونه!

• برو به پنل Sources.
• وارد تب “Overrides” شو.
• گزینه “Select folder for overrides” رو انتخاب کن و یه پوشه خالی روی سیستمت انتخاب کن.
• به کروم اجازه دسترسی به اون پوشه رو بده.
• حالا برو به تب Network یا Elements، روی فایل CSS/JS که می‌خوای تغییر بدی کلیک راست کن و “Save for overrides” رو بزن.
• فایل تو پوشه‌ای که انتخاب کردی کپی میشه. حالا می‌تونی فایل محلی رو تو هر ادیتوری که دوست داری تغییر بدی. هر وقت صفحه رو رفرش کنی، کروم تغییرات رو از روی فایل محلی می‌خونه.

۸. پنل CSS Overview: یک نگاه جامع به استایل‌های پروژه‌ات

پروژه‌های بزرگ معمولاً با کلی فایل CSS و استایل‌های تکراری و بلااستفاده مواجه میشن. پنل CSS Overview (که ممکنه تو بخش “More tools” زیر گزینه “CSS Overview” باشه) یه ابزار فوق‌العاده برای تحلیل استایل‌های سایتته. با یه کلیک، می‌تونی یه گزارش کامل از تمام رنگ‌های استفاده شده، فونت‌ها، مدیا کوئری‌ها، استایل‌های بلااستفاده و حتی مشکلات احتمالی مثل تکرار استایل‌ها رو ببینی. این بهت کمک می‌کنه کدت رو مرتب‌تر، بهینه‌تر و با حجم کمتری نگه داری.

۹. Lighthouse (Audit): سایتت رو برای موفقیت بهینه کن

مهم نیست چقدر کدنویسی‌ات خوب باشه، اگه سایتت کند باشه، دسترسی‌پذیری خوبی نداشته باشه، یا سئوش مشکل داشته باشه، کاربرها رو از دست میدی. پنل Lighthouse (قبلاً Audit) یه ابزار اتوماتیک برای سنجش کیفیت صفحات وبت هست. با این ابزار می‌تونی گزارش‌های دقیقی در مورد:

• Performance (کارایی): سرعت بارگذاری و پاسخگویی.
• Accessibility (دسترسی‌پذیری): آیا سایتت برای همه، از جمله افراد با محدودیت‌های جسمی، قابل استفاده‌ست؟
• Best Practices (بهترین شیوه‌ها): آیا از استانداردهای مدرن توسعه وب پیروی می‌کنی؟
• SEO (بهینه‌سازی برای موتورهای جستجو): آیا سایتت برای موتورهای جستجو بهینه شده؟
• Progressive Web App (PWA): آیا سایتت قابلیت‌های PWA رو داره؟

روزی یه بار با این پنل سایتت رو اسکن کن و خودت رو از مشکلات احتمالی آینده نجات بده. برای کسب اطلاعات بیشتر و دیدن ابزارهای بهینه‌سازی، حتماً به فروشگاه ابزارهای ما سر بزن.

۱۰. Accessibility Tree و Emulation: وب برای همه!

یکی از وظایف مهم ما به عنوان توسعه‌دهنده، ساختن وب‌سایت‌هایی هست که برای همه قابل استفاده باشن، حتی افرادی با معلولیت‌های مختلف. DevTools ابزارهایی برای کمک به این کار داره.

۱۰.۱. Accessibility Tree: دیدگاه ابزارهای کمکی

تو پنل Elements، کنار تب Styles، تب “Accessibility” رو می‌بینی. این تب، ساختار Accessibility Tree رو نشون میده که همون ساختاری هست که ابزارهای کمکی مثل Screen Readerها ازش برای درک محتوای صفحه استفاده می‌کنن. با بررسی این ساختار، می‌تونی مطمئن بشی که عناصر مهم (مثل دکمه‌ها، لینک‌ها، ورودی‌ها) برچسب‌ها و نقش‌های مناسبی دارن.

۱۰.۲. Emulate vision deficiencies: شبیه‌سازی مشکلات بینایی

تو تب “Rendering” (که ممکنه لازم باشه از طریق دکمه سه‌نقطه و “More tools” پیداش کنی)، یه گزینه به نام “Emulate vision deficiencies” وجود داره. با فعال کردن این گزینه، می‌تونی سایتت رو از دید افراد با مشکلات بینایی مختلف (مثل کوررنگی، تاری دید و…) ببینی. این کار بهت کمک می‌کنه مشکلات کنتراست رنگ‌ها یا طراحی رو که برای افراد عادی ممکنه واضح نباشه، شناسایی کنی و طراحی بهتری داشته باشی. این ابزار به شدت به افزایش دسترسی‌پذیری و پوشش کاربرانت کمک میکنه.

عیب‌یابی سریع: راه‌حل مشکلات رایج در DevTools

گاهی اوقات ممکنه در حین کار با DevTools به مشکلاتی بربخوری. نگران نباش، اینها رایج هستن و راه‌حل دارن:

مشکل ۱: DevTools کنده یا هنگ می‌کنه.

مشکل ۲: بریک‌پوینت‌ها عمل نمی‌کنن یا روی خط اشتباه متوقف میشن.

مشکل ۳: پنل Network درخواست‌ها رو نشون نمیده.

با تمرین و آشنایی بیشتر با این ابزارها، می‌تونی مثل یک متخصص باگ‌ها رو پیدا کنی و کد تمیزتر و بهتری بنویسی. یادگیری DevTools یه سرمایه‌گذاری واقعی برای آینده شغلی هر برنامه‌نویسی هست.

جدول مقایسه‌ای: انتخاب ابزار کنسول بر اساس نیاز

سوالات متداول (FAQ)