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

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

اطلاعات بینش کنسول توسط Gemini در اکثر کشورهای اروپایی منتشر می شود

این نسخه پشتیبانی از اطلاعات کنسول Gemini را برای اکثر کشورهای اروپایی به ارمغان می آورد.

لیست کشورهای اروپایی که به تازگی پشتیبانی شده اند

اتریش، بلژیک، بلغارستان، سوئیس، قبرس، چک، آلمان، دانمارک، استونی، اسپانیا، فنلاند، فرانسه، انگلستان، یونان، کرواسی، مجارستان، ایرلند، ایسلند، ایتالیا، لیختن اشتاین، لیتوانی، لوکزامبورگ، لتونی، مالت، هلند نروژ، لهستان، پرتغال، رومانی، سوئد، اسلوونی، اسلواکی.

اگر در یکی از آن کشورها هستید، اکنون می‌توانید از Gemini بخواهید که اطلاعات بینش را مستقیماً در کنسول ارائه کند، بنابراین بهتر می‌توانید خطاها و هشدارها را درک کنید.

بینشی از Gemini برای خطا در کنسول.

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

این به روز رسانی چند پیشرفت را در پنل عملکرد به ارمغان می آورد.

آهنگ شبکه پیشرفته

مسیر شبکه در پانل عملکرد بهبود یافته است تا اطلاعات مهم را از قبل نشان دهد، بنابراین لازم نیست بین پانل شبکه و برگه Performance > Summary جابجا شوید و وضوح بیشتری در نشانه‌های بصری و رنگ‌ها ارائه دهید. بعلاوه، اگر همچنان نیاز به جابجایی به پنل شبکه دارید، این کار را برای شما آسان‌تر و سریع‌تر کرده‌ایم.

تراک Network اکنون کارهای زیر را انجام می دهد:

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

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

علاوه بر این، اکنون می توانید روی درخواست موجود در آهنگ یا URL آن در تب Summary کلیک راست کرده و از منوی کشویی گزینه Reveal in Network panel را انتخاب کنید. DevTools شما را به پنل Network می برد و درخواستی را که به دنبال آن هستید در جدول برجسته می کند.

منوی درخواست را با گزینه "Reveal in Network panel" کلیک راست کنید.

داده های عملکرد را با API توسعه پذیری سفارشی کنید

این نسخه پشتیبانی از داده های برنامه افزودنی را به پنل Performance می آورد. اکنون می‌توانید آهنگ‌های سفارشی همراه با رویدادها و توضیحات راهنمای ابزار را به ردیابی عملکرد، جزئیات به برگه Summary و موارد دیگر اضافه کنید. این ویژگی ممکن است برای توسعه دهندگان چارچوب ها، کتابخانه ها و برنامه های پیچیده با ابزار دقیق سفارشی مفید باشد.

نمونه ای از یک آهنگ سفارشی را در این صفحه نمایشی ببینید. در Performance > Capture settings ، check_box Extension data را روشن کنید. ضبط عملکرد را شروع کنید، روی Add new Corgi در صفحه نمایشی کلیک کنید، سپس ضبط را متوقف کنید. یک مسیر سفارشی را در ردیابی خواهید دید که حاوی رویدادهایی با نکات ابزار و جزئیات سفارشی در تب Summary است.

یک آهنگ سفارشی در پانل عملکرد.

به طور خلاصه، برای گسترش داده های عملکرد، یک ساختار خاص را به پارامترهای measureOption.detail یا markOption.detail فراخوانی های API performance.measure() یا performance.mark() منتقل کنید.

جزئیات در مسیر زمان بندی

اگر یک توسعه‌دهنده وب هستید که از بخش زمان‌بندی کاربر از API عملکرد برای افزودن ورودی‌ها به آهنگ زمان‌بندی استفاده می‌کنید، اکنون می‌توانید جزئیات دلخواه خود را در برگه خلاصه برای mark و measure رویدادها و مهرهای زمانی آن‌ها ببینید.

یک رویداد سفارشی در مسیر Timeings با مهر زمانی و جزئیات.

شماره Chromium: 345418915 .

تمام درخواست های فهرست شده را در پنل شبکه کپی کنید

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

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

عکس‌های فوری پشته‌ای سریع‌تر با برچسب‌های HTML نام‌گذاری شده و درهم‌تنیدگی کمتر

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

اشیاء گروه بندی شده توسط برچسب های HTML نامگذاری شده.

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

برای قرار دادن دستی اشیاء داخلی در عکس فوری، ابتدا تنظیمات را روشن کنید، تنظیمات > آزمایش‌ها > گزینه check_box نمایش برای نمایاندن موارد داخلی در عکس‌های فوری پشته‌ای ، سپس check_box Expose interiors (...) را در پانل حافظه روشن کنید.

مسائل Chromium: 41490040 , 343341610 , 42203857 .

پانل انیمیشن ها را باز کنید تا انیمیشن ها را ضبط کنید و @keyframes را به صورت زنده ویرایش کنید

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

  • با باز کردن پانل، انیمیشن‌هایی را می‌گیرد که در حال حاضر در حال انجام هستند، بنابراین برای گرفتن انیمیشن‌ها نیازی به بازخوانی صفحه ندارید.
  • از ویرایش زنده @keyframes پشتیبانی می کند. به عبارت دیگر، با ویرایش بخش @keyframes در Elements > Styles ، انیمیشن گرفته شده را به‌روزرسانی می‌کند.

هر دو ویژگی را در عمل در ویدیوی زیر مشاهده کنید.

شماره Chromium: 352718055 .

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

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

این به‌روزرسانی تعدادی تغییرات، از جمله حذف معیار قدیمی First Meaningful Paint (FMP) به نفع Largest Contentful Paint (LCP) به همراه دارد. لیست کامل تغییرات را ببینید.

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

شماره Chromium: 772558 .

دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

  • فشار دادن Tab پس از تکمیل خودکار در قسمت ویرایش عبارات زنده، فوکوس را به نقطه فوکوس بعدی منتقل می کند. قبلاً متن را تورفتگی می کرد.
  • با کلیک بر روی یک تغییر اندازه، تمرکز روی آن قرار می گیرد، بنابراین می توانید آن را با کلیدهای جهت دار راست و چپ حرکت دهید.
  • اکنون یک صفحه‌خوان فیلد ویرایش عبارت افزودن ساعت را در منابع اعلام می‌کند و عبارت Delete Watch اکنون هنگام پیمایش با صفحه‌کلید به وضوح قابل مشاهده است.

مسائل Chromium: 349939551 , 343942719 , 349334243 , 349428374 .

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

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

  • کارایی :
    • مسیر شبکه : رویدادهای اتصال WebSocket اضافه شد 331351979 .
    • اکنون پانل عملکرد به درستی روی شلوغ ترین فعالیت رشته اصلی 345599356 بزرگنمایی می کند.
    • یک اشکال در آپلود انواع فایل ردیابی اشتباه برطرف شد، اکنون از آپلود هر نوع به جز .json . یا .gz 349864878 صحیح جلوگیری می کند.
  • عناصر > سبک ها :
    • واحد کشویی در مقادیر ویژگی طول اکنون منسوخ شده است 41495618 .
    • ویژگی‌های فعال حل‌وفصل برای قانون‌های تودرتو 346732737 .
    • بخش‌های غیرفعال @position-try اکنون خاکستری شده‌اند 40246493 .
  • کاربرد :
    • کوکی ها : رفع اشکالی که با کلیک بر روی Refresh روی 348683488 ، کوکی ها را تازه نمی کند.
    • حافظه محلی : اکنون می توانید بر اساس کلیدها بر اساس حروف الفبا 341129585 مرتب کنید.

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

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

تماس با تیم Chrome DevTools

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

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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

کروم 128

کروم 127

کروم 126

کروم 125

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

کروم 118

کروم 117

کروم 116

کروم 115

کروم 114

کروم 113

کروم 112

کروم 111

کروم 110

کروم 109

کروم 108

کروم 107

کروم 106

کروم 105

کروم 104

کروم 103

کروم 102

کروم 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

کروم 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

کروم 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

کروم 74

کروم 73

کروم 72

کروم 71

کروم 70

کروم 68

کروم 67

کروم 66

کروم 65

کروم 64

کروم 63

کروم 62

کروم 61

کروم 60

کروم 59