این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

پشتیبانی از اپراتورهای سطح بالای await در کنسول .
اسکرین شات از قسمتی از viewport و اسکرین شات از گره های HTML خاص .
برجسته سازی CSS Grid .
یک API کنسول جدید برای جستجوی اشیاء .
فیلترهای منفی و فیلترهای URL در کنسول .
HAR در پانل شبکه وارد می شود .
منابع کش قابل پیش نمایش
اشکال زدایی کش قابل پیش بینی بیشتر
پوشش کد در سطح بلوک

توجه: می‌توانید در chrome://version بررسی کنید چه نسخه‌ای از Chrome را اجرا می‌کنید. Chrome تقریباً هر 6 هفته یکبار به نسخه اصلی جدید به‌روزرسانی خودکار می‌شود.

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

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

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

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

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

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

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

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

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

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

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

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

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

یک عنصر را در پنل Elements انتخاب کنید.
شکل 3 . در این مثال، هدف، گرفتن اسکرین شات از هدر آبی است که حاوی متن Tools است. توجه داشته باشید که این گره قبلاً در درخت DOM پانل Elements انتخاب شده است
منوی فرمان را باز کنید.
شروع به تایپ node کنید و Capture node screenshot را انتخاب کنید. DevTools یک اسکرین شات از گره انتخاب شده را دانلود می کند.
شکل 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 استفاده کنید.

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