چیزهای جدید در 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 استفاده کنید.

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

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59