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

جسلین ین

گروه بندی فایل ها توسط نویسنده / مستقر در پنل منابع

فایل های گروه توسط Authored / Deployed اکنون در منوی 3 نقطه نشان داده شده است. قبلاً مستقیماً در صفحه ناوبری نشان داده می شد.

این دمو را باز کنید. برای مشاهده کد منبع اصلی (تألیف شده) و پیمایش سریعتر به آنها، تنظیمات Group file by Authored / Deployed را فعال کنید.

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

اشکال کرومیوم: 1352488

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

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

وقتی قرار است برخی از عملیات به صورت ناهمزمان انجام شوند، ردیابی پشته در DevTools اکنون "داستان کامل" عملیات را بیان می کند. قبلاً فقط بخشی از داستان را بیان می کرد.

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

// application.component.ts

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

قبلاً، ردیابی پشته فقط عملیات وقفه را نشان می داد. "علت اصلی" عملیات را نشان نداد.

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

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

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

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

اشکال کرومیوم: 1334585

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

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

این دمو را باز کنید و روی دکمه افزایش کلیک کنید. پیام خطا را در کنسول باز کنید. ردیابی پشته فقط کد شما را نشان می دهد (به عنوان مثال app.component.ts button.component.ts ). برای مشاهده ردیابی کامل پشته روی Show more frames کلیک کنید.

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

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

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

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

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

اشکال کرومیوم: 1323199

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

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

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

برای مشاهده همه فریم‌ها، Show ignore-listed frames را فعال کنید. قبلاً DevTools تمام فریم ها را به صورت پیش فرض نمایش می داد.

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

اشکال کرومیوم: 1352488

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

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

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

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

اشکال کرومیوم: 1352488

با تنظیم hide ignore-listed sources ، می توانید با منوی فرمان، فایل خود را سریعتر پیدا کنید. قبلاً، جستجوی فایل‌ها در منوی فرمان، فایل‌های شخص ثالثی را برمی‌گرداند که ممکن است به شما مربوط نباشند.

به عنوان مثال، تنظیمات hide ignore-listed sources را فعال کنید و روی منوی 3 نقطه کلیک کنید. Open file را انتخاب کنید. برای جستجوی اجزای دکمه "ton" را تایپ کنید. قبلاً، نتایج شامل فایل‌هایی از node_modules بود، یکی از فایل‌های node_modules حتی به عنوان اولین نتیجه نشان داده شد.

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

اشکال کرومیوم: 1336604

آهنگ تعاملات جدید در پانل عملکرد

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

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

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

اشکال کرومیوم: 1347390

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

اکنون پانل Performance Insights تفکیک زمان بندی بزرگترین رنگ محتوایی (LCP) را نشان می دهد. از این اطلاعات زمان بندی برای درک و شناسایی فرصتی برای بهبود عملکرد LCP استفاده کنید.

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

اشکال کرومیوم: 1351735

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

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

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

اشکال کرومیوم: 1351383

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

  • قبلاً، برنامه‌های افزودنی Recorder هر از گاهی در پانل Recorder نشان داده نمی‌شدند. ( 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 پوشش داده شده است.

،

جسلین ین

گروه بندی فایل ها توسط نویسنده / مستقر در پنل منابع

فایل های گروه توسط Authored / Deployed اکنون در منوی 3 نقطه نشان داده شده است. قبلاً مستقیماً در صفحه ناوبری نشان داده می شد.

این دمو را باز کنید. برای مشاهده کد منبع اصلی (تألیف شده) و پیمایش سریعتر به آنها، تنظیمات Group file by Authored / Deployed را فعال کنید.

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

اشکال کرومیوم: 1352488

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

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

وقتی قرار است برخی از عملیات به صورت ناهمزمان انجام شوند، ردیابی پشته در DevTools اکنون "داستان کامل" عملیات را بیان می کند. قبلاً فقط بخشی از داستان را بیان می کرد.

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

// application.component.ts

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

قبلاً، ردیابی پشته فقط عملیات وقفه را نشان می داد. "علت اصلی" عملیات را نشان نداد.

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

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

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

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

اشکال کرومیوم: 1334585

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

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

این دمو را باز کنید و روی دکمه افزایش کلیک کنید. پیام خطا را در کنسول باز کنید. ردیابی پشته فقط کد شما را نشان می دهد (به عنوان مثال app.component.ts button.component.ts ). برای مشاهده ردیابی کامل پشته روی Show more frames کلیک کنید.

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

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

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

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

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

اشکال کرومیوم: 1323199

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

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

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

برای مشاهده همه فریم‌ها، Show ignore-listed frames را فعال کنید. قبلاً DevTools تمام فریم ها را به صورت پیش فرض نمایش می داد.

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

اشکال کرومیوم: 1352488

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

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

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

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

اشکال کرومیوم: 1352488

با تنظیم hide ignore-listed sources ، می توانید با منوی فرمان، فایل خود را سریعتر پیدا کنید. قبلاً، جستجوی فایل‌ها در منوی فرمان، فایل‌های شخص ثالثی را برمی‌گرداند که ممکن است به شما مربوط نباشند.

به عنوان مثال، تنظیمات hide ignore-listed sources را فعال کنید و روی منوی 3 نقطه کلیک کنید. Open file را انتخاب کنید. برای جستجوی اجزای دکمه "ton" را تایپ کنید. قبلاً، نتایج شامل فایل‌هایی از node_modules بود، یکی از فایل‌های node_modules حتی به عنوان اولین نتیجه نشان داده شد.

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

اشکال کرومیوم: 1336604

آهنگ تعاملات جدید در پانل عملکرد

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

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

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

اشکال کرومیوم: 1347390

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

اکنون پانل Performance Insights تفکیک زمان بندی بزرگترین رنگ محتوایی (LCP) را نشان می دهد. از این اطلاعات زمان بندی برای درک و شناسایی فرصتی برای بهبود عملکرد LCP استفاده کنید.

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

اشکال کرومیوم: 1351735

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

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

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

اشکال کرومیوم: 1351383

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

  • قبلاً، برنامه‌های افزودنی Recorder هر از گاهی در پانل Recorder نشان داده نمی‌شدند. ( 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 پوشش داده شده است.