تعدادی از ویژگیهای بهروزرسانی شده، اخیراً برخی کوچک و برخی بزرگ، آن را به ابزار توسعه کروم تبدیل کردهاند. ما با بهروزرسانیهای پنل Element شروع میکنیم و در مورد کنسول، تایم لاین و موارد دیگر صحبت میکنیم.
قوانین سبک غیرفعال طبق نظر کپی کنید
کپی کردن کل قوانین CSS در صفحه سبکها اکنون شامل سبکهایی میشود که شما آنها را خاموش کردهاید، آنها همانطور که در نظر گرفته شده در کلیپبورد شما وجود خواهند داشت. [ crbug.com/316532 ]
به عنوان مسیر CSS کپی کنید
«کپی بهعنوان مسیر CSS» اکنون بهعنوان یک آیتم منو برای گرههای DOM در پانل Elements در دسترس است (شبیه به آیتم منوی Copy XPath).
نیازی نیست که نسل انتخابگرهای CSS به شیوه نامه/جاوا اسکریپت شما محدود شود، آنها همچنین می توانند جایگزینی برای استراتژی های مکان یاب در تست های WebDriver باشند. [ crbug.com/277286 ]
مشاهده سبک های عناصر Shadow DOM
عناصر کودک ریشه سایه اکنون می توانند سبک های خود را بررسی کنند. [ crbug.com/279390 ]
کپی () کنسول برای اشیا کار می کند
متد copy() از Command Line API اکنون برای اشیا کار می کند. ادامه دهید و سعی کنید copy({foo:'bar'})
و متوجه شوید که چگونه یک نسخه رشته ای و قالب بندی شده از شی اکنون در کلیپ بورد شما قرار دارد. [ crbug.com/289348 ]
فیلتر Regex برای کنسول
پیام های کنسول را با استفاده از عبارات منظم در پانل کنسول فیلتر کنید. crbug.com/318308 ]
شنوندگان رویداد را به راحتی حذف کنید
getEventListeners(document).mousewheel[0];
در پانل کنسول برای بازیابی اولین شنونده رویداد چرخ ماوس در سند. در ادامه، $_.remove()
امتحان کنید; برای حذف شنونده رویداد ( $_
= ارزش آخرین عبارت ارزیابی شده). crbug.com/309524 ]
حذف هشدارهای CSS
اخطارهای سبک " مقدار ویژگی CSS نامعتبر " که ممکن است دیده باشید اکنون حذف شده اند. تلاشهای مداومی برای قویتر کردن پیادهسازی در برابر CSS دنیای واقعی از جمله هکهای مرورگر وجود دارد. crbug.com/309982 ]
عملیات جدول زمانی در نمودار دایره ای خلاصه شده است
پانل Timeline اکنون شامل یک نمودار دایره ای در قسمت جزئیات است که به صورت بصری منبع هزینه های رندر شما را نشان می دهد - این به شما کمک می کند تا تنگناهای خود را در یک نگاه شناسایی کنید.
متوجه خواهید شد که بسیاری از اطلاعاتی که قبلاً در پاپاورها نمایش داده میشد، اکنون به صفحه اختصاصی خود ارتقا یافته است. برای مشاهده، شروع ضبط خط زمانی و انتخاب یک فریم، به صفحه جزئیات جدید که حاوی نمودار دایره ای است توجه داشته باشید. وقتی در نمای فریم هستید، آمارهای جالبی مانند میانگین FPS ( 1000ms/frame duration
) برای فریم(های) انتخاب شده دریافت خواهید کرد. [ crbug.com/247786 ]
جزئیات رویداد تغییر اندازه تصویر
رویدادهای تغییر اندازه و رمزگشایی تصویر در پانل Timeline اکنون حاوی پیوندی به گره DOM در پانل Elements هستند.
پیوند URL تصویر شما را به منبع مربوطه در پنل منابع می برد. crbug.com/244159 ]
فریم های GPU
فریمهایی که روی GPU وجود دارند اکنون در بالا، بالای فریمهای رشته اصلی نشان داده میشوند. crbug.com/305863 ]
شکستن بر شنوندگان popstate
'popstate' اکنون به عنوان نقطه شکست شنونده رویداد در نوار کناری پانل منابع در دسترس است. [ crbug.com/88112 ]
تنظیمات رندر موجود در کشو
اکنون با باز کردن کشو تعدادی پنجره نمایش داده می شود که یکی از آنها پانل Rendering است، از آن برای نشان دادن مستطیل های رنگ، FPS متر و غیره استفاده کنید. این به طور پیش فرض در تنظیمات > «نمایش نمای «رندر» در کشوی کنسول فعال است.
تصویر را به عنوان URL داده کپی کنید
دارایی های تصویر در پانل منابع اکنون می توانند محتویات آنها را به عنوان URI داده کپی کنند ( data:image/png;base64,iVBO...
).
برای امتحان کردن این کار، منبع تصویر را در Frames > [Resource] > Images پیدا کنید و روی پیشنمایش تصویر کلیک راست کنید تا به منوی زمینه دسترسی پیدا کنید، سپس «Copy Image as Data URL» را انتخاب کنید. crbug.com/321132 ]
فیلتر URI داده
اگر هرگز فکر نکردهاید که متعلق به آنها هستند، URIهای داده اکنون میتوانند از تب Network فیلتر شوند. نماد فیلتر را انتخاب کنید برای مشاهده سایر انواع فیلتر منابع crbug.com/313845 ]
اشکالات زمان بندی شبکه رفع شد
اگر مشاهده کردید که دانلود تصویر خود ظاهراً 300000 سال طول کشیده است، عذرخواهی می کنیم. ؛) این زمانبندیهای نادرست برای منابع شبکه اکنون رفع شده است. crbug.com/309570 ]
رفتار ضبط شبکه کنترل بیشتری دارد
رفتار شبکه ضبط کمی متفاوت است. ابتدا، دکمه ضبط دقیقاً همانطور که از Timeline یا پروفایل CPU انتظار دارید عمل می کند. و از آنجایی که انتظارش را دارید، اگر صفحه را در زمانی که DevTools باز است بارگیری مجدد کنید، ضبط شبکه به طور خودکار شروع می شود. سپس خاموش می شود، بنابراین اگر می خواهید فعالیت شبکه را پس از بارگیری صفحه ضبط کنید، آن را روشن کنید. این کار تجسم آبشار خود را بدون اینکه درخواستهای شبکه دیر شکسته نتایج را تغییر دهد، آسانتر میکند. crbug.com/325878 ]
تم های DevTools اکنون از طریق برنامه های افزودنی در دسترس هستند
شیوه نامه های کاربر اکنون از طریق DevTools Experiments در دسترس هستند (جعبه انتخاب: "Allow custom UI themes") که به یک برنامه افزودنی Chrome اجازه می دهد استایل سفارشی را روی DevTools اعمال کند. برای مثال به نمونه برنامه افزودنی تم DevTools مراجعه کنید. crbug.com/318566 ]
برای این نسخه خلاصه DevTools تمام شد، اگر قبلاً این کار را نکرده اید، نسخه نوامبر را بررسی کنید.