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

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

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

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

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

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

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

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

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

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

شماره Chromium: 362672528 .

صادرات HAR اکنون داده های حساس را به طور پیش فرض حذف می کند

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

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

قبل و بعد از افزودن گزینه های صادرات با و بدون داده های حساس به صادرات HAR.

شماره Chromium: 361717594 .

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

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

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

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

قبل و بعد از افزودن گزینه تکمیل خودکار برای ویژگی های «تأکید متن-*».

شماره Chromium: 361471205 .

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

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

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

شماره Chromium: 40670442 .

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

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

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

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

  background-color: green;
}

قبل و بعد از اجازه دادن به اعلامیه های خالی بعد از قوانین تودرتو.

شماره Chromium: 358119261 .

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

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

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

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

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

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

توصیه ها را برای تقریبی تجربه کاربران خود دنبال کنید .

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

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

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

نمایه جدید "عناصر جدا شده".

پانل حافظه یک نوع نمایه جدید دریافت می کند - عناصر جدا شده . اشیایی را نشان می دهد که توسط یک مرجع جاوا اسکریپت حفظ شده اند.

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

شماره Chromium: 350519222 .

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

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

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

قبل و بعد از سازماندهی دسته Object در عکس های فوری پشته ای.

شماره Chromium: 350519222 .

طرح زمینه پویا را خاموش کنید

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

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

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

شماره Chromium: 328472696 .

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

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

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

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

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

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

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

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

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

شماره Chromium: 772558 .

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

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

  • عناصر :
    • رفع چندگانه برای ویرایش CSS تو در تو ( 41486635 , 361477264 , 328263458 , 41487826 ).
    • تجزیه خصوصیات سفارشی تعریف شده اما با مقدار خالی به صورت تعریف نشده ثابت شد ( 365578428 ).
  • کنسول : در دستورات cURL یک آمپرسند بدون فرار را در رشته های چند خطی رفع کرد ( 352651673 ).
  • حافظه : انتخاب پیش‌فرض در صفحات دارای سرویس‌دهنده، موضوع اصلی اکنون انتخاب شده است ( 40669896 ) ثابت شد.
  • امنیت : طرح URL که برجسته می شود اکنون با تغییر مرحله امنیتی مبدا به درستی به روز می شود ( 359920086 ).

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

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

تماس با تیم Chrome DevTools

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

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

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