چیزهای جدید در DevTools (Chrome 77)

کیسی باسکی

کپی کردن سبک های عنصر

روی یک گره در درخت DOM کلیک راست کنید تا CSS آن گره DOM را در کلیپ بورد خود کپی کنید.

کپی سبک ها

شکل 1. سبک های عنصر را کپی کنید.

با تشکر از Adam Argyle و VisBug برای الهام بخش .

تغییرات چیدمان را تجسم کنید

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

DevTools اکنون می تواند به شما در تشخیص تغییر طرح کمک کند:

  1. منوی فرمان را باز کنید.
  2. شروع به تایپ Rendering کنید.
  3. دستور Show Rendering را اجرا کنید.
  4. کادر بررسی Layout Shift Regions را فعال کنید. همانطور که با یک صفحه تعامل می کنید، تغییرات طرح بندی به رنگ آبی برجسته می شوند.

یک تغییر چیدمان

شکل 2. تغییر طرح.

Chromium شماره 961846

Lighthouse 5.1 در پنل حسابرسی

اکنون پنل حسابرسی Lighthouse 5.1 را اجرا می کند. ممیزی های جدید عبارتند از:

رابط کاربری جدید پنل حسابرسی.

شکل 3. رابط کاربری جدید پنل حسابرسی.

نسخه‌های Node و CLI Lighthouse 5.1 دارای 3 ویژگی اصلی جدید هستند که ارزش بررسی دارند:

  • بودجه های عملکردی با تعیین تعداد درخواست‌ها و اندازه فایل‌هایی که صفحات نباید از آنها تجاوز کنند، از پسرفت سایت خود در طول زمان جلوگیری کنید.
  • پلاگین ها فانوس را با ممیزی های سفارشی خود گسترش دهید.
  • بسته های پشته ای ممیزی های متناسب با پشته های فناوری خاص را اضافه کنید. بسته پشته وردپرس ابتدا ارسال شد. React و AMP Stack Pack در حال توسعه هستند.

همگام سازی تم سیستم عامل

اگر از تم تیره سیستم عامل خود استفاده می کنید، DevTools اکنون به صورت خودکار به تم تیره خود تغییر می کند.

میانبر صفحه کلید برای باز کردن ویرایشگر نقطه شکست

هنگامی که در ویرایشگر پنل Sources فوکوس می کنید، Control + Alt + B یا Command + Option + B (Mac) را فشار دهید تا ویرایشگر نقطه شکست باز شود. از ویرایشگر نقطه انفصال برای ایجاد Logpoints و Breakpoint Conditional استفاده کنید.

ویرایشگر نقطه شکست.

شکل 4. ویرایشگر نقطه شکست .

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

اکنون ستون Size پانل شبکه می گوید (prefetch cache) زمانی که منبعی از کش اولیه بارگیری شد. Prefetch یک ویژگی جدید پلتفرم وب برای افزایش سرعت بارگذاری صفحات بعدی است. آیا می توانم استفاده کنم... گزارش می دهد که از ژوئیه 2019 در 83.33٪ از مرورگرهای جهانی پشتیبانی می شود.

ستون Size که نشان می دهد منابع از حافظه پنهان پیش واکشی آمده اند.

شکل 5. ستون Size نشان می دهد که prefetch2.html و prefetch2.css از (prefetch cache) آمده اند.

برای امتحان کردن، نسخه نمایشی واکشی اولیه را ببینید.

Chromium شماره 935267

خصوصیات خصوصی هنگام مشاهده اشیاء

کنسول اکنون فیلدهای کلاس خصوصی را در پیش نمایش های شی خود نشان می دهد.

هنگام بررسی یک شی، کنسول اکنون فیلدهای خصوصی مانند '#color' را نشان می دهد.

شکل 6. نسخه قدیمی کروم در سمت چپ، فیلد #color را هنگام بازرسی شی نشان نمی دهد، در حالی که نسخه جدید در سمت راست نشان می دهد.

اعلان ها و پیام های فشار در پانل برنامه

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

همانند ویژگی‌های Background Fetch و Background Sync از Chrome 76 ، پس از شروع ضبط، پیام‌های فشاری و اعلان‌ها در این صفحه به مدت 3 روز ضبط می‌شوند، حتی زمانی که صفحه بسته است، و حتی زمانی که Chrome بسته است.

پنجره های جدید اعلان ها و پیام های فشاری.

شکل 7. پنجره های جدید Push Messages و Notifications در پنل Application.

Chromium شماره 927726

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

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

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

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

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

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