موارد جدید در DevTools، Chrome 134

Sofia Emelianova

پنل حریم خصوصی و امنیت

پنل قدیمی امنیت به پنل حریم خصوصی و امنیت تبدیل شد و یک بخش جدید مختص حریم خصوصی به آن اضافه شد. در این بخش، می‌توانید:

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

شماره کروم: ۳۵۲۳۶۴۵۹۴

بهبود پنل عملکرد

این نسخه بهبودهای زیادی را در پنل عملکرد (Performance) به همراه دارد.

تنظیمات پیش‌فرض کالیبره شده برای کنترل سرعت پردازنده

اکنون می‌توانید به طور خودکار کالیبره کنید و دو تنظیم پیش‌فرض اضافی برای کاهش گلوگاه پردازنده دریافت کنید که با دقت بیشتری دستگاه‌های موبایل رده پایین و متوسط ​​را شبیه‌سازی می‌کنند.

در منوی کشویی Performance > CPU throttling ، گزینه Calibrate... را انتخاب کنید، سپس در Settings ، روی Calibrate و Continue کلیک کنید و منتظر بمانید تا DevTools نرخ کاهش سرعت دستگاه شما را محاسبه کند. می‌توانید گزینه‌های کالیبره شده throttling را دوباره در منوی کشویی Performance > CPU throttling پیدا کنید.

رویدادهای مختلف اجرا را در همان چت هوش مصنوعی انتخاب کنید

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

برجسته‌سازی شخص ثالث و شخص ثالث در عملکرد

پنل عملکرد (Performance ) در تب خلاصه (Summary) جدول جدیدی اضافه می‌کند که به شما امکان می‌دهد داده‌های شخص ثالث، شخص ثالث و افزونه‌ها را از هم تشخیص دهید.

برای مشاهده رویدادهای مرتبط که در نمودار عملکرد برجسته شده‌اند، نشانگر ماوس را روی ورودی‌های جدول نگه دارید. برای تمرکز فقط روی داده‌های شخص ثالث، گزینه Dim 3rd parties را علامت بزنید.

علاوه بر این، روی آیکون account_tree در کنار ورودی برجسته شده در جدول کلیک کنید تا به برگه Bottom-up که توسط اشخاص ثالث گروه‌بندی شده است، بروید.

داده‌های میدانی در راهنماها و بینش‌های نشانگر

اگر داده‌های میدانی را فعال کرده‌اید ، اکنون می‌توانید آن‌ها را در راهنمای ابزار نشانگر متریک و تب Insights مشاهده کنید.

شماره کروم: ۳۶۸۱۳۵۱۳۰

بینش «بازجذب اجباری»

تب Performance > Insights یک قابلیت جدید به مجموعه Insights اضافه می‌کند: Forced reflow . این قابلیت زمانی اتفاق می‌افتد که موتور رندر، اجرای اسکریپت را برای محاسبه استایل و طرح‌بندی متوقف می‌کند. Reflowهای اجباری می‌توانند گلوگاه‌هایی باشند که ممکن است بخواهید از آنها اجتناب کنید.

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

شماره کروم: ۳۶۹۷۶۶۱۵۶

بینش «بهینه‌سازی اندازه DOM»

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

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

ردیابی عملکرد را با console.timeStamp گسترش دهید

API توسعه‌پذیری اکنون از console.timeStamp پشتیبانی می‌کند. علاوه بر performance.measure و performance.mark ، اکنون می‌توانید در ردیابی عملکرد، مسیرهای سفارشی ایجاد کنید و با استفاده از console.timeStamp ، به عنوان جایگزین سبک‌تری که ورودی‌هایی را به جدول زمانی عملکرد داخلی مرورگر اضافه نمی‌کند، بلکه فقط آنها را در ردیابی عملکرد نشان می‌دهد، علائم سفارشی را ثبت کنید.

برای مثال، می‌توانید از سینتکس زیر استفاده کنید:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

با تنظیمات ضبط > check_box نمایش آهنگ‌های سفارشی ، آهنگ سفارشی خود را در مسیر ردیابی مشاهده خواهید کرد:

بهبودهای پنل عناصر

این نسخه بهبودهای زیادی را در پنل Elements به ارمغان می‌آورد.

مقادیر بلادرنگ سبک‌های متحرک

تب Elements > Styles اکنون مقادیر سبک‌های متحرک را به صورت بلادرنگ به‌روزرسانی می‌کند.

پشتیبانی از شبه کلاس :open و شبه عناصر مختلف

پنل عناصر اکنون از شبه کلاس :open در بخش Styles > :hov > Force specific element state برای عناصر HTML خاصی مانند <details> ، <select> ، <dialog> و <input> پشتیبانی می‌کند.

علاوه بر این، پنل Elements اکنون از چندین شبه عنصر جدید نیز پشتیبانی می‌کند: ::checkmark ، ::picker-icon و ::column ، ::scroll-button ، ::scroll-marker و ::scroll-marker-group که به carousel-related مربوط می‌شوند .

مشکلات کرومیوم: ۳۸۳۱۵۷۱۸۴ ، ۳۷۹۸۰۵۷۲۸

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

اکنون می‌توانید با کلیک راست، تمام پیام‌های کنسول را یکجا کپی کنید.

علاوه بر این، می‌توانید گزینه کپی مشابهی را در منوی زمینه Network > Request Payload پیدا کنید.

مشکلات کرومیوم: ۴۰۲۰۶۴۶۰ ، ۳۸۴۹۶۷۰۲۰ .

واحدهای بایت در پنل حافظه

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

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

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

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

• عملکرد :
  • حاشیه‌نویسی‌ها : اکنون می‌توانید روی برچسب خود کلیک کنید تا ورودی مربوطه ( crbug.com/388224764 ) را انتخاب کنید.
  • بینش‌ها : کلیک روی CLS در تب بینش‌ها ، اکنون به جای بدترین شیفت، بدترین خوشه را انتخاب می‌کند.
• لیست نادیده گرفته شده : گره‌های داخلی که با node: شروع می‌شوند، اکنون به طور پیش‌فرض نادیده گرفته می‌شوند ( crbug.com/382453615 ).
• عبارات زنده : اشکالی که باعث می‌شد عبارات زنده روی دستور $_ تأثیر بگذارند، برطرف شد ( crbug.com/388437265 ).
• عناصر > سبک‌ها : طول‌های نسبی اکنون یک پنجره‌ی پاپ‌اور دارند که مقدار مطلق را نشان می‌دهد ( crbug.com/40778486 ).
• قابلیت دسترسی : سرستون‌ها اکنون اعلام می‌کنند که آیا قابل مرتب‌سازی هستند یا خیر.
• آیکون‌های تب حالا به جای سمت چپ، در سمت راست و کنار نام تب‌ها قرار دارند.

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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