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

Kayce Basques

ویژگی‌ها و تغییرات جدیدی که در DevTools در کروم ۶۲ ارائه می‌شوند:

• پشتیبانی از عملگرهای await سطح بالا در کنسول .
• تصاویری از بخشی از نمای صفحه ، و تصاویری از گره‌های خاص HTML .
• برجسته‌سازی شبکه CSS .
• یک API کنسول جدید برای پرس‌وجو از اشیاء .
• فیلترهای منفی و فیلترهای URL در کنسول .
• HAR را در پنل شبکه وارد کنید .
• منابع حافظه پنهان قابل پیش نمایش .
• اشکال‌زدایی قابل پیش‌بینی‌تر حافظه پنهان (cache debugging ).
• پوشش کد در سطح بلوک .

عملگرهای await سطح بالا در کنسول

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

شکل ۱. استفاده از عملگرهای await سطح بالا در کنسول

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

اکنون می‌توانید از بخشی از نمای صفحه یا از یک گره HTML خاص، اسکرین‌شات بگیرید.

تصاویری از بخشی از نمای دید

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

1. روی بازرسی کلیک کنید یا برای ورود به حالت بازرسی عناصر، کلیدهای Command + Shift + C (مک) یا Control + Shift + C (ویندوز، لینوکس) را فشار دهید.
2. دکمه Command (مک) یا Control (ویندوز، لینوکس) را نگه دارید و بخشی از صفحه نمایش را که می‌خواهید از آن اسکرین‌شات بگیرید، انتخاب کنید.
3. ماوس خود را رها کنید. DevTools تصویری از بخشی که انتخاب کرده‌اید را دانلود می‌کند.

شکل ۲. گرفتن اسکرین‌شات از بخشی از نمای دید

تصاویری از گره‌های خاص HTML

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

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

   

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

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

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

   

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

هایلایت کردن گرید در CSS

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

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

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

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

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

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

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

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

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

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

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

شکل ۶. دستور اول مقادیر one ، two ، three و four را در کنسول ثبت می‌کند. two پنهان است زیرا در کادر فیلتر، -two وارد شده است.

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

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

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

فیلترهای URL

برای نمایش پیام‌هایی که از اسکریپتی با آدرس اینترنتی (URL) شامل <text> ایجاد شده‌اند، در کادر فیلتر url:<text> تایپ کنید.

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

شکل ۷. استفاده از فیلترینگ URL برای نمایش پیام‌هایی که از اسکریپت‌هایی سرچشمه می‌گیرند که URL آنها شامل hymn است. با نگه داشتن ماوس روی نام اسکریپت، می‌توانید ببینید که نام میزبان شامل این متن است

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

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

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

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

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

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

اشکال‌زدایی حافظه پنهان با واکنش‌پذیری بیشتر

در کروم ۶۱ و قبل از آن، اشکال‌زدایی حافظه‌های پنهان ایجاد شده با رابط برنامه‌نویسی کاربردی Cache ... دشوار است. برای مثال، وقتی یک صفحه یک حافظه پنهان جدید ایجاد می‌کند، برای مشاهده حافظه پنهان جدید باید صفحه یا DevTools را به صورت دستی رفرش کنید.

در کروم ۶۲، تب Cache Storage اکنون هر زمان که یک حافظه پنهان یا منبع را ایجاد، به‌روزرسانی یا حذف می‌کنید، به‌صورت آنی به‌روزرسانی می‌شود. برای مثال، ویدیوی زیر را تماشا کنید.

برای امتحان کردن خودتان ، نسخه آزمایشی ذخیره‌سازی کش را ببینید.

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

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

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

از کروم ۶۲ به بعد، تب Coverage به شما می‌گوید که کدام کد درون یک تابع فراخوانی شده است.

شکل ۱۱. نمونه‌ای از تب Coverage در کروم ۶۲. خط ۴ به عنوان استفاده نشده علامت‌گذاری شده است

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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