Chrome DevTools: بیست قابلیتی که احتمالاً نمی‌شناسید

بیشتر ما از ابزار توسعهٔ کروم سه چیز استفاده می‌کنیم: کنسول، تب Network، و بازرسی عناصر. این حدود ده درصد چیزی است که آنجا هست — و آن نود درصد باقی‌مانده جایی است که ساعت‌ها وقت صرفه‌جویی می‌شود.

کنسول: فراتر از log

۱. console.table

آرایه‌ای از اشیاء را به‌جای یک رشتهٔ درهم، در جدولی مرتب نشان می‌دهد. برای بررسی پاسخ API بی‌نظیر است:

console.table(users);
console.table(users, ['id', 'name']);   // فقط ستون‌های دلخواه

۲. console.group

خروجی‌های مرتبط را جمع می‌کند تا کنسول به سیل تبدیل نشود. با console.groupCollapsed بسته شروع می‌شود.

۳. console.time و timeEnd

اندازه‌گیری مدت یک عملیات، بدون دست بردن به Date.now().

۴. console.trace

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

۵. console.assert

فقط وقتی شرط نادرست باشد چاپ می‌کند — برای بررسی فرضیات، بدون شلوغ کردن خروجی.

۶. متغیرهای $0 تا $4

عنصری که در تب Elements انتخاب کرده‌اید با $0 در کنسول در دسترس است؛ $1 عنصر قبلی و همین‌طور تا $4.

۷. $ و $$ به‌عنوان میان‌بر

$('.btn')     // معادل document.querySelector
$$('.item')   // معادل querySelectorAll، ولی آرایهٔ واقعی برمی‌گرداند

۸. copy()

هر مقداری را در کلیپ‌بورد می‌گذارد. برای بیرون کشیدن یک شیء بزرگ از کنسول عالی است: copy(bigObject).

Breakpointهایی که کمتر شناخته شده‌اند

۹. Breakpoint شرطی

روی شمارهٔ خط راست‌کلیک کنید و شرط بگذارید. برای حلقه‌ای که در تکرار ۴۷۳ خراب می‌شود، تنها راه معقول است.

۱۰. Logpoint

مثل breakpoint شرطی، ولی به‌جای توقف، پیامی چاپ می‌کند. یعنی console.log بدون دست زدن به کد و بدون نیاز به build دوباره. یکی از مفیدترین قابلیت‌ها برای دیباگ کد production.

۱۱. توقف روی تغییر DOM

روی یک عنصر در تب Elements راست‌کلیک کنید → Break on → attribute modifications. بهترین راه برای فهمیدن اینکه کدام کد دارد این عنصر را تغییر می‌دهد.

۱۲. توقف روی درخواست شبکه

در تب Sources، بخش XHR Breakpoints: هر وقت درخواستی با آدرس حاوی متن مشخصی ارسال شود، اجرا متوقف می‌شود. برای پیدا کردن اینکه چه کدی این درخواست عجیب را می‌فرستد.

۱۳. توقف روی همهٔ استثناها

در تب Sources دکمهٔ توقف روی استثنا را فعال کنید. با گزینهٔ «Pause on caught exceptions» حتی خطاهایی که catch شده‌اند را هم می‌گیرد — برای پیدا کردن خطاهایی که جایی بی‌صدا بلعیده می‌شوند. این برای پیدا کردن Promiseهای ردشده‌ای که کسی نگرفته هم کارساز است.

شبکه

۱۴. کپی به‌صورت fetch یا cURL

روی هر درخواست راست‌کلیک → Copy → Copy as fetch. کل درخواست با هدرها و بدنه، آمادهٔ اجرا در کنسول یا ترمینال. برای بازتولید یک درخواست خراب، سریع‌ترین راه ممکن.

۱۵. شبیه‌سازی شبکهٔ کند

در تب Network، منوی throttling. حتماً یک بار سایتتان را با «Slow 3G» ببینید — بسیاری از باگ‌های زمان‌بندی که فقط برای کاربران رخ می‌دهند، اینجا بلافاصله خودشان را نشان می‌دهند.

۱۶. مسدود کردن درخواست

راست‌کلیک روی درخواست → Block request URL. برای تست اینکه اگر این API یا اسکریپت شخص ثالث در دسترس نباشد، سایت چه رفتاری دارد.

۱۷. Preserve log

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

موارد متفرقه

۱۸. Coverage

در منوی سه‌نقطه → More tools → Coverage. نشان می‌دهد چند درصد از CSS و جاوااسکریپت بارگذاری‌شده واقعاً اجرا شده است. معمولاً عدد تکان‌دهنده‌ای است و مسیر روشنی برای کم کردن حجم می‌دهد.

۱۹. Rendering

ابزارهایی برای دیدن اینکه چه چیزی دوباره رنگ می‌شود، شبیه‌سازی کوررنگی، و اجبار به حالت‌های :hover و :focus — که تنها راه معقول برای استایل دادن به منویی است که با برداشتن ماوس بسته می‌شود.

۲۰. Local Overrides

قدرتمندترین قابلیت این فهرست: می‌توانید فایل‌های سایت را در مرورگر ویرایش کنید و تغییرات پس از رفرش هم بمانند. برای آزمایش یک اصلاح روی سایت production، پیش از انتشار واقعی، بی‌نظیر است.

تب Application: جایی که کمتر می‌روید

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

Storage. محتوای localStorage، sessionStorage، کوکی‌ها و IndexedDB را نشان می‌دهد و اجازهٔ ویرایش می‌دهد. وقتی کاربری می‌گوید «برای من کار نمی‌کند» و برای بقیه کار می‌کند، اغلب دادهٔ کهنه‌ای در حافظهٔ مرورگر اوست. دکمهٔ Clear site data همان کاری را می‌کند که «کش را پاک کن» باید بکند.

کوکی‌ها با جزئیات. ستون‌های SameSite، Secure و HttpOnly را ببینید. بسیاری از مشکلات ورود که «گاهی» رخ می‌دهند، ریشه‌شان تنظیم نادرست SameSite است — و در تب Network اصلاً پیدا نیست.

Service Worker. اگر سایت شما یکی دارد، می‌تواند نسخهٔ قدیمی فایل‌ها را ماه‌ها به کاربر بدهد. گزینهٔ «Update on reload» در این تب، تنها راه معقول دیباگ کردن آن است.

میان‌برهایی که وقت می‌خرند

• Ctrl+Shift+P — منوی فرمان. هر کاری که DevTools بلد است، با تایپ کردن نامش. اگر فقط یک میان‌بر یاد بگیرید، همین باشد.
• Ctrl+P — پرش به هر فایلی به نام.
• Ctrl+Shift+F — جستجو در همهٔ فایل‌های بارگذاری‌شده. برای پیدا کردن اینکه آن متن عجیب یا آن کلاس CSS از کجا می‌آید.
• Ctrl+Shift+M — حالت دستگاه موبایل.
• Esc — باز و بستهٔ کنسول کشویی، بدون خروج از تبی که در آن هستید.

دیباگ روی موبایل واقعی

حالت شبیه‌ساز موبایل در DevTools فقط اندازهٔ صفحه را تغییر می‌دهد؛ موتور مرورگر همان کروم دسکتاپ است. بخشی از باگ‌های موبایل — مخصوصاً روی سافاری آی‌اواس — در شبیه‌ساز اصلاً بروز نمی‌کنند.

برای اندروید: گوشی را با کابل وصل کنید، در تنظیمات توسعه‌دهندهٔ گوشی USB debugging را روشن کنید، و در کروم دسکتاپ به chrome://inspect بروید. تب‌های باز گوشی آنجا فهرست می‌شوند و DevTools کامل رویشان کار می‌کند.

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

محدودیتی که باید بدانید

همهٔ این‌ها یک پیش‌فرض مشترک دارند: شما پای دستگاه هستید و باگ دارد جلوی چشمتان رخ می‌دهد.

ولی بیشتر باگ‌های واقعی این‌طور نیستند. آن‌ها روی گوشی کاربری در شهر دیگری، با نسخهٔ دیگری از مرورگر، با داده‌ای که شما ندارید، اتفاق می‌افتند و هیچ‌وقت DevTools بازی آنجا نیست.

برای همان دسته است که ثبت خودکار خطا لازم می‌شود: چیزی که همان اطلاعاتی را که اینجا با چشم می‌بینید — مسیر کاربر، درخواست‌های ناموفق، وضعیت مرورگر — از دستگاه کاربر جمع کند و به شما برساند. DevTools ابزار حل کردن است؛ رصد خطا ابزار پیدا کردن.

منابع و مطالعهٔ بیشتر

• مستندات رسمی Chrome DevTools — مرجع کامل همهٔ پنل‌ها
• Console Utilities API — $0، $ و $$ و توابع کمکی کنسول
• Local Overrides — ویرایش فایل‌های سایت در مرورگر
• دیباگ از راه دور اندروید — اتصال DevTools به گوشی واقعی