Chrome DevTools در نوامبر 2026؛ راهنمای قابلیت‌های تازه برای دیباگ وب

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

Chrome DevTools چیست و چه مسئله‌ای را حل می‌کند؟

Chrome DevTools مجموعه‌ای از ابزارهای داخلی مرورگر Chrome است که به توسعه‌دهنده اجازه می‌دهد ساختار صفحه، CSS، JavaScript، درخواست‌های شبکه، حافظه و عملکرد را مستقیماً مشاهده کند. به‌جای حدس‌زدن دربارهٔ علت یک باگ، می‌توان رفتار واقعی مرورگر را بازتولید، اندازه‌گیری و بررسی کرد. Chrome DevTools برای توسعهٔ روزمره، عیب‌یابی رابط کاربری، بررسی دسترس‌پذیری و تحلیل performance یک نقطهٔ مشترک فراهم می‌کند. برای مطالعهٔ آموزش‌های بیشتر، به بخش توسعه و ابزارهای کاربردی تکتاز سر بزنید.

گوگل در گزارش رسمی نوامبر ۲۰۲۶ اعلام کرده که Chrome ۱۵۵ و Chrome ۱۵۶ قابلیت‌های تازه‌ای را به پنل‌های مختلف DevTools آورده‌اند. این تغییرات فقط چند دکمهٔ جدید نیستند؛ هدف آن‌ها کوتاه‌کردن مسیر بین مشاهدهٔ علامت خطا و پیدا کردن علت اصلی است.

قابلیت‌های DevTools for agents

یکی از مهم‌ترین بخش‌های گزارش، بهبود DevTools for agents است. ابزار جدید get_css_styles می‌تواند styleهای محاسبه‌شده و ruleهای match‌شده را با صفحه‌بندی برگرداند و ruleهای ارث‌برده، pseudo-elementها، @keyframes و برخی ruleهای at را هم در اختیار عامل کدنویسی بگذارد. این قابلیت برای agentی مهم است که باید بفهمد چرا یک عنصر رنگ، فاصله یا جایگاه مورد انتظار را ندارد.

پشتیبانی از فایل پیکربندی و کنترل مسیرهای فایل نیز مدیریت server flagها و ریشه‌های سفارشی فایل‌سیستم را منظم‌تر می‌کند. در کنار آن، parser تکه‌ای trace می‌تواند recordingهای بزرگ performance را با trace buffer پیش‌فرض ۱.۲ گیگابایتی پردازش کند. مدیریت خودکار dialogهای JavaScript و حفظ تاریخچهٔ Console هنگام جابه‌جایی در همان سند، اطلاعاتی را که عامل برای تحلیل نیاز دارد کمتر پراکنده می‌کند.

CSS و Application: خطا را زودتر پیدا کنید

در پنل Elements، ویرایشگر بصری position-area برای CSS anchor positioning اضافه شده است. توسعه‌دهنده می‌تواند ناحیه‌های شبکهٔ anchor را از طریق رابط بصری انتخاب کند، محورهای مستقل را تنظیم کند و overlay مربوط به containing block را ببیند. این مسیر برای layoutهایی که popover یا tooltip دارند، از تغییر کورکورانهٔ چندین declaration سریع‌تر است.

در پنل Application و Issues نیز تشخیص خطاهای Web Install manifest اضافه شده است. خطای fetch، syntax نادرست، start_url نامعتبر، نام یا شناسهٔ ناقص و نبود manifest با لینک مستقیم به فایل مشکل‌دار نمایش داده می‌شود. بخش Ads نیز منشأ scriptهای تبلیغاتی را بهتر توضیح می‌دهد و جدول IndexedDB و Cookies کنترل‌پذیرتر شده است.

Memory، Network و Performance

Chrome DevTools حالا در heap snapshot می‌تواند متغیرهای context مرده را که هنوز به‌دلیل closureهای دیگر در حافظه نگه داشته شده‌اند، پیدا کند. این سرنخ برای بررسی memory leakهایی مفید است که با نگاه‌کردن به تعداد objectها به‌سادگی دیده نمی‌شوند.

در Network، وقتی cache خاموش است و پاسخ ۱۰۳ Early Hints شامل preload باشد، هشدار روشن‌تری دربارهٔ نادیده‌گرفته‌شدن preload نشان داده می‌شود. local overrideهای پاسخ، ستون‌های header سفارشی و ترتیب آن‌ها بین reloadها ماندگار می‌شوند. در Performance نیز حرکت روی timeline روان‌تر شده و وضعیت Call tree و Bottom-up هنگام جابه‌جایی بین پنل‌ها حفظ می‌شود.

یک روش عملی برای استفاده

برای استفادهٔ مؤثر از Chrome DevTools ابتدا مشکل را با یک سناریوی قابل تکرار ثبت کنید و زمان یا رفتار پایه را اندازه بگیرید. سپس در پنل درست، سرنخ را پیدا کنید: Elements برای layout و CSS، Application برای manifest و storage، Network برای preload و header، Memory برای retention و Performance برای timeline. بعد از تغییر، همان سناریو را دوباره اجرا کنید و نتیجه را با دادهٔ قبلی مقایسه کنید.

این روش از اصلاحات تصادفی جلوگیری می‌کند. اگر agent کدنویسی دارید، مسیر فایل‌های مجاز و scope ابزارها را محدود کنید و خروجی Console یا trace را بدون چاپ اطلاعات حساس در اختیارش بگذارید. برای جزئیات کامل قابلیت‌ها، گزارش رسمی Chrome for Developers را بخوانید. به این ترتیب Chrome DevTools از یک پنل واکنشی به بخشی منظم از چرخهٔ مشاهده، اندازه‌گیری و تأیید تبدیل می‌شود.

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