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

Kayce Basques

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

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

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

برای هایلایت کردن یک گره DOM، نشانگر ماوس را روی یک Live Expression نگه دارید.

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

شکل ۱. حرکت ماوس روی نتیجه‌ی Live Expression برای هایلایت کردن گره در نمای دید

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

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

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

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

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

اطلاعات آغازگر و اولویت اکنون در واردات و صادرات HAR موجود است.

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

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

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

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

فیلد _initiator اطلاعات بیشتری در مورد علت درخواست منبع ارائه می‌دهد. این فیلد به ستون Initiator در جدول Requests نگاشت می‌شود.

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

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

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

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

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

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

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

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

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

شکل ۱۳. منوی فرمان

اکنون می‌توانید منوی فرمان (Command Menu) را از منوی اصلی باز کنید. روی منوی اصلی (Main Menu) کلیک کنید. را فشار دهید و دستور اجرا را انتخاب کنید.

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

نقاط توقف تصویر در تصویر

تصویر در تصویر یک API آزمایشی جدید است که به یک صفحه امکان می‌دهد یک پنجره ویدیویی شناور روی دسکتاپ ایجاد کند.

برای توقف هر زمان که یکی از این رویدادهای تصویر در تصویر رخ دهد، کادرهای enterpictureinpicture ، leavepictureinpicture و resize را در پنجره نقاط شکست شنونده رویداد فعال کنید. DevTools در خط اول کنترل‌کننده مکث می‌کند.

شکل ۱۶. رویدادهای تصویر در تصویر در پنل نقاط شکست شنونده رویداد

(نکته اضافی) برای مشاهده‌ی اجرای رویدادهای یک عنصر، تابع monitorEvents() را در کنسول اجرا کنید.

فرض کنید می‌خواهید پس از فوکوس کردن روی یک دکمه و فشردن کلیدهای R ، E یا D ، یک حاشیه قرمز دور آن اضافه کنید، اما نمی‌دانید به کدام رویدادها شنونده اضافه کنید. از monitorEvents() برای ثبت تمام رویدادهای عنصر در کنسول استفاده کنید.

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

   

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

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

   

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

3. با گره تعامل داشته باشید. DevTools تمام رویدادهای گره را در کنسول ثبت می‌کند.

   

   شکل ۱۹. رویدادهای گره در کنسول

برای توقف ثبت رویدادها در کنسول، تابع 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 ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

قابلیت‌های جدید در DevTools

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