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

صوفیا املیانووا
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

قبل و بعد از اضافه کردن کالیبراسیون تنظیم گلوگاه.

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

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

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

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

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

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

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

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

قبل و بعد از افزودن داده‌های ثبت‌شده به راهنماهای نشانگر و تب Insights.

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

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

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

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

قبل و بعد از اضافه کردن بینش «بازتاب اجباری».

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

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

یکی دیگر از بینش‌های جدید ، بهینه‌سازی اندازه 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");

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

قبل و بعد از اضافه کردن پشتیبانی از console.timeStamp.

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

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

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

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

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

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

قبل و بعد از اضافه کردن گزینه ':open'.

علاوه بر این، پنل 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 است، استفاده کنید.

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

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