چیزهای جدید در 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 استفاده کنید.

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

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59