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

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

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

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

بینش عملکرد جدید

برگه Performance > Insights بینش های جدیدی دریافت می کند:

  • HTTP مدرن که درخواست هایی را که از پروتکل قدیمی HTTP/1.1 استفاده می کنند برجسته می کند.
  • از طول عمر کش کارآمد استفاده کنید که درخواست هایی را برجسته می کند که می توانند از طول عمر کش طولانی تر بهره مند شوند و زمان بارگذاری وب سایت شما را سرعت بخشند.
  • نمایش فونت که در صورت بهینه سازی font-display صرفه جویی در زمان تخمینی را به شما نشان می دهد.

سه اطلاعات آماری جدید در برگه Insights.

برای برجسته کردن کلیک کنید

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

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

تب Summary در پانل Performance اکنون زمان‌بندی سرور برای درخواست‌های شبکه را به شما نشان می‌دهد که فناوری‌های رندر سمت سرور را پیاده‌سازی می‌کنند.

جدول "زمان بندی سرور" در خلاصه درخواست شبکه.

پانل Performance داده ها را از سرصفحه پاسخ Server-Timing می گیرد.

فیلتر کوکی ها در «حریم خصوصی و امنیت»

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

فیلتر موجود در جدول «کوکی‌های شخص ثالث».

اندازه ها در واحدهای کیلوبایت در جداول در پانل ها

برای یکسان نگه داشتن واحدها در یک زمینه، جداول در پانل های شبکه و حافظه و جدول 1p / 3p در Performance > Summary اکنون همه اندازه ها را در کیلوبایت نشان می دهند. این به شما امکان می‌دهد به‌جای توجه به واحدهای مگابایت در مقابل کیلوبایت در مقابل واحدهای B، مستقیماً اعداد را در همان ستون و در پانل‌ها مقایسه کنید.

واحدهای اندازه قبل و بعد از یکسان سازی.

تکمیل خودکار corner-shape و corner-*-shape در Elements > Styles پشتیبانی می کند

تکمیل خودکار در Elements > Styles اکنون می‌تواند مقادیر مربوطه را برای ویژگی‌های corner-shape و corner-*-shape پیشنهاد کند.

گزینه های تکمیل خودکار برای ویژگی «شکل گوشه».

شماره Chromium: 402346406 .

تجربی: برجسته کردن مسائل مربوط به عناصر و ویژگی‌ها در DOM

با این ویژگی آزمایشی جدید، پانل Elements اکنون می‌تواند مشکلات مربوط به عنصر DOM یا ویژگی‌ها را با یک زیر خط قرمز متمایز برجسته کند. ماوس را روی چنین عناصر یا ویژگی‌هایی نگه دارید تا راهنمایی ابزار را با پیوندی به خطای مربوطه در پانل Issues ببینید.

قبل و بعد از برجسته کردن یک مشکل DOM در درخت DOM با یک راهنمای ابزار و یک پیوند به پانل Issues.

پانل عناصر در حال حاضر نوادگان نامعتبر <select> ، تعاریف ARIA نامناسب و ویژگی های نامعتبر ARIA را برجسته می کند.

شماره Chromium: 378738916 .

فانوس دریایی 12.5.0

پنل Lighthouse اکنون Lighthouse 12.5.0 را اجرا می کند.

مهمتر از همه در این نسخه، legacy-javascript اکنون از Baseline به جای esmodules استفاده می کند. لیست کامل تغییرات را ببینید.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

شماره Chromium: 40543651 .

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

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

  • Performance > Insights > Network Dependency Tree : اکنون زمان تمام درخواست های شبکه را در درخت شبکه نشان می دهد ( 400708304 ).
    • درخت وابستگی شبکه : اکنون زمان تمام درخواست‌های شبکه را در درخت شبکه نشان می‌دهد ( 400708304 ).
  • انیمیشن‌ها : رفع اشکالی که باعث می‌شد عناصر جدا شده در پانل حافظه ظاهر شوند، به دلیل انیمیشن‌های ضبط‌شده 400635410 .
  • ضبط کننده : اکنون از همان گفتگوی تأییدی که برای چسباندن کد هنگام اجرای ضبط برای اولین بار استفاده می کند.
  • لایه ها : اکنون تعداد کل لایه ها و کل حافظه را برای همه لایه های قابل مشاهده در نوار وضعیت در پایین نشان می دهد.
  • حافظه : مقداردهی اولیه عکس فوری با موازی کردن وظایف بین دو کارگر به جای استفاده از یکی ( 42203857 ) تقویت شده است.
  • مشکلات : اکنون خطاهای CORS دسترسی به شبکه محلی (LNA) را گزارش می کند ( 395895368 ).
  • دسترسی :
    • نکات ابزار : اکنون به جای فوکوس روی کلید میانبر ظاهر می شود ( 396311936 ).
    • Elements > Styles : تابع var() اکنون می تواند با صفحه کلید تعامل داشته باشد، به این معنی که می توانید --custom-property انتخاب کنید و Enter را فشار دهید تا به هدف پیوند آن بروید ( 401212692 ).

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

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

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

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

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

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