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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

اطلاعات آغازگر و اولویت در حال حاضر در واردات و صادرات 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 در اولین خط کنترل کننده مکث می کند.

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

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

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

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

   

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

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

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

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

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

Kayce Basques

ویژگی های جدید و تغییرات اساسی در Chrome Devtools در Chrome 71 شامل موارد زیر است:

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

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

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

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

شکل 1 . معلق در یک نتیجه بیان زنده برای برجسته کردن گره در نمای

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

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

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

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

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

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

اگر می خواهید سیاهههای مربوط به شبکه را با همکاران تشخیص دهید ، می توانید درخواست های شبکه را به یک پرونده HAR صادر کنید .

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

برای وارد کردن پرونده به صفحه شبکه ، کافی است آن را بکشید و رها کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

فعال کردن enterpictureinpicture ، leavepictureinpicture و resize کادر انتخاب را در برنامه های شنوایی که در هر زمان یکی از این رویدادهای تصویر در تصویر شلیک می کند ، مکث می کند. Devtools در خط اول کنترل کننده مکث می کند.

شکل 16 . رویدادهای تصویر در تصویر در صفحه نمایش شنونده اشیاء

(نکته جایزه) Monitorevents () را در کنسول اجرا کنید تا آتش یک عنصر را تماشا کنید

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

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

   

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

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

   

   شکل 18 . عبور از گره به monitorEvents()

3. با گره ارتباط برقرار کنید. DevTools تمام وقایع گره را به کنسول وارد می کند.

   

   شکل 19 . وقایع گره در کنسول

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

unmonitorEvents(temp1);

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

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

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

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

کانال های پیش نمایش را بارگیری کنید

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

در تماس با تیم Chrome Devtools

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

• یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهید > راهنما > گزارش مسائل DevTools در DevTools.
• توییت در chromedevtools .
• در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.