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

چیزهای جدید در DevTools (Chrome 71)

Kayce Basques

ویژگی‌های جدید و تغییرات عمده‌ای که به Chrome DevTools در Chrome 71 وارد می‌شود عبارتند از:

ماوس را روی یک عبارت زنده نگه دارید تا یک گره DOM برجسته شود
گره های DOM را به عنوان متغیرهای سراسری ذخیره کنید
اطلاعات آغازگر و اولویت در حال حاضر در واردات و صادرات HAR
از منوی اصلی به منوی فرمان دسترسی پیدا کنید
نقاط شکست تصویر در تصویر
(نکته پاداش) monitorEvents() را در کنسول اجرا کنید تا رویدادهای یک عنصر را مشاهده کنید

نسخه ویدیویی این صفحه را بخوانید یا تماشا کنید:

ماوس را روی یک عبارت زنده نگه دارید تا یک گره DOM برجسته شود

هنگامی که یک Live Expression به یک گره DOM ارزیابی می‌شود، ماوس را روی نتیجه Live Expression نگه دارید تا آن گره در viewport برجسته شود.

نشان دادن نشانگر روی یک نتیجه Live Expression برای برجسته کردن گره در viewport.

شکل 1 . نشان دادن نشانگر روی یک نتیجه Live Expression برای برجسته کردن گره در viewport

گره های DOM را به عنوان متغیرهای سراسری ذخیره کنید

برای ذخیره یک گره DOM به عنوان یک متغیر سراسری، عبارتی را در کنسول اجرا کنید که به یک گره ارزیابی می‌شود، روی نتیجه کلیک راست کرده و سپس Store as global variable را انتخاب کنید.

ذخیره به عنوان متغیر سراسری در کنسول.

شکل 2 . ذخیره به عنوان متغیر سراسری در کنسول

یا روی گره در درخت DOM کلیک راست کرده و Store as global variable را انتخاب کنید.

ذخیره به عنوان متغیر سراسری در درخت DOM.

شکل 3 . ذخیره به عنوان متغیر سراسری در درخت DOM

اطلاعات آغازگر و اولویت در حال حاضر در واردات و صادرات HAR

اگر می‌خواهید گزارش‌های شبکه را با همکارانتان تشخیص دهید، می‌توانید درخواست‌های شبکه را به یک فایل HAR صادر کنید .

صدور درخواست های شبکه به یک فایل HAR.

شکل 8 . صدور درخواست های شبکه به یک فایل HAR

برای وارد کردن مجدد فایل به پنل شبکه، کافی است آن را بکشید و رها کنید.

هنگامی که یک فایل HAR را صادر می کنید، DevTools اکنون اطلاعات آغازگر و اولویت را در فایل HAR درج می کند. وقتی فایل‌های HAR را دوباره به DevTools وارد می‌کنید، ستون‌های Initiator و Priority اکنون پر می‌شوند.

فیلد _initiator زمینه بیشتری را در مورد آنچه باعث درخواست منبع شده است فراهم می کند. این به ستون Initiator در جدول Requests نگاشت می شود.

ستون آغازگر.

شکل 9 . ستون آغازگر

همچنین می‌توانید Shift را نگه دارید و روی یک درخواست برای مشاهده آغازگر و وابستگی‌های آن نگه دارید .

مشاهده آغازگرها و وابستگی ها

شکل 10 . مشاهده آغازگرها و وابستگی ها

فیلد _priority بیان می کند که مرورگر چه سطح اولویتی را به منبع اختصاص داده است. این به ستون Priority در جدول Requests که به طور پیش فرض مخفی است، نگاشت می شود.

ستون اولویت.

شکل 11 . ستون اولویت

روی هدر جدول درخواست ها کلیک راست کرده و Priority را انتخاب کنید تا ستون Priority نشان داده شود.

نحوه نمایش ستون اولویت

شکل 12 . نحوه نمایش ستون اولویت

توجه: فیلدهای _initiator و _priority با زیرخط شروع می شوند زیرا مشخصات HAR بیان می کند که فیلدهای سفارشی باید با زیرخط شروع شوند.

از منوی فرمان برای دسترسی سریع به پانل ها، برگه ها و ویژگی های DevTools استفاده کنید.

شکل 13 . منوی فرمان

اکنون می توانید منوی فرمان را از منوی اصلی باز کنید. روی منوی اصلی کلیک کنید را فشار دهید و دستور Run را انتخاب کنید.

شکل 14 . باز کردن منوی فرمان از منوی اصلی

نقاط شکست تصویر در تصویر

Picture-in-Picture یک API آزمایشی جدید است که یک صفحه را قادر می سازد تا یک پنجره ویدیویی شناور روی دسکتاپ ایجاد کند.

کادرهای enterpictureinpicture ، leavepictureinpicture و resize در قسمت Event Liner Breakpoints فعال کنید تا هر زمان که یکی از این رویدادهای تصویر در تصویر فعال شد، مکث کنید. DevTools در اولین خط کنترل کننده مکث می کند.

رویدادهای Picture-in-Picture در قسمت Event Liner Breakpoints.

شکل 16 . رویدادهای Picture-in-Picture در قسمت Event Liner Breakpoints

(نکته پاداش) monitorEvents() را در کنسول اجرا کنید تا رویدادهای یک عنصر را مشاهده کنید

فرض کنید می خواهید بعد از فوکوس کردن دکمه و فشار دادن R , E , D یک حاشیه قرمز رنگ به اطراف اضافه کنید اما نمی دانید شنوندگان را به چه رویدادهایی اضافه کنید. از monitorEvents() برای ثبت تمام رویدادهای عنصر در کنسول استفاده کنید.

یک مرجع به گره دریافت کنید.
شکل 17 . استفاده از Store به عنوان متغیر سراسری برای دریافت ارجاع به گره
گره را به عنوان اولین آرگومان به monitorEvents() ارسال کنید.
شکل 18 . ارسال گره به monitorEvents()
با گره تعامل کنید. DevTools تمام رویدادهای گره را در کنسول ثبت می کند.
شکل 19 . رویدادهای گره در کنسول

برای توقف ثبت رویدادها در کنسول، unmonitorEvents() را فراخوانی کنید.

unmonitorEvents(temp1);

اگر فقط می خواهید رویدادها یا انواع خاصی از رویدادها را نظارت کنید، یک آرایه را به عنوان آرگومان دوم به monitorEvents() ارسال کنید:

monitorEvents(temp1, ['mouse', 'focus']);

نوع mouse به DevTools می‌گوید که همه رویدادهای مرتبط با ماوس را ثبت کند، مانند mousedown و click . سایر انواع پشتیبانی شده key ، touch و control هستند.

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

کانال های پیش نمایش را دانلود کنید

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان می‌دهند به جدیدترین ویژگی‌های DevTools دسترسی داشته باشید، APIهای پلت‌فرم وب پیشرفته را آزمایش کنید و قبل از اینکه کاربرانتان این کار را انجام دهند، مشکلات موجود در سایت خود را پیدا کنید!

تماس با تیم Chrome DevTools

از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید.

پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
توییت در @ChromeDevTools .
نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.