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

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

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

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

بینش‌های جدید در مورد عملکرد

تب Performance > Insights بینش‌های جدیدی را ارائه می‌دهد:

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

سه بینش جدید در برگه بینش‌ها.

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

اکنون می‌توانید روی موارد موجود در جداول Summary ، Bottom-up ، Call tree و Event log کلیک کنید تا رویدادهای مربوطه در ردیابی برجسته شده و بقیه موارد هنگام مرور ردیابی عملکرد، کم‌رنگ شوند.

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

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

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

پنل Performance داده‌ها را از هدر پاسخ Server-Timing دریافت می‌کند.

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

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

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

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

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

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

تکمیل خودکار corner-shape و corner-*-shape در عناصر > سبک‌ها پشتیبانی می‌کند

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

گزینه‌های تکمیل خودکار برای ویژگی 'corner-shape'.

مشکل کروم: ۴۰۲۳۴۶۴۰۶

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

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

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

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

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

فانوس دریایی ۱۲.۵.۰

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

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

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

مشکل کروم: ۴۰۵۴۳۶۵۱

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

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

  • عملکرد > بینش‌ها > درخت وابستگی شبکه : اکنون زمان تمام درخواست‌های شبکه در درخت شبکه ( 400708304 ) نشان داده می‌شود.
    • درخت وابستگی شبکه : اکنون زمان مربوط به همه درخواست‌های شبکه را در درخت شبکه ( 400708304 ) نشان می‌دهد.
  • انیمیشن‌ها : اشکالی که باعث می‌شد عناصر جدا شده به دلیل انیمیشن‌های ضبط شده در پنل حافظه ظاهر شوند، برطرف شد. ۴۰۰۶۳۵۴۱۰
  • ضبط‌کننده : اکنون هنگام اجرای ضبط برای اولین بار، از همان پنجره تأیید هنگام چسباندن کد استفاده می‌کند.
  • لایه‌ها : اکنون تعداد کل لایه‌ها و کل حافظه برای همه لایه‌های قابل مشاهده در نوار وضعیت در پایین نشان داده می‌شود.
  • حافظه : مقداردهی اولیه اسنپ‌شات هیپ با موازی‌سازی وظایف بین دو ورکر به جای استفاده از یک ورکر ( ۴۲۲۰۳۸۵۷ ) افزایش یافته است.
  • مشکلات : اکنون خطاهای CORS دسترسی به شبکه محلی (LNA) ( 395895368 ) را گزارش می‌دهد.
  • دسترسی‌پذیری :
    • نکات ابزار : اکنون به جای فوکوس ( ۳۹۶۳۱۱۹۳۶ ) با فشردن کلید میانبر نمایش داده می‌شوند.
    • عناصر > سبک‌ها : تابع var() اکنون می‌تواند با صفحه کلید تعامل داشته باشد، به این معنی که می‌توانید --custom-property انتخاب کرده و Enter را فشار دهید تا به هدف لینک آن ( 401212692 ) بروید.

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

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

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

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

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

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