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

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

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

پنل امنیتی قدیمی به پنل حریم خصوصی و امنیتی تبدیل شد و بخش جدیدی را به حریم خصوصی اختصاص داد. در این بخش می توانید:

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

قبل و بعد از افزودن بخش Privacy به پنل Security.

شماره Chromium: 352364594 .

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

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

تنظیم از پیش تنظیم فشار CPU کالیبره شده

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

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

قبل و بعد از افزودن کالیبراسیون دریچه گاز.

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

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

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

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

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

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

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

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

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

شماره Chromium: 368135130 .

بینش «جریان مجدد اجباری».

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

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

قبل و بعد از افزودن بینش «جریان مجدد اجباری».

شماره Chromium: 369766156 .

بینش "بهینه سازی اندازه DOM".

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

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

قبل و بعد از افزودن بینش "بهینه سازی اندازه DOM".

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

اکنون Extensibility 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 و شبه عناصر مختلف

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

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

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

مسائل Chromium: 383157184 ، 379805728 .

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

اکنون می توانید همه پیام های کنسول را به طور همزمان با کلیک راست و کپی کنید.

قبل و بعد از افزودن گزینه 'Copy console'.

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

مشکلات کرومیوم: 40206460 ، 384967020 .

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

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

قبل و بعد از نمایش واحدهای بایت.

شماره Chromium: 388589515 .

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

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

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

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

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

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

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

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

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