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

Kayce Basques

کپی کردن استایل‌های عنصر

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

شکل ۱. کپی کردن استایل‌های عناصر.

از آدام آرگایل و ویس‌باگ بابت الهام‌بخشی‌شان متشکرم.

تغییرات طرح‌بندی را تجسم کنید

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

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

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

شکل ۲. تغییر طرح‌بندی.

مشکل کرومیوم شماره ۹۶۱۸۴۶

لایت‌هاوس ۵.۱ در پنل حسابرسی‌ها

پنل حسابرسی (Audits) اکنون از Lighthouse 5.1 استفاده می‌کند. حسابرسی‌های جدید شامل موارد زیر است:

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

شکل ۳. رابط کاربری جدید پنل حسابرسی‌ها.

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

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

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

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

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

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

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

پیش دریافت کش در پنل شبکه

ستون اندازه پنل شبکه اکنون می‌گوید (prefetch cache) وقتی منبعی از prefetch cache بارگیری شده است. prefetch یک ویژگی نسبتاً جدید پلتفرم وب برای سرعت بخشیدن به بارگذاری‌های بعدی صفحه است. آیا می‌توانم از ... استفاده کنم؟ گزارش‌ها حاکی از آن است که از ژوئیه ۲۰۱۹ در ۸۳.۳۳٪ از مرورگرهای جهانی پشتیبانی می‌شود.

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

برای امتحان کردن، به نسخه آزمایشی Prefetch مراجعه کنید.

مشکل کرومیوم شماره ۹۳۵۲۶۷

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

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

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

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

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

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

شکل ۷. پنل‌های جدید پیام‌های فوری و اعلان‌ها در پنل برنامه‌ها.

مشکل کرومیوم شماره ۹۲۷۷۲۶

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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