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

Jecelyn Yeen

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

فایل های گروه توسط 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 استفاده کنید.

اشکال کرومیوم: 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 استفاده کنید.

• پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

چیزهای جدید در DevTools

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

Jecelyn Yeen

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

پرونده های گروهی توسط نویسنده / مستقر اکنون در منوی 3 نقطه ای نشان داده شده است. پیش از این ، مستقیماً در صفحه ناوبری نشان می داد.

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

اشکال کروم: 1352488

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

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

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

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

// application.component.ts

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

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

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

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

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

اشکال کروم: 1334585

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

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

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

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

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

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

اشکال کروم: 1323199

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

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

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

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

اشکال کروم: 1352488

پنهان کردن منابع فهرست شده در صفحه منابع

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

این نسخه ی نمایشی را باز کنید. در پانل منابع . node_modules و webpack اسکریپت های شخص ثالث هستند. بر روی منوی 3 نقطه کلیک کنید و منابع مخفی نادیده گرفته شده را برای مخفی کردن آنها از صفحه انتخاب کنید.

اشکال کروم: 1352488

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

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

به عنوان مثال ، تنظیم منابع لیست نادیده گرفته شده را فعال کنید و روی منوی 3 نقطه کلیک کنید. File Open را انتخاب کنید. برای جستجوی اجزای دکمه ، "تن" را تایپ کنید. پیش از این ، نتایج شامل پرونده هایی از node_modules ، یکی از پرونده های node_modules حتی به عنوان اولین نتیجه است.

اشکال کروم: 1336604

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

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

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

اشکال کروم: 1347390

تجزیه زمان LCP در پانل Performance Insights

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

اشکال کروم: 1351735

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

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

اشکال کروم: 1351383

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

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

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

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

در تماس با تیم Chrome Devtools

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

• یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهید > راهنما > گزارش مسائل DevTools در DevTools.
• توییت در chromedevtools .
• در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

Jecelyn Yeen

Group files by Authored / Deployed in the Sources panel

The Group files by Authored / Deployed is now shown under the 3-dot menu. Previously, it showed directly on the navigation pane.

Open this demo . Enable the Group files by Authored / Deployed setting to view your original source code (Authored) first and navigate to them quicker.

Chromium bug: 1352488

Improved stack traces

Linked stack traces for asynchronous operations

When some operations are scheduled to happen asynchronously, the stack traces in DevTools now tell the “full story” of the operation. Previously, it tells only part of the story.

For example, open this demo and click on the increment button. Expand the error message in Console . In our source code, the operation includes an async timeout operation.

// application.component.ts

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

Previously, the stack trace only showed the timeout operation. It did not show the “root cause” of the operation.

With the latest changes, DevTools now shows the operation originates from the onClick event in the button component, then the increment function, followed by the timeout operation.

Behind the scenes, DevTools introduced a new “Async Stack Tagging” feature. You can tell the whole story of the operation by linking both parts of the async code together with the new console.createTask() method. See Modern debugging in DevTools to learn more.

Does it sound complicated? نه اصلا. Most of the time, the framework you are using handles the scheduling and async execution. In that case, it is up to the framework to use the API, you don't need to worry about it. (eg Angular implemented these changes )

Chromium bug: 1334585

Automatically ignore known third-party scripts

Identify issues in your code quicker during debugging because DevTools now automatically adds known third-party scripts to the ignore list.

Open this demo and click on the increment button. Expand the error message in Console . The stack trace shows only your code (eg app.component.ts button.component.ts ). Click Show more frames to view the full stack trace.

Previously, the stack trace included third-party scripts like zone.js and core.mjs . These are not your source code, they are generated by bundlers (eg webpack) or frameworks (eg Angular). It took a longer time to identify the root cause of an error.

Behind the scenes, DevTools ignores third-party scripts based on the new x_google_ignoreList property in source maps. Frameworks and bundlers need to supply this information. See Case Study: Better Angular Debugging with DevTools .

Optionally, if you prefer to always view full stack traces, you can disable the setting via Settings > Ignore list > Automatically add known third-party scripts to ignore list .

Chromium bug: 1323199

Improved call stack during debugging

With the Automatically add known third-party scripts to ignore list setting, the call stack now shows only frames that are relevant to your code.

Open this demo and set a breakpoint at the increment() function in app.component.ts . Click the increment button on the page to trigger the breakpoint. The call stack shows only frames from your code (eg app.component.ts and button.component.ts ).

To view all frames, enable Show ignore-listed frames . Previously, DevTools displayed all frames by default.

Chromium bug: 1352488

Hiding ignore-listed sources in the Sources panel

Enable hide ignore-listed sources to hide irrelevant files in the Navigation pane. This way, you can focus only on your code.

Open this demo . In the Sources panel. The node_modules and webpack are the third-party scripts. Click on the 3-dot menu and select hide ignore-listed sources to hide them from the pane.

Chromium bug: 1352488

Hiding ignore-listed files in the Command Menu

With the hide ignore-listed sources setting, you can find your file quicker with the Command Menu . Previously, searching files in the Command Menu returns third-party files that might not be relevant to you.

For example, enable the hide ignore-listed sources setting and click on the 3-dot menu. Select Open file . Type “ton” to search for button components. Previously, the results include files from node_modules , one of the node_modules files even shown up as the first result.

Chromium bug: 1336604

New Interactions track in the Performance panel

Use the new Interactions track in the Performance panel to visualize interactions and track down potential responsiveness issues.

For example, start a performance recording on this demo page . Click on a coffee and stop recording. Two interactions show in the Interactions track. Both interactions have the same IDs, indicating the interactions are triggered from the same user interaction.

Chromium bug: 1347390

LCP timings breakdown in the Performance Insights panel

The Performance Insights panel now shows the timings breakdown of the Largest Contentful Paint (LCP) . Use these timings information to understand and identify an opportunity to improve LCP performance.

Chromium bug: 1351735

Auto-generate default name for recordings in the Recorder panel

The Recorder panel now automatically generates a name for new recordings.

Chromium bug: 1351383

Miscellaneous highlights

• Previously, Recorder extensions don't show up in the Recorder panel from time to time. ( 1351416 )
• The Styles pane now displays a color picker for the SVG <stop> element's stop-color property. ( 1351096 )
• Identify scripts causing layout thrashing as the potential root causes for layout shifts in the Performance Insights panel. ( 1343019 )
• Display critical path for LCP web fonts in the Performance Insights panel. ( 1350390 )

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.