FA-TOOLS — Header Component
DIRECT LINE 09202232789
۱۰ ترفند مخفی در Chrome DevTools برای دیباگ کردن سریع‌تر کدها

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

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

💎 نقشه راه سریع دیباگینگ با DevTools 💎

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

(خلاصه ۱۰ ترفند طلایی برای سرعت بخشیدن به کار شما)

1️⃣ Console پیشرفته

با console.table و console.group داده‌ها رو خوشگل نشون بده.

2️⃣ Breakpoint هوشمند

بذار فقط وقتی شرطت درست بود، کد متوقف بشه (Conditional Breakpoints).

3️⃣ Live Edit کد

کد جاوااسکریپت رو همینجا تغییر بده و نتیجه رو فوری ببین، بدون رفرش صفحه.

4️⃣ تکرار درخواست‌های شبکه

درخواست‌های XHR/Fetch رو دوباره بفرست تا باگ بک‌اند رو سریع پیدا کنی.

5️⃣ شبیه‌سازی شرایط شبکه

اینترنت کُند و آفلاین رو شبیه‌سازی کن تا UX رو بسنجی.

6️⃣ Monitor Events و debug()

با این فرمان‌ها، ردیابی رویدادها و توابع رو اتوماتیک کن.

7️⃣ Local Overrides

فایل‌ها رو روی دیسک خودت تغییر بده و بدون استیجینگ تست کن.

8️⃣ CSS Overview

یه نگاه جامع به CSS پروژه‌ات بنداز و مشکلات رو سریع پیدا کن.

9️⃣ Audit (Lighthouse)

کارایی، دسترسی‌پذیری و سئوی سایتت رو با یه کلیک بسنج.

🔟 Accessibility Tree و Emulation

سایتت رو برای همه کاربرها در دسترس کن، حتی با مشکلات بینایی.

فهرست مطالب:

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

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

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

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

به جای اینکه یه آبجکت یا آرایه رو همینجوری لاگ کنی و کلی تو در تویی ببینی، با 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.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) رو بزن.
  • تمام! تغییرات بلافاصله اعمال میشن.

💡 نکته طلایی:

این قابلیت برای CSS هم کار می‌کنه و حتی می‌تونی فایل‌های CSS رو از پنل Elements تغییر بدی و نتیجه رو لحظه‌ای ببینی. برای صفحه اصلی fa-tools و همینطور بخش کدهای آماده و اسنیپت، این قابلیت می‌تونه خیلی مفید باشه تا ظاهر کدها رو سریعاً تست و بهینه کنی.

۴. تکرار درخواست‌های شبکه (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 تو کنسول قابل دسترسه) و بعد این دستور رو تو کنسول بزنی:

مثال monitorEvents():


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

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

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

مثال debug():


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” رو بزن.
  • فایل تو پوشه‌ای که انتخاب کردی کپی میشه. حالا می‌تونی فایل محلی رو تو هر ادیتوری که دوست داری تغییر بدی. هر وقت صفحه رو رفرش کنی، کروم تغییرات رو از روی فایل محلی می‌خونه.

🚀 کاربرد فوق‌العاده:

این قابلیت برای وقتی که می‌خوای یه باگ رو روی نسخه تولید یا استیج (Staging) یک سایت بزرگ که دسترسی مستقیم به کدش نداری، دیباگ کنی، بی‌نظیره. می‌تونی موقتاً تغییراتی رو اعمال کنی و نتیجه رو ببینی بدون اینکه به محیط اصلی صدمه بزنی.

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

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

نحوه استفاده از CSS Overview:

  1. DevTools رو باز کن.
  2. روی دکمه سه‌نقطه عمودی (More tools) در بالا سمت راست DevTools کلیک کن.
  3. “More tools” رو انتخاب کن و بعد “CSS Overview”.
  4. تو پنل CSS Overview روی دکمه “Capture overview” کلیک کن.
  5. یه گزارش کامل از استایل‌هات دریافت می‌کنی!

۹. 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” وجود داره. با فعال کردن این گزینه، می‌تونی سایتت رو از دید افراد با مشکلات بینایی مختلف (مثل کوررنگی، تاری دید و…) ببینی. این کار بهت کمک می‌کنه مشکلات کنتراست رنگ‌ها یا طراحی رو که برای افراد عادی ممکنه واضح نباشه، شناسایی کنی و طراحی بهتری داشته باشی. این ابزار به شدت به افزایش دسترسی‌پذیری و پوشش کاربرانت کمک میکنه.

برای ارتباط با تیم فنی و دریافت مشاوره تخصصی، می‌تونی از طریق راه‌های زیر با ما در تماس باشی:

📞 شماره تماس: 09202232789

📧 ایمیل: ارسال پیام به تیم فنی

🌐 وب‌سایت: fa-tools.ir

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

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

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

راه‌حل:

  • کش رو خالی کن: گاهی اوقات کش مرورگر باعث کندی میشه. Ctrl+Shift+R (Hard Reload) رو امتحان کن.
  • افزونه‌ها رو غیرفعال کن: بعضی افزونه‌ها می‌تونن با DevTools تداخل داشته باشن. افزونه‌های مشکوک رو موقتاً غیرفعال کن.
  • DevTools رو جدا کن: اگه DevTools رو به صورت جداگانه از مرورگر باز کنی، ممکنه عملکرد بهتری داشته باشه. (روی دکمه سه‌نقطه عمودی در DevTools کلیک کن و گزینه “Undock into separate window” رو انتخاب کن).
  • کروم رو ری‌استارت کن: یه ری‌استارت ساده گاهی اوقات همه چیز رو حل می‌کنه.

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

راه‌حل:

  • Source Maps رو بررسی کن: اگه داری با کد ترنسپایل شده (مثل React, Vue, Angular) کار می‌کنی، مطمئن شو که Source Maps فعال و درست کار می‌کنن. بدون اونها، DevTools نمی‌تونه کد اصلیت رو به درستی به کد اجرایی مپ کنه.
  • صفحه رو دوباره لود کن: گاهی اوقات برای اینکه بریک‌پوینت‌ها درست اعمال بشن، لازمه صفحه رو یکبار رفرش کنی.
  • Cache رو پاک کن: با Ctrl+Shift+R هم کش و هم Hard Reload رو انجام بده.
  • دوباره بریک‌پوینت رو بذار: بریک‌پوینت رو حذف کن و دوباره اضافه کن.

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

راه‌حل:

  • فعال بودن ضبط رو بررسی کن: مطمئن شو دکمه Record (دایره قرمز رنگ) در پنل Network فعال هست.
  • فیلترها رو چک کن: ممکنه فیلتری فعال باشه که درخواست‌ها رو مخفی می‌کنه. فیلترها (All, XHR, JS, CSS و…) رو بررسی کن.
  • Preserve log رو فعال کن: اگه صفحه رفرش میشه و نمی‌تونی درخواست‌های اولیه رو ببینی، گزینه “Preserve log” رو فعال کن.

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

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

فرمان کنسول کاربرد اصلی
console.log() نمایش یک پیام ساده یا مقدار یک متغیر. (پایه‌ای‌ترین)
console.warn() نمایش پیام هشدار (معمولاً با رنگ زرد).
console.error() نمایش پیام خطا (معمولاً با رنگ قرمز).
console.table() نمایش آرایه‌ها و آبجکت‌ها به صورت جدولی و خوانا.
console.group() گروه بندی پیام‌ها برای سازماندهی بهتر کنسول.
console.time() / timeEnd() اندازه‌گیری مدت زمان اجرای عملیات‌ها.

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

Chrome DevTools چیه و چرا باید ازش استفاده کنم؟

Chrome DevTools مجموعه ابزارهای داخلی مرورگر کروم برای توسعه‌دهندگان وب هست. باهاش می‌تونی کد HTML, CSS و JavaScript صفحات وب رو بررسی، ویرایش و دیباگ کنی، عملکرد سایت رو بسنجی و تجربه کاربری رو بهبود بدی. استفاده ازش سرعت دیباگ کردن و بهینه‌سازی رو به شدت بالا می‌بره.

آیا این ترفندها فقط برای جاوااسکریپت کاربرد دارن؟

خیر، در حالی که بسیاری از ترفندها مثل بریک‌پوینت‌ها و Console مرتبط با جاوااسکریپت هستن، ابزارهایی مثل CSS Overview، Network throttling، Lighthouse و Accessibility Emulation برای HTML و CSS هم کاربرد دارن و به بهبود کلی وب‌سایت کمک می‌کنن.

چطور می‌تونم سرعت DevTools رو اگه کند شد، بالا ببرم؟

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

آیا Local Overrides برای تغییرات دائمی کد خوبه؟

خیر، Local Overrides برای تست موقت تغییرات و دیباگ کردن روی نسخه‌های زنده سایت (بدون تغییر سورس اصلی) عالیه. برای تغییرات دائمی، باید کد رو در پروژه اصلی خودت تغییر بدی و بعد deploy کنی.

 

مطالب مرتبط:

مطالب مرتبط:

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

همه ما به عنوان توسعه‌دهنگان وب، روزانه ساعت‌های زیادی را در محیط مرورگر سپری می‌کنیم. فرقی نمی‌کند در حال نوشتن کدهای HTML ساده باشید یا ساختارهای پیچیده فرانت‌اند؛ در هر صورت دیباگ کردن یا همان رفع اشکال کدها، بخش بزرگی از فرآیند توسعه است. ابزار Chrome DevTools بسیار فراتر از یک ابزار ساده برای مشاهده عناصر صفحه یا نوشتن یک console.log ساده است. در این مقاله می‌خواهیم ۱۰ ترفند فوق‌العاده کاربردی و کمتر شناخته‌شده در DevTools را معرفی کنیم که سرعت دیباگ کردن شما را تا چند برابر افزایش می‌دهند.

⚡ نقشه راهنمای سریع: ۱۰ ترفند طلایی DevTools

۱. نقاط توقف شرطی
متوقف کردن اجرای کد فقط در شرایط خاص و تعیین‌شده.
۲. استفاده از Logpoints
چاپ اطلاعات در کنسول بدون دستکاری مستقیم کد پروژه.
۳. میانبرهای کنسول
دسترسی سریع به آخرین المان انتخابی با استفاده از $0.
۴. ویژگی Overrides
ذخیره و تست تغییرات کدهای فرانت‌اند به صورت دائمی در مرورگر.

💡 برای مشاهده جزئیات کامل هر بخش، از فهرست مطالب زیر استفاده کنید.


فهرست مطالب مقاله

۱. نقاط توقف شرطی (Conditional Breakpoints)

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

روش اجرا: به پنل Sources بروید، روی شماره خط مورد نظرتان راست‌کلیک کرده و گزینه Add conditional breakpoint را انتخاب کنید. در کادر باز شده، شرط خود را به زبان جاوااسکریپت بنویسید (مثلاً: userId === 5). حالا برنامه شما فقط و فقط زمانی در این خط متوقف می‌شود که این شرط برقرار باشد. این کار سرعت کار روی کدهای جاوااسکریپت سنگین را به شدت بالا می‌برد.

۲. لاگ‌پوینت‌ها (Logpoints)؛ خداحافظی با console.log اضافی

نوشتن مداوم console.log داخل سورس‌کد و پاک کردن آن‌ها قبل از آپلود روی سرور واقعی، فرآیندی خسته‌کننده و ناامن است. لاگ‌پوینت‌ها به شما اجازه می‌دهند بدون ویرایش فایل اصلی پروژه، خروجی مورد نیاز خود را در کنسول ببینید.

روش اجرا: مانند مرحله قبل، در تب Sources روی شماره خط راست‌کلیک کرده و گزینه Add logpoint را انتخاب کنید. پیام یا متغیر دلخواه خود را تایپ کنید (مثلاً: {user}). اکنون هر بار که این خط از کد اجرا می‌شود، اطلاعات بدون متوقف شدن اجرای برنامه در کنسول چاپ خواهد شد.

۳. ارجاع سریع به المان‌ها با $0 و $_

آیا می‌دانستید با انتخاب هر المان در بخش Elements، مرورگر آن را در یک متغیر موقت ذخیره می‌کند؟ این متغیر جادویی همان $0 است. اگر مایلید سریعاً بفهمید پهنای باند یا ویژگی‌های استایل فلان بخش چطور کار می‌کند، از این ویژگی بهره ببرید.

// المان مورد نظر را در تب Elements انتخاب کنید و سپس در کنسول بنویسید:
$0.style.backgroundColor = ‘red’;
// برای دسترسی به مقدار خروجی آخرین دستور اجرا شده در کنسول:
$_

استفاده از این میانبرها سرعت تست و خطایابی پویا را برای ویرایش سریع کدهای CSS به طرز شگفت‌آوری بهبود می‌دهد.

۴. بازنویسی محلی یا Local Overrides برای شبیه‌سازی تغییرات

بزرگترین مشکل تغییر استایل‌ها یا اسکریپت‌ها در کنسول این است که با یک بار رفرش کردن صفحه، تمام کارهای شما از بین می‌رود. با Local Overrides می‌توانید کاری کنید که مرورگر فایل‌های ذخیره‌شده روی سیستم شما را به جای فایل‌های آنلاین وب‌سایت لود کند.

روش اجرا: به تب Sources رفته، بخش Overrides را در منوی سمت چپ انتخاب کنید (اگر نمایان نیست، آیکون فلش دوتایی را بزنید). روی + Select folder for overrides کلیک کرده و یک فولدر خالی در کامپیوترتان به آن اختصاص دهید. مرورگر دسترسی لازم را می‌خواهد؛ آن را تایید کنید. حالا هر تغییری در فایل‌ها بدهید، با رفرش شدن صفحه نیز باقی خواهد ماند. این ترفند برای عیب‌یابی در پروژه‌های بزرگ یا قالب‌ها و افزونه‌های وردپرس فوق‌العاده کاربردی است.

۵. پنل مخفی CSS Overview برای بررسی استایل‌ها

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

چگونه فعالش کنیم؟ دکمه‌های ترکیبی Ctrl + Shift + P (در مک: Cmd + Shift + P) را بزنید تا خط فرمان ابزارها باز شود. عبارت CSS Overview را تایپ کرده و آن را باز کنید. سپس دکمه Capture overview را بزنید تا گزارش فوق‌العاده دقیقی از وضعیت استایل‌های سایت به شما نمایش داده شود.

۶. گرفتن اسکرین‌شات از یک المان خاص بدون ابزار اضافی

نیازی به نصب افزونه‌های سنگین اسکرین‌شات ندارید. DevTools به شما اجازه می‌دهد تنها با چند کلیک، دقیقاً از همان بخشی که می‌خواهید عکس باکیفیت و ترنسپرنت (بدون پس‌زمینه اضافی) تهیه کنید.

روش اجرا: المان مورد نظر خود را در پنل Elements انتخاب کنید. کلیدهای میانبر Ctrl + Shift + P را فشار داده و کلمه screenshot را تایپ کنید. از لیست باز شده، گزینه Capture node screenshot را انتخاب کنید. تصویر بخش مورد نظر شما به صورت خودکار دانلود خواهد شد.

۷. کنترل و شبیه‌سازی سرعت اینترنت و پردازنده

بسیاری از کاربران شما با گوشی‌های میان‌رده و اینترنت ضعیف به سایت دسترسی دارند، نه با سیستم گیمینگ یا فیبر نوری! برای اینکه درک درستی از تجربه کاربری واقعی آن‌ها داشته باشید، باید شرایط سیستم و اینترنتشان را شبیه‌سازی کنید.

روش اجرا: در تب Network، مقدار پیش‌فرض “No throttling” را تغییر دهید و روی Fast 3G یا Slow 3G قرار دهید. همچنین در تب Performance با کلیک بر روی آیکون چرخ‌دنده تنظیمات، می‌توانید پردازنده خود را تا ۴ یا ۶ برابر ضعیف‌تر کنید تا عملکرد اسکریپت‌ها را در گوشی‌های ارزان‌قیمت بسنجید.

۸. جستجوی سراسری کلمات کلیدی در تمام فایل‌ها

گاهی یک ارور ناشناخته در کنسول مشاهده می‌کنید یا می‌خواهید بدانید کلاس CSS خاصی در کدام فایل جاوااسکریپت استفاده شده است. گشتن تک‌تک فایل‌ها در ساختار پروژه‌های بزرگ زمان‌بر است.

روش اجرا: در محیط DevTools بدون توجه به اینکه در کدام تب هستید، کلیدهای Ctrl + Shift + F (در مک: Cmd + Alt + F) را بفشارید. کادری در بخش پایینی باز می‌شود که به شما اجازه می‌دهد هر عبارت، تکه کد یا نام کلاس را در تمام منابع لود شده به طور همزمان جستجو کنید.

۹. مانیتور کردن آنی رویدادها با استفاده از monitorEvents

اگر می‌خواهید بدانید هنگام کلیک کردن، اسکرول یا تغییر سایز پنجره چه رویدادهایی روی یک المان خاص فعال می‌شوند، بدون نیاز به نوشتن Event Listener های دستی، می‌توانید آن‌ها را مستقیماً مانیتور کنید.

روش اجرا: ابتدا المان خود را در بخش Elements انتخاب کنید (تا متغیر $0 به آن اختصاص یابد). سپس در کنسول دستور زیر را وارد کنید:

monitorEvents($0, ‘click’);

حالا با هر بار کلیک بر روی آن دکمه، اطلاعات رویداد رخ داده در سریع‌ترین زمان ممکن در تب کنسول برای شما لاگ می‌شود. برای لغو مانیتور، کافیست دستور unmonitorEvents($0) را اجرا نمایید.

۱۰. کپی کردن درخاست‌ها به صورت کد واقعی Fetch

آیا تا به حال برایتان پیش آمده که بخواهید یک درخواست API واقعی که در شبکه مرورگر ثبت شده را در کدهای خود بازنویسی یا با ابزارهای دیگر شبیه‌سازی کنید؟ با این ترفند جالب نیازی به کپی تک‌تک هدرها و بادی درخواست نیست.

روش اجرا: به تب Network بروید و درخواست مورد نظر را پیدا کنید. روی آن راست‌کلیک کرده، وارد منوی Copy شده و گزینه Copy as fetch را انتخاب کنید. حالا تمام ساختار درخواست همراه با هدرها، توکن‌ها و اطلاعات بادی به صورت کدهای استاندارد جاوااسکریپت کپی شده است که به راحتی می‌توانید از آن در بخش‌های دیگر یا حتی تست‌های بک‌اند مانند کدهای پایتون استفاده نمایید.

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

جدول مقایسه روش‌های عیب‌یابی سنتی و مدرن

انتخاب ابزار مناسب می‌تواند زمان پیدا کردن باگ‌ها را تا ۹۰ درصد کاهش دهد. بیایید نگاهی به تفاوت کارهای سنتی و ویژگی‌های مدرن DevTools بیندازیم:

روش سنتی و منسوخ جایگزین هوشمند در DevTools
نوشتن صدها console.log در طول سورس‌کد پروژه استفاده از Logpoints برای مانیتور لحظه‌ای بدون دست بردن در کدها
متوقف کردن کل برنامه با کلمه کلیدی debugger استفاده از Conditional Breakpoints بر اساس متغیرها و وضعیت دلخواه
تغییر کدهای CSS به صورت آنلاین و کپی‌پیست تک‌تک بعد از رفرش فعال کردن قابلیت Local Overrides برای ذخیره‌سازی همیشگی استایل‌ها در لوکال
نصب پلاگین‌های جانبی سنگین برای گرفتن اسکرین‌شات از بخش‌ها میانبر داخلی Capture node screenshot با خروجی دقیق و کیفیت بالا

عیب‌یابی سریع (Troubleshooting) مشکلات رایج DevTools

🛠️ چالش‌ها و راه‌حل‌های رایج هنگام کار با ابزارهای دیباگ

مسئله ۱: تغییرات اعمال شده روی کدهای JS/CSS با لود مجدد پاک می‌شوند؟

مطمئن شوید قابلیت Local Overrides را دقیقاً طبق راهنما فعال کرده‌اید و به پوشه انتخاب شده اجازه خواندن و نوشتن (Grant permission) داده‌اید.

مسئله ۲: سورس‌کدهای پروژه اصلی به صورت فشرده شده (Minified) نمایش داده می‌شوند؟

کافیست در پایین صفحه روی دکمه براکت باز و بسته { } (معروف به Pretty Print) کلیک کنید تا تمام کدهای فشرده به شکلی زیبا و خوانا فرمت‌بندی شوند.

مسئله ۳: درخواست‌های API را در سربرگ Network مشاهده نمی‌کنید؟

مطمئن شوید که فیلتر تب Network روی حالت All یا Fetch/XHR قرار دارد و همچنین آیکون قرمز رنگ ضبط (Record) در بالای این تب فعال است.

پرسش‌های متداول (FAQ)

چگونه می‌توانیم سرعت لود صفحات را در گوشی‌های ضعیف تست کنیم؟

با استفاده از بخش Throttling در تب Network یا Performance مرورگر کروم، می‌توانید نوع شبکه اینترنت را روی حالت 3G کند قرار داده و پردازنده سیستم خود را تا ۶ برابر ضعیف‌تر کنید تا شبیه‌سازی دقیقی صورت گیرد.

مفهوم متغیر جادویی $0 در ابزار دیباگ کروم چیست؟

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

چطور بفهمیم کدام استایل‌های CSS ما بی‌استفاده هستند؟

از ابزار مخفی Coverage یا بخش CSS Overview در DevTools استفاده کنید. این ابزارها گزارش فوق‌العاده دقیقی از خطوطی از کدهای CSS که بی‌استفاده لود شده‌اند را با جزئیات کامل در اختیارتان می‌گذارند.

یادگیری و به‌کارگیری این ترفندها در محیط عیب‌یابی کروم، تفاوت میان یک برنامه‌نویس جونیور و یک متخصص ارشد را رقم می‌زند. پیشنهاد می‌کنیم این ترفندها را از همین امروز در پروژه‌های روزانه خود به کار بگیرید تا تأثیر چشمگیر آن را بر سرعت توسعه کدهایتان مشاهده کنید.

Table of Contents

آخرین نوشته‌ها

دسته‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *