این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

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

کپی سبک ها

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

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

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

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

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

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

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

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

Chromium شماره 961846

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

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

یک apple-touch-icon معتبر ارائه می دهد . بررسی می کند که PWA می تواند به صفحه اصلی iOS اضافه شود.
تعداد درخواست ها و اندازه فایل ها را کم نگه دارید . تعداد کل درخواست های شبکه و اندازه فایل ها را برای دسته های مختلف مانند اسناد، اسکریپت ها، شیوه نامه ها، تصاویر و غیره گزارش می دهد.
حداکثر تاخیر ورودی اول بالقوه حداکثر زمان بالقوه بین تعامل صفحه اول کاربر و پاسخ مرورگر به آن تعامل را اندازه گیری می کند. توجه داشته باشید که این معیار جایگزین معیار تأخیر ورودی تخمینی شده است. حداکثر تاخیر ورودی اول بالقوه در امتیاز دسته عملکرد شما تاثیری ندارد.

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

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

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