بیاموزید که چگونه DevTools باعث می‌شود با تکمیل خودکار کنسول هوشمند کمتر تایپ کنید، چگونه قوانین @keyframe را مستقیماً در قسمت Styles ویرایش کنید، چگونه با متغیرهای سفارشی CSS سرگرم شوید و چگونه به قسمت تاریک بپیوندید.
تکمیل خودکار هوشمندتر در کنسول شما
اگر شما مانند من و خیلی های دیگر هستید، دستوری را در کنسول تایپ می کنید تا برنامه خود را اشکال زدایی کند، ببینید کار نمی کند، تکرار کنید و آن را دوباره و دوباره و دوباره تایپ کنید. به منظور کمک به آن، اکنون در حال تکمیل خودکار بیانیه‌های کاملی هستیم که قبلاً تایپ کرده‌اید، مانند:
به طور مستقیم قوانین keyframe@ را در پنجره Styles ویرایش کنید
هنگامی که بازرس انیمیشن و ویرایشگر آسان‌سازی را به DevTools معرفی کردیم، به انتقال محدود می‌شد زیرا هرگز انیمیشن‌های CSS مبتنی بر @keyframe را در صفحه Style نشان ندادیم. من خوشحالم که بگویم که اکنون به گذشته مربوط می شود، پس وحشی شوید! برای پیش نمایش، توییت ویدیوی ما را بررسی کنید.
پشتیبانی از خصوصیات CSS سفارشی
مزایای زیادی برای CSS وجود دارد، و یکی از آنها متغیرهای سفارشی است که در Chrome 49 راه اندازی می شود. ما مطمئن شدیم که پشتیبانی کامل را در DevTools گنجانده ایم، بنابراین اگر قبلاً از متغیرها در Sass استفاده کرده اید، متغیرهای بومی را امتحان کنید. ، زیرا به شما این امکان را می دهند که خصوصیات را به سرعت در قسمت Styles ویرایش کنید و بلافاصله عناصر وابسته را به روز کنید.
یک تم تاریک برای DevTools
ما در نهایت به درخواستی که در چند سال گذشته ده‌ها بار شنیده‌ایم تسلیم شدیم: اکنون می‌توانید سمت تاریک را در DevTools انتخاب کنید. به تنظیمات DevTools بروید، تم را روی تیره تنظیم کنید و لذت ببرید. من می‌توانم بگویم که این هنوز در نسخه بتا است، زیرا بسیاری از آنها به‌طور خودکار تولید می‌شوند، بنابراین اگر مناطقی را مشاهده کردید که می‌توانند شاهد بهبود باشند، حتماً به ما اطلاع دهید !
بهترین بقیه
- کشوی کنسول اکنون با کلیک بر روی برگه کامل کنسول به طور خودکار جمع می شود.
- درخت فایل در Sources با آیکون‌های جدید و عملکرد گروه‌بندی جدید بازنگری خوبی داشت
مثل همیشه، نظر خود را از طریق توییتر یا نظرات زیر به ما اطلاع دهید و اشکالات را به crbug.com/new ارسال کنید.
تا ماه آینده!
پل باکاوس و تیم DevTools