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

کیسی باسکی

ویژگی‌ها و تغییرات جدیدی که به DevTools در Chrome 62 می‌آیند:

اپراتورهای سطح بالا در کنسول منتظر هستند

کنسول اکنون از اپراتورهای await سطح بالا پشتیبانی می کند.

استفاده از اپراتورهای انتظار سطح بالا در کنسول

شکل 1 . استفاده از اپراتورهای await سطح بالا در کنسول

جریان های کاری اسکرین شات جدید

اکنون می توانید از قسمتی از ویوپورت یا یک گره HTML خاص یک اسکرین شات بگیرید.

اسکرین شات هایی از قسمتی از ویوپورت

برای گرفتن اسکرین شات از بخشی از نمای خود:

  1. Inspect را کلیک کنید بازرسی کنید یا Command + Shift + C (Mac) یا Control + Shift + C (ویندوز، لینوکس) را فشار دهید تا وارد Inspect Element Mode شوید.
  2. Command (Mac) یا Control (ویندوز، لینوکس) را نگه دارید و بخشی از ویوپورت را که می خواهید از آن اسکرین شات بگیرید، انتخاب کنید.
  3. موس خود را رها کنید DevTools یک اسکرین شات از بخشی را که انتخاب کرده اید دانلود می کند.

گرفتن اسکرین شات از قسمتی از ویوپورت

شکل 2 . گرفتن اسکرین شات از قسمتی از ویوپورت

اسکرین شات از گره های HTML خاص

برای گرفتن اسکرین شات از یک گره HTML خاص:

  1. یک عنصر را در پنل Elements انتخاب کنید.

    نمونه ای از گره

    شکل 3 . در این مثال، هدف، گرفتن اسکرین شات از هدر آبی است که حاوی متن Tools است. توجه داشته باشید که این گره قبلاً در درخت DOM پانل Elements انتخاب شده است

  2. منوی فرمان را باز کنید.

  3. شروع به تایپ node کنید و Capture node screenshot انتخاب کنید. DevTools یک اسکرین شات از گره انتخاب شده را دانلود می کند.

    نتیجه دستور 'Capture node screenshot'

    شکل 4 . نتیجه دستور Capture node screenshot

برجسته سازی CSS Grid

برای مشاهده شبکه CSS که بر یک عنصر تأثیر می گذارد، ماوس را روی یک عنصر در درخت DOM پانل عناصر نگه دارید. یک حاشیه چین دار در اطراف هر یک از موارد شبکه ظاهر می شود. این تنها زمانی کار می‌کند که مورد انتخاب‌شده، یا والد مورد انتخابی، display:grid روی آن اعمال شود.

برجسته کردن یک شبکه CSS

شکل 5 . برجسته کردن یک شبکه CSS

برای یادگیری اصول CSS Grid در کمتر از 2 دقیقه ویدیوی زیر را ببینید.

یک API جدید برای پرس و جو از اشیاء پشته

queryObjects(Constructor) از کنسول فراخوانی کنید تا آرایه ای از اشیاء را که با سازنده مشخص شده ایجاد شده اند، برگرداند. به عنوان مثال:

  • queryObjects(Promise) . همه وعده ها را برمی گرداند.
  • queryObjects(HTMLElement) . تمام عناصر HTML را برمی گرداند.
  • queryObjects(foo) ، که در آن foo یک نام تابع است. تمام اشیایی را که از طریق new foo() نمونه سازی شده اند را برمی گرداند.

محدوده queryObjects() زمینه اجرای انتخاب شده فعلی در کنسول است. به انتخاب زمینه اجرا مراجعه کنید.

فیلترهای کنسول جدید

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

فیلترهای منفی

-<text> در کادر Filter تایپ کنید تا هر پیام کنسولی که شامل <text> باشد را فیلتر کنید.

نمونه ای از 3 پیامی که فیلتر می شوند

شکل 6 . عبارت اول one ، two ، three و four را در کنسول ثبت می کند. two پنهان است زیرا -two در کادر Filter وارد شده است

در صورت یافتن <text> ، DevTools یک پیام را فیلتر می کند:

  • در متن پیام
  • در نام فایلی که پیام از آن منشا گرفته است.
  • در متن ردیابی پشته.

فیلتر منفی همچنین با عبارات منظم مانند -/[4-5]*ms/ کار می کند.

فیلترهای URL

url:<text> در کادر فیلتر تایپ کنید تا فقط پیام‌هایی را نشان دهید که از اسکریپتی که URL آن شامل <text> است، منشأ گرفته‌اند.

فیلتر از تطبیق فازی استفاده می کند. اگر <text> در هر جایی از URL ظاهر شود، DevTools پیام را نشان می دهد.

نمونه ای از فیلتر کردن URL

شکل 7 . استفاده از فیلتر URL فقط برای نمایش پیام هایی که از اسکریپت هایی که URL آنها شامل hymn است نشات می گیرد. با نگه داشتن ماوس روی نام اسکریپت، می بینید که نام میزبان شامل این متن است

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

یک فایل HAR را در پانل شبکه بکشید و رها کنید تا آن را وارد کنید.

وارد کردن فایل HAR

شکل 8 . وارد کردن فایل HAR

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

روی یک ردیف در جدول حافظه کش کلیک کنید تا پیش نمایشی از آن منبع را در زیر جدول ببینید.

پیش نمایش یک منبع کش

شکل 9 . پیش نمایش یک منبع کش

اشکال زدایی کش پاسخگوتر

در Chrome 61 و نسخه‌های قبلی، اشکال‌زدایی حافظه‌های پنهان ایجاد شده با Cache API کار سختی است. به عنوان مثال، هنگامی که یک صفحه یک کش جدید ایجاد می کند، شما باید به صورت دستی صفحه یا DevTools را رفرش کنید تا کش جدید را ببینید.

در Chrome 62، تب حافظه پنهان اکنون هر زمان که حافظه پنهان یا منبعی را ایجاد، به‌روزرسانی یا حذف می‌کنید، در زمان واقعی به‌روزرسانی می‌شود. برای مثال ویدیوی زیر را تماشا کنید.

نسخه ی نمایشی حافظه پنهان را ببینید تا خودتان آن را امتحان کنید.

پوشش کد در سطح بلوک

در Chrome 61 و نسخه‌های قبلی، تب Coverage همه کدهای موجود در یک تابع را به‌عنوان استفاده شده علامت‌گذاری می‌کند، تا زمانی که تابع فراخوانی شود.

نمونه ای از تب Coverage در کروم 61

شکل 10 . نمونه‌ای از برگه Coverage در Chrome 61. خط 4 استفاده شده علامت‌گذاری شده است، حتی اگر هرگز اجرا نمی‌شود

با شروع در Chrome 62، تب Coverage اکنون به شما می‌گوید کدام کد درون یک تابع فراخوانی می‌شود.

نمونه ای از تب Coverage در کروم 62

شکل 11 . نمونه ای از برگه Coverage در Chrome 62. خط 4 بدون استفاده علامت گذاری شده است

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

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

با تیم Chrome DevTools در تماس باشید

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

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

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