DevTools Digest - ویرایش عناصر کارآمد، اشکال‌زدایی کارگر سرویس و سایه‌های طراحی متریال

از منوی زمینه جدید پانل DOM برای ویرایش موثر گره ها استفاده کنید. کارکنان خدمات را مستقیماً از طریق پنل Resources اشکال زدایی کنید. از میان تمام سایه‌های طراحی متریال در انتخابگر رنگ انتخاب کنید. کتابخانه Blackbox JS راحت تر است.

منوی زمینه جدید و بهبود یافته پانل DOM

منوی زمینه جدید DOM.

ما پرکاربردترین اقدامات را در پانل DOM تجزیه و تحلیل کرده‌ایم و به این نتیجه رسیده‌ایم که منوی زمینه کلیک راست باید نامرتب باشد و دوباره سازماندهی شود.

اکنون پنهان کردن یا حذف سریع یک عنصر، راه اندازی حالت خاصی مانند :active یا :hover یا ویرایش HTML آن بسیار ساده تر است. و اگر روی ترک‌پد هستید و نمی‌خواهید کلیک راست را خسته کنید، به جای آن روی سه نقطه کوچک کنار عنصر انتخاب‌شده کلیک کنید.

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

کارگران خدمات پس از راه‌اندازی فوق‌العاده هستند، اما می‌توانند در اوایل سر خود را پیچیده کنند. با این واقعیت که برای رفع اشکال آنها باید DevTools را ترک کنید و chrome://serviceworker-internals/ را در یک پنجره مرورگر جدید باز کنید، بدتر شد.

کارکنان خدمات در منابع

دیگر نه! اکنون می توانید به طور مستقیم از پنل منابع، سرویس کارگران را برای دامنه فعلی اشکال زدایی کنید. این هنوز یک کار در حال پیشرفت است، اما در حال حاضر یک پیشرفت بزرگ نسبت به وضعیت موجود قبلی است.

همه رنگ‌ها: سایه‌های طراحی متریال در رنگ‌گیر

چند هفته پیش ، ما پالت Material Design را به colorpicker اضافه کردیم تا رنگ‌های اصلی و برجسته را به شما ارائه دهیم. برای طراحی واقعی یک صفحه کامل، ناگزیر به دسترسی کامل به تمام سایه های طراحی متریال نیاز دارید، بنابراین ما آنها را آماده کرده ایم.

برای نمایش سایه ها، یکی از رنگ های اصلی را به مدت طولانی فشار دهید و به جای آن روی یک سایه کلیک کنید.

کتابخانه های جاوا اسکریپت بلک باکس در تنظیمات راحت تر است

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

اکنون آن را به تنظیمات منتقل کرده ایم. آن را امتحان کنید:

بلک باکسینگ

بهترین بقیه

  • دسترسی به کلیدهای Rendering را ندارید؟ تنظیمات رندر به منوی اصلی DevTools (در زیر "ابزارهای بیشتر") منتقل شده است. ما علاوه بر مظنونین معمولی (یعنی FPS متر)، "مشابه رسانه چاپی" را نیز به آنجا منتقل کرده ایم.
  • از تایپ chrome://inspect در Omnibox خسته شده اید؟ Inspect Devices را اکنون می توانید در منوی اصلی جدید در زیر "ابزارهای بیشتر" نیز پیدا کنید.
  • به طور تصادفی یکی از این برگه‌های کشو قابل بسته مانند Rendering یا Search را بست؟ اکنون می توانید آنها را با منوی جدید در سمت چپ باز کنید.

مثل همیشه، نظر خود را از طریق توییتر یا نظرات زیر به ما اطلاع دهید و اشکالات را به crbug.com/new ارسال کنید.

تا ماه آینده!
پل باکاوس و تیم DevTools