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

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

بهبود پنل شبکه

این نسخه بهبودهای زیادی را در پنل شبکه به همراه دارد.

فیلترهای شبکه دوباره طراحی شدند

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

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

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

برای بازگرداندن طراحی فیلتر قدیمی، را پاک کنید. تنظیمات > آزمایش‌ها > نوار فیلتر را در پنل شبکه دوباره طراحی کنید .

نظرتان را در مورد طراحی مجدد با ما در میان بگذارید .

مشکل کرومیوم: ۳۶۲۶۷۲۵۲۸

خروجی‌های HAR اکنون به‌طور پیش‌فرض داده‌های حساس را حذف می‌کنند

برای کاهش احتمال نشت تصادفی اطلاعات حساس، گزارش شبکه‌ای که با فرمت HAR صادر می‌شود، دیگر به‌طور پیش‌فرض حاوی هدرهای Cookie ، Set-Cookie و Authorization نخواهد بود.

برای خروجی گرفتن از لاگ‌ها با فرمت HAR به همراه داده‌های حساس ، تنظیمات تنظیمات برگزیده > شبکه > «اجازه تولید HAR با داده‌های حساس» را فعال کنید. پنل شبکه ، دکمه‌ی خروجی» را با یک فلش مشخص می‌کند. روی دکمه کلیک طولانی کنید و از منوی کشویی، گزینه‌ی «خروجی HAR (با داده‌های حساس)» را انتخاب کنید.

قبل و بعد از افزودن گزینه‌های خروجی با و بدون داده‌های حساس به خروجی HAR.

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

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

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

مقادیر تکمیل خودکار برای ویژگی‌های text-emphasis-*

تکمیل خودکار در تب Styles اکنون مقادیری را برای ویژگی‌های CSS زیر پیشنهاد می‌دهد:

قبل و بعد از اضافه کردن گزینه تکمیل خودکار برای ویژگی‌های 'text-emphasis-*'.

شماره کروم: ۳۶۱۴۷۱۲۰۵

سرریزهای پیمایش با نشان مشخص شده‌اند

پنل عناصر اکنون با یک نشان جدید «پیمایش» عناصری را که حاوی محتوای سرریز هستند و دارای overflow: scroll یا overflow: auto هستند، علامت‌گذاری می‌کند، بنابراین می‌توانید به راحتی سرریزهای پیمایش را تشخیص دهید. مانند سایر نشان‌ها، این نشان DOM فعلی را منعکس می‌کند و اگر سرریز محتوا به دلیل، مثلاً تغییر اندازه، متوقف شود، ناپدید می‌شود.

قبل و بعد از علامت‌گذاری، طومار با یک نشان سرریز می‌شود.

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

اعلان‌های ساده پس از قوانین تو در تو، به سمت بالا تغییر نمی‌کنند

پیرو تصمیم گروه کاری CSS مبنی بر مجاز دانستن اعلان‌های ساده پس از قواعد تودرتو ، تب Styles اکنون این اعلان‌ها را در حین تجزیه به سمت بالا «جابجا» نمی‌کند.

در نمونه کد زیر، تعریف ساده بعد از قانون تو در تو، دیگر باعث نمی‌شود که کروم به طور غیرمنتظره‌ای استایل‌ها را در آبشار تغییر ترتیب دهد:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

قبل و بعد از اینکه اجازه داده شود اعلان‌های ساده بعد از قوانین تو در تو بیایند.

شماره کروم: ۳۵۸۱۱۹۲۶۱ .

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

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

توصیه‌ها در معیارهای زنده

معیارهای زنده اکنون می‌توانند توصیه‌های مختص به هر معیار را ارائه دهند که به شما کمک می‌کند محیط توسعه خود را تا حد امکان نزدیک به آنچه کاربران شما تجربه می‌کنند، پیکربندی کنید.

برای دریافت توصیه‌ها، واکشی داده‌های میدانی از گزارش تجربه کاربری کروم (CrUX) را تنظیم کنید و بخش «شرایط آزمایش محلی خود را در نظر بگیرید » را در هر کارت متریک (در صورت وجود) گسترش دهید و در تنظیمات «محیط زیست» بخش «محیط‌های کاربر واقعی را در نظر بگیرید» را انتخاب کنید .

بخش‌های گسترده‌تر با توصیه‌ها.

برای نزدیک شدن به تجربه کاربرانتان ، توصیه‌ها را دنبال کنید .

اکنون می‌توانید در تایم‌لاین یک ضبط اجرا، در میان breadcrumbها حرکت کنید: بین breadcrumbها «جابجا» شوید، breadcrumbهای فرزند را بازنویسی کنید و چندین فرزند را حذف کنید. پیش از این، وقتی یک breadcrumb والد را انتخاب می‌کردید، فرزندان آن ناپدید می‌شدند.

بهبود پنل حافظه

این نسخه بهبودهای زیادی در پنل حافظه ایجاد کرده است.

نمایه جدید «عناصر جدا شده»

پنل حافظه یک نوع نمایه جدید به نام عناصر جدا شده (Detached elements ) دریافت می‌کند. این نوع نمایه، اشیایی را نشان می‌دهد که توسط یک ارجاع جاوا اسکریپت حفظ می‌شوند.

قبل و بعد از افزودن نوع پروفایل «عناصر جدا شده» به پنل حافظه.

شماره کروم: 350519222

نامگذاری بهبود یافته اشیاء ساده JS

برای سازماندهی و مرتب‌سازی دسته‌بندی Object در اسنپ‌شات‌های heap، اشیاء ساده جاوااسکریپت اکنون به صورت زیر هستند:

  • بر اساس ویژگی‌هایی که دارند نامگذاری می‌شوند، برای مثال، {firstProperty, secondProperty, ..., *nthProperty} .
  • قابل جستجو بر اساس این نام‌هایی که توسط DevTools ساخته شده‌اند.
  • اگر خواص یکسانی داشته باشند، در یک گروه قرار می‌گیرند.

قبل و بعد از سازماندهی دسته بندی اشیاء در اسنپ‌شات‌های هیپ.

شماره کروم: 350519222

غیرفعال کردن قالب‌بندی پویا

اکنون می‌توانید تطبیق خودکار رنگ‌های DevTools با رنگ‌های تم سفارشی خود را در کروم غیرفعال کنید.

برای خاموش کردن تم پویا، را پاک کنید. تنظیمات > تنظیمات برگزیده > ظاهر > طرح رنگی Chrome را مطابقت دهید و DevTools را دوباره بارگذاری کنید.

قبل و بعد از غیرفعال کردن قالب‌بندی پویا.

مشکل کروم: ۳۲۸۴۷۲۶۹۶

آزمایش کروم: اشتراک‌گذاری فرآیند

معمولاً وقتی چندین تب را از یک وب‌سایت (مانند Google Docs ) باز می‌کنید، کروم برای هر کدام یک فرآیند رندر جداگانه ایجاد می‌کند. آزمایش اشتراک‌گذاری فرآیند، این وضعیت را تغییر می‌دهد و به چندین تب اجازه می‌دهد تا فرآیند رندر یکسانی را به اشتراک بگذارند تا عملکرد بهبود یابد.

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

نوار اطلاعات «این برگه منابع را با برگه‌های دیگر به اشتراک می‌گذارد...»

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

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

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

این به‌روزرسانی آستانه‌ی نادیده گرفتن < 20 KB را برای پیشنهادهای فشرده‌سازی منابع معرفی می‌کند تا به شما کمک کند فقط روی صرفه‌جویی معنادار در حجم فایل تمرکز کنید. فهرست کامل تغییرات را ببینید.

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

مشکل کروم: ۷۷۲۵۵۸

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

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

  • عناصر :
  • کنسول : رفع مشکل علامت & بدون escape در رشته‌های چندخطی در دستورات cURL ( 352651673 ).
  • حافظه : انتخاب پیش‌فرض در صفحات دارای سرویس ورکر برطرف شد، اکنون نخ اصلی انتخاب شده است ( 40669896 ).
  • امنیت : طرح برجسته‌سازی URL اکنون با تغییر سطح امنیتی مبدا به درستی به‌روزرسانی می‌شود ( 359920086 ).

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

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

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

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

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

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