بیاموزید که چگونه DevTools ابتدا با یک حالت جدید و کارآمد Device Mode که همیشه روشن است، به موبایل تبدیل می شود. از دکمه های رنگی استفاده کنید تا به سرعت رنگ ها را به انتخابگرهای خود اضافه کنید و بدانید که به زودی چه چیزی به DevTools می آید.
نگاهی اجمالی به آینده نویسندگی
ما به تازگی از جلسه Chrome Dev Summit برمی گردیم، جایی که به شما نشان دادم کار با DevTools امروز و آینده چگونه است. من معمولاً در این خلاصه به هیچ ویژگی که هنوز آزمایش یا کارهای سنگین پیشرفت است اشاره نمی کنم، اما این بار استثنا قائل می شوم. اگر وقت ندارید کل سخنرانی را تماشا کنید، اصل مطلب اینجاست:
حالت دستگاه نسخه 2
ما هنوز به شدت روی این تکرار جدید و جسورانه از حالت دستگاه کار می کنیم، اما می خواهیم به همه فرصتی بدهیم تا آن را امتحان کنند، بنابراین امروز آن را در قناری شما فعال کردیم. با تغییرات، ما DevTools را به سمت آینده‌ای که اول از همه تلفن همراه است سوق می‌دهیم که در آن توسعه موبایل پیش‌فرض است و توسعه دسک‌تاپ «افزونه» است. پس از اتمام کار، انتظار تکرار بیشتری را در چند هفته آینده با یک پست وبلاگ گسترده داشته باشید.
بازرسی قدرتمند انیمیشن
بازرسی انیمیشن کار در حال انجام تصویری کامل و دقیق از آنچه روی هر چیزی در حال حرکت اتفاق می افتد به شما می دهد. به‌جای اینکه انتقالی را در یک عنصر به شما نشان دهیم، اکتشافی‌هایی را اضافه کردیم که انیمیشن‌های پیچیده را گروه‌بندی می‌کنند تا بتوانید روی همه آنچه می‌بینید تمرکز کنید. به ویدیو نگاهی بیندازید. وقتی به طور کامل راه اندازی شد، یک پست وبلاگ مستقل و بزرگتر ارائه خواهیم کرد.
حالت چیدمان (نگاهی دزدکی)
کاملاً برای پرایم تایم آماده نیست، اما حالت چیدمان جدید بسیار امیدوارکننده است، ویژگی که نمی‌توانم منتظر بمانم تا آن را به طور کامل ببینم. Layout Mode قابلیت ویرایش WYSIWYG را برای هر عنصری در صفحه به DevTools اضافه می کند. تا اینجا، ارتفاع، عرض، بالشتک ها و حاشیه ها را می توان در زمینه ویرایش کرد. کمی بیشتر طول می کشد تا ما آماده باشیم که به شما اجازه امتحان دهیم، اما شما را در جریان قرار خواهیم داد.
پروفایل عملکرد با پانل به روز شده Timeline
به عنوان بخشی از یک فشار بزرگتر برای معرفی مدل جدید عملکرد RAIL ، صدها تغییر کوچکتر و بزرگتر در پانل تایم لاین ایجاد شده است، و با هم داستان پروفایل عملکرد را تا حدی تغییر داده و بهبود می بخشند. بنابراین، به جای نشان دادن هر تغییر فردی در انزوا، پل آیریش خودمان به ما نشان داد که چگونه عملکرد یک سایت، در این مورد سایت موبایل هتل امشب، را به صورت زنده روی صحنه به درستی اشکال زدایی کنیم. از جمله ویژگی‌های جدید اعلام‌شده می‌توان به نوارهای بارگذاری و عملکرد ، آبشار شبکه شامل ، خلاصه درخت و امکان مشاهده هزینه‌های پرف بر اساس دامنه و فایل اشاره کرد .
به راحتی رنگ های پیش زمینه و پس زمینه را به هر عنصر اضافه کنید
هر زمان که می خواستید یک ویژگی رنگ پس زمینه یا رنگ را به عنصر خود اضافه کنید، نمی توانید انتخابگر رنگ را باز کنید. در عوض، بیشتر شما چیزی مانند «پس‌زمینه: قرمز» را تایپ می‌کنید. هر بار که نماد انتخابگر رنگ ظاهر می شود، سپس رنگ واقعی مورد نظر خود را انتخاب کنید.
ما فکر کردیم که می توانیم این را ساده کنیم. ما دو دکمه جالب اضافه کردیم که هنگام نگه داشتن ماوس روی گوشه سمت راست پایین انتخابگر ظاهر می‌شوند و به شما امکان می‌دهند یک رنگ اضافه کنید و انتخابگر را تنها با یک کلیک بالا بیاورید:
بهترین بقیه
- ما بسیاری از املاک و مستغلات قبلی را در پانل Style با نشان دادن انواع رسانه های عمومی تلف کرده ایم. اگر غیرعادی نباشد، اکنون آن چیزها را قبل از انتخاب کنندگان شما پنهان می کنیم!
- اکنون می توانید برای مدت طولانی روی یک انتخابگر CSS در پانل Style نگه دارید تا ببینید چه تعداد عنصر در صفحه اعمال می شود.
- هنوز چاپ را رها نکردید؟ شبیه سازی رسانه چاپی هنوز وجود دارد تا ببینیم صفحه شما هنگام چاپ چگونه به نظر می رسد - ما فقط آن را به تنظیمات رندر منتقل کردیم.
- هنگام انتخاب یک عنصر برای بازرسی، اکنون درخت فرعی DOM مربوطه را به طور خودکار گسترش داده و می بندیم. توضیح دادن سخت است، دیدن باور کردن است .
مثل همیشه، نظر خود را از طریق توییتر یا نظرات زیر به ما اطلاع دهید و اشکالات را به crbug.com/new ارسال کنید.
تا ماه آینده!
پل باکاوس و تیم DevTools