این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

DevTools Digest دسامبر 2013

Umar Hansa

تعدادی از ویژگی‌های به‌روزرسانی شده، اخیراً برخی کوچک و برخی بزرگ، آن را به ابزار توسعه کروم تبدیل کرده‌اند. ما با به‌روزرسانی‌های پنل 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 ]