چیزهای جدید در DevTools (Chrome 106)

جسلین یین

گروه‌بندی فایل‌ها بر اساس Authored/Deployed در پنل Sources

فایل‌های گروه‌بندی‌شده بر اساس Authored / Deployed اکنون در زیر منوی سه‌نقطه‌ای نشان داده می‌شوند. پیش از این، این گزینه مستقیماً در پنل ناوبری نمایش داده می‌شد.

این نسخه آزمایشی را باز کنید. تنظیمات «گروه‌بندی فایل‌ها بر اساس نویسنده/مستقر» را فعال کنید تا ابتدا کد منبع اصلی (نویسنده) خود را مشاهده کنید و سریع‌تر به آنها دسترسی پیدا کنید.

گروه‌بندی فایل‌ها بر اساس نویسنده/استقرار یافته

اشکال کروم: ۱۳۵۲۴۸۸

ردیابی پشته بهبود یافته

ردیابی پشته پیوندی برای عملیات ناهمزمان

وقتی قرار است برخی عملیات به صورت غیرهمزمان انجام شوند، ردپاهای پشته در DevTools اکنون «داستان کامل» عملیات را بیان می‌کنند. قبلاً، این ردپاها تنها بخشی از داستان را بیان می‌کردند.

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

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

پیش از این، ردیابی پشته فقط عملیات timeout را نشان می‌داد. «علت اصلی» عملیات را نشان نمی‌داد.

با آخرین تغییرات، DevTools اکنون نشان می‌دهد که عملیات از رویداد onClick در کامپوننت دکمه، سپس تابع increment و در نهایت عملیات timeout سرچشمه می‌گیرد.

ردیابی پشته پیوندی برای عملیات ناهمزمان

در پشت صحنه، DevTools یک ویژگی جدید «برچسب‌گذاری پشته ناهمگام» (Async Stack Tagging) معرفی کرد. شما می‌توانید با پیوند دادن هر دو بخش کد ناهمگام به یکدیگر با متد جدید console.createTask() کل داستان عملیات را شرح دهید. برای کسب اطلاعات بیشتر به بخش اشکال‌زدایی مدرن در DevTools مراجعه کنید.

آیا پیچیده به نظر می‌رسد؟ اصلاً اینطور نیست. اغلب اوقات، چارچوبی که شما استفاده می‌کنید، زمان‌بندی و اجرای ناهمزمان را مدیریت می‌کند. در این صورت، استفاده از API به چارچوب بستگی دارد، نیازی نیست نگران آن باشید. (مثلاً Angular این تغییرات را پیاده‌سازی کرده است)

اشکال کروم: ۱۳۳۴۵۸۵

اسکریپت‌های شناخته‌شده‌ی شخص ثالث را به‌طور خودکار نادیده بگیرید

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

این نسخه آزمایشی را باز کنید و روی دکمه افزایش کلیک کنید. پیام خطا را در کنسول باز کنید. ردیابی پشته فقط کد شما را نشان می‌دهد (مثلاً app.component.ts button.component.ts ). برای مشاهده ردیابی کامل پشته، روی نمایش فریم‌های بیشتر کلیک کنید.

پیش از این، ردیابی پشته شامل اسکریپت‌های شخص ثالث مانند zone.js و core.mjs می‌شد. اینها کد منبع شما نیستند، بلکه توسط bundlerها (مثلاً webpack) یا فریم‌ورک‌ها (مثلاً Angular) تولید می‌شوند. شناسایی علت اصلی خطا زمان بیشتری می‌برد.

به طور خودکار اسکریپت‌های شخص ثالث شناخته شده را در ردیابی پشته نادیده بگیرید

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

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

تنظیم برای افزودن خودکار اسکریپت‌های شخص ثالث شناخته‌شده به لیست نادیده گرفته‌شده‌ها

اشکال کروم: ۱۳۲۳۱۹۹

بهبود پشته فراخوانی در حین اشکال‌زدایی

با تنظیم «به‌طور خودکار اسکریپت‌های شخص ثالث شناخته‌شده را به لیست نادیده بگیرید »، پشته فراخوانی اکنون فقط فریم‌هایی را نشان می‌دهد که به کد شما مرتبط هستند.

این نسخه آزمایشی را باز کنید و یک نقطه توقف در تابع increment() در app.component.ts تنظیم کنید. برای فعال شدن نقطه توقف، روی دکمه increment در صفحه کلیک کنید. پشته فراخوانی فقط فریم‌هایی از کد شما (مثلاً app.component.ts و button.component.ts ) را نشان می‌دهد.

برای مشاهده‌ی همه فریم‌ها، گزینه‌ی «نمایش فریم‌های نادیده گرفته شده» را فعال کنید. پیش از این، DevTools به طور پیش‌فرض همه فریم‌ها را نمایش می‌داد.

بهبود پشته فراخوانی در حین اشکال‌زدایی

اشکال کروم: ۱۳۵۲۴۸۸

پنهان کردن منابع نادیده گرفته شده در پنل منابع

برای مخفی کردن فایل‌های نامربوط در پنل ناوبری ، گزینه‌ی «hide ignore-listed sources» را فعال کنید. به این ترتیب، می‌توانید فقط روی کد خود تمرکز کنید.

این نسخه آزمایشی را باز کنید. در پنل منابع (Sources) node_modules و webpack اسکریپت‌های شخص ثالث هستند. روی منوی سه نقطه کلیک کنید و گزینه hide ignore-listed sources را انتخاب کنید تا آنها از پنل پنهان شوند.

پنهان کردن منابع نادیده گرفته شده در پنل منابع

اشکال کروم: ۱۳۵۲۴۸۸

با تنظیم «پنهان کردن منابع نادیده گرفته شده» ، می‌توانید فایل خود را با منوی فرمان سریع‌تر پیدا کنید. پیش از این، جستجوی فایل‌ها در منوی فرمان، فایل‌های شخص ثالثی را برمی‌گرداند که ممکن است برای شما بی‌ربط باشند.

برای مثال، تنظیمات پنهان کردن منابع نادیده گرفته شده را فعال کنید و روی منوی سه نقطه کلیک کنید. باز کردن فایل را انتخاب کنید. برای جستجوی اجزای دکمه، «ton» را تایپ کنید. پیش از این، نتایج شامل فایل‌هایی از node_modules بود، حتی یکی از فایل‌های node_modules به عنوان اولین نتیجه نشان داده می‌شد.

پنهان کردن فایل‌های نادیده گرفته شده در منوی فرمان

اشکال کروم: ۱۳۳۶۶۰۴

آهنگ جدید Interactions در پنل Performance

از مسیر جدید Interactions در پنل Performance برای تجسم تعاملات و پیگیری مشکلات احتمالی پاسخگویی استفاده کنید.

برای مثال، در این صفحه آزمایشی ، ضبط یک اجرا را شروع کنید . روی یک قهوه کلیک کنید و ضبط را متوقف کنید. دو تعامل در مسیر تعاملات نشان داده می‌شود. هر دو تعامل دارای شناسه‌های یکسانی هستند که نشان می‌دهد تعاملات از یک تعامل کاربری یکسان آغاز شده‌اند.

ردیابی تعاملات در پنل عملکرد

اشکال کروم: ۱۳۴۷۳۹۰

تفکیک زمان‌بندی‌های LCP در پنل Performance Insights

پنل Performance Insights اکنون جزئیات زمان‌بندی Largest Contentful Paint (LCP) را نشان می‌دهد. از این اطلاعات زمان‌بندی برای درک و شناسایی فرصتی برای بهبود عملکرد LCP استفاده کنید.

تفکیک زمان‌بندی‌های LCP در پنل Performance Insights

اشکال کروم: ۱۳۵۱۷۳۵

ایجاد خودکار نام پیش‌فرض برای ضبط‌ها در پنل ضبط‌کننده

پنل ضبط‌کننده اکنون به‌طور خودکار برای ضبط‌های جدید نامی تولید می‌کند.

نام پیش‌فرض برای ضبط‌ها در پنل ضبط‌کننده

اشکال کروم: ۱۳۵۱۳۸۳

نکات برجسته متفرقه

  • پیش از این، افزونه‌های ضبط‌کننده گاهی اوقات در پنل ضبط‌کننده نمایش داده نمی‌شدند. ( 1351416 )
  • پنجره‌ی Styles اکنون یک انتخابگر رنگ برای ویژگی stop-color عنصر SVG <stop> نمایش می‌دهد. ( 1351096 )
  • اسکریپت‌هایی که باعث اختلال در طرح‌بندی می‌شوند را به عنوان دلایل اصلی تغییرات طرح‌بندی در پنل Performance Insights شناسایی کنید. ( 1343019 )
  • نمایش مسیر بحرانی برای فونت‌های وب LCP در پنل Performance Insights . ( 1350390 )

دانلود کانال‌های پیش‌نمایش

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان دسترسی به جدیدترین ویژگی‌های DevTools را می‌دهند، به شما امکان می‌دهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک می‌کنند قبل از کاربران، مشکلات سایت خود را پیدا کنید!

با تیم Chrome DevTools تماس بگیرید

از گزینه‌های زیر برای بحث در مورد ویژگی‌های جدید، به‌روزرسانی‌ها یا هر چیز دیگری که مربوط به DevTools است، استفاده کنید.

قابلیت‌های جدید در DevTools

فهرستی از تمام مواردی که در مجموعه «چه چیزهای جدیدی در DevTools» پوشش داده شده است.