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

کیسی باسکی

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

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

ماوس را روی یک عبارت زنده نگه دارید تا یک گره 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 . نحوه نمایش ستون اولویت

از منوی اصلی به منوی فرمان دسترسی پیدا کنید

از منوی فرمان برای دسترسی سریع به پانل ها، برگه ها و ویژگی های 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() برای ثبت تمام رویدادهای عنصر در کنسول استفاده کنید.

  1. یک مرجع به گره دریافت کنید.

    استفاده از «ذخیره به عنوان متغیر جهانی» برای دریافت ارجاع به گره.

    شکل 17 . استفاده از Store به عنوان متغیر سراسری برای دریافت ارجاع به گره

  2. گره را به عنوان اولین آرگومان به monitorEvents() ارسال کنید.

    ارسال گره به monitorEvents().

    شکل 18 . ارسال گره به monitorEvents()

  3. با گره تعامل کنید. 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 استفاده کنید.

چیزهای جدید در DevTools

فهرستی از همه چیزهایی که در سری چیزهای جدید در DevTools پوشش داده شده است.