موارد جدید در 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 پوشش داده شده است.

،

سوفیا املیانوا
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 پوشش داده شده است.

،

سوفیا املیانوا
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 پوشش داده شده است.

،

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

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

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

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

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

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

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

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

به ما اطلاع دهید که در مورد طرح مجدداً تصور می کنید .

شماره کروم: 362672528 .

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

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

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

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

شماره کروم: 361717594 .

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

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

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

خودکار در برگه Styles اکنون مقادیر مربوط به خواص CSS زیر را پیشنهاد می کند:

قبل و بعد از اضافه کردن گزینه خودکار برای خواص "متن-متن-*".

شماره کروم: 361471205 .

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

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

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

شماره کروم: 40670442 .

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

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

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

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

  background-color: green;
}

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

شماره کروم: 358119261 .

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

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

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

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

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

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

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

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

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

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

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

پانل حافظه عناصر جدا شده ای از Profile Type را دریافت می کند. این اشیاء را نشان می دهد که توسط یک مرجع JavaScript حفظ می شوند.

قبل و بعد از اضافه کردن نوع نمایه "جدا شده عناصر" به صفحه حافظه.

شماره کروم: 350519222 .

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

برای سازماندهی و تركیب گروه Object در عکسهای پشته ، اشیاء JavaScript ساده در حال حاضر هستند:

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

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

شماره کروم: 350519222 .

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

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

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

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

شماره کروم: 328472696 .

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

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

اگر پیامی را مشاهده می کنید که می گوید "این برگه منابع را با سایر برگه ها به اشتراک می گذارد ..." Infobar در حالی که DevTools باز است ، پس شما بخشی از گروه کوچک هستید که آزمایش به اشتراک گذاری فرآیند فعال شده است.

"این برگه منابع را با زبانه های دیگر به اشتراک می گذارد ..." Infobar.

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

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

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

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

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

شماره کروم: 772558 .

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

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

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

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

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

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

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

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

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