What's New In DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

اینجا ثبت‌نام کنید.

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

نسخه ویدیویی یادداشت‌های انتشار:

پانل شبکه را باز کنید، سپس Command+F (Mac) یا Control+F (Windows،‏ Linux،‏ ChromeOS) را فشار دهید تا قاب جدید جستجوی شبکه باز شود. DevTools سرصفحه‌ها و بدنه‌های همه درخواست‌های شبکه را برای پرسمانی که ارائه می‌دهید جستجو می‌کند.

جستجوی نوشتار «cache-control» با قاب جدید «جستجوی شبکه».

شکل ۱. درحال جستجوی نوشتار cache-control با قاب جدید «جستجوی شبکه»

روی مطابقت با حروف حساس به حالت حروف کلیک کنید تا پُرسمانتان به حروف حساس شود. روی استفاده از عبارت باقاعده کلیک کنید استفاده از عبارت باقاعده تا هر نتیجه‌ای که با الگوی ارائه‌شده شما مطابقت دارد نشان داده شود. نیازی نیست «عبارت باقاعده» را در خط مورب قرار دهید.

پُرسمان عبارت باقاعده در قاب «جستجوی شبکه».

شکل ۲. پُرسمان عبارت باقاعده در قاب «جستجوی شبکه».

رابط کاربری صفحه جستجوی سراسری اکنون با رابط کاربری صفحه جدید جستجوی شبکه مطابقت دارد. اکنون نتایج را به‌صورت خوانا نیز چاپ می‌کند تا اسکن‌پذیری را بهبود بخشد.

واسط کاربر قدیمی و جدید.

شکل ۳. واسط کاربر قدیمی در سمت راست و واسط کاربر جدید در سمت چپ

کلیدهای Command+Option+F (Mac) یا Control+Shift+F (Windows،‏ Linux،‏ ChromeOS) را فشار دهید تا جستجوی سراسری باز شود. همچنین می‌توانید آن را ازطریق منو فرمان باز کنید.

پیش‌نمایش‌های مقدار متغیر CSS در قاب سبک‌ها

وقتی مقدار ویژگی رنگ CSS، مثل background-color یا color، روی متغیر CSS تنظیم شده باشد، DevTools اکنون پیش‌نمایشی از آن رنگ را نشان می‌دهد.

نمونه‌ای از مقادیر رنگ متغیر CSS.

شکل ۴. در واسط کاربر قدیمی در سمت راست، پیش‌نمایش رنگی در کنار color: var(--main-color) وجود ندارد، درحالی‌که در واسط کاربر جدید در سمت چپ، وجود دارد

کپی کردن به‌عنوان واکشی

روی درخواست شبکه کلیک راست کنید، سپس کپی کردن > کپی کردن به‌عنوان واکشی را انتخاب کنید تا کد معادل fetch() برای آن درخواست در بریده‌دان کپی شود.

کپی کردن کد معادل fetch()‎ برای درخواست.

شکل ۵. کپی کردن کد معادل fetch() برای درخواست

DevTools کدی مانند کد زیر تولید می‌کند:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

به‌روزرسانی‌های پانل ممیزی‌ها

ممیزی‌های جدید

پانل ممیزی‌ها دارای ۲ ممیزی جدید است، ازجمله:

گزینه‌های پیکربندی جدید

اکنون می‌توانید پانل ممیزی‌ها را برای موارد زیر پیکربندی کنید:

  • تنظیمات نماپورت رایانه و نماینده کاربر را حفظ کنید. به عبارت دیگر، می‌توانید از شبیه‌سازی دستگاه همراه توسط پانل ممیزی‌ها جلوگیری کنید.
  • محدودسازی شبکه و CPU را غیرفعال کنید.
  • فضای ذخیره‌سازی، مانند LocalStorage و IndexedDB، را در ممیزی‌ها حفظ کنید.

گزینه‌های جدید پیکربندی ممیزی.

شکل ۶. گزینه‌های جدید پیکربندی ممیزی

مشاهده ردیابی‌ها

پس‌از ممیزی صفحه، روی مشاهده رد کلیک کنید تا داده‌های عملکرد بارگیری را که ممیزی شما براساس آن است در پانل عملکرد مشاهده کنید.

دکمه «مشاهده ردیابی».

شکل ۷. دکمه مشاهده ردیابی

متوقف کردن حلقه‌های بی‌نهایت

اگر با حلقه‌های for، حلقه‌های do...while، یا بازگشت زیاد کار می‌کنید، احتمالاً هنگام توسعه سایتتان به‌اشتباه یک حلقه بی‌پایان اجرا کرده‌اید. برای متوقف کردن حلقه بی‌نهایت، اکنون می‌توانید:

  1. پانل منابع را باز کنید.
  2. روی توقف موقت مکث کلیک کنید. دکمه به ازسرگیری اجرای دستورات ازسرگیری تغییر می‌کند.
  3. Resume Script Execution (ازسرگیری اجرای اسکریپت) ازسرگیری را نگه دارید، سپس Stop Current JavaScript Call (توقف تماس جاوا اسکریپت فعلی) توقف را انتخاب کنید.

در ویدیو بالا، ساعت ازطریق زمان‌سنج setInterval() به‌روز می‌شود. با کلیک کردن روی شروع حلقه بی‌نهایت، حلقه do...while اجرا می‌شود که هرگز متوقف نمی‌شود. فاصله ازسر گرفته می‌شود زیرا وقتی توقف تماس جاوا اسکریپت فعلی توقف انتخاب شد، درحال اجرا نبود.

زمان‌بندی کاربر در زبانه‌های «عملکرد»

هنگام مشاهده ضبط «عملکرد»، روی بخش زمان‌بندی کاربر کلیک کنید تا معیارهای زمان‌بندی کاربر را در برگه‌های خلاصه، پایین به بالا، درخت تماس، و گزارش رویداد مشاهده کنید.

مشاهده معیارهای «زمان‌بندی کاربر» در برگه «پایین به بالا».

شکل ۸. مشاهده معیارهای «زمان‌بندی کاربر» در برگه پایین به بالا. نوار آبی در سمت راست بخش زمان‌بندی کاربر نشان می‌دهد که این بخش انتخاب شده است.

به‌طور کلی، اکنون می‌توانید هریک از بخش‌ها (رشته اصلی، زمان‌بندی کاربر، واحد پردازش گرافیکی، ScriptStreamer، و غیره) را انتخاب کنید و فعالیت آن بخش را در برگه‌ها مشاهده کنید.

نمونه‌های ماشین مجازی جاوا اسکریپت را در پانل «حافظه» انتخاب کنید

پانل حافظه اکنون به‌وضوح همه نمونه‌های ماشین مجازی جاوا اسکریپت مرتبط با صفحه را فهرست می‌کند، به‌جای اینکه آن‌ها را مانند قبل در پشت منوِ کرکره‌ای هدف پنهان کند.

نماگرفت‌های قبل و بعداز پانل «حافظه».

شکل ۹. در واسط کاربر قدیمی در سمت راست، نمونه‌های ماشین مجازی جاوا اسکریپت پشت منوِ کرکره‌ای هدف پنهان شده‌اند، درحالی‌که در واسط کاربر جدید در سمت چپ، آن‌ها در جدول انتخاب نمونه ماشین مجازی جاوا اسکریپت نشان داده شده‌اند

در کنار نمونه developers.google.com، دو مقدار وجود دارد: 8.7 MB و 13.3 MB. مقدار سمت چپ نشان‌دهنده حافظه اختصاص‌یافته به‌دلیل جاوا اسکریپت است. مقدار سمت راست نشان‌دهنده کل حافظه سیستم‌عامل است که به‌دلیل آن نمونه VM اختصاص داده می‌شود. مقدار سمت راست شامل مقدار سمت چپ است. در «مدیر وظیفه» Chrome، مقدار سمت راست با JavaScript Memory و مقدار سمت چپ با Memory Footprint مطابقت دارد.

نام برگه «شبکه» به برگه «صفحه» تغییر کرد

در پانل منابع، برگه شبکه اکنون برگه صفحه نامیده می‌شود.

دو پنجره DevTools در کنار یکدیگر که تغییر نام را نشان می‌دهد.

شکل ۱۰. در واسط کاربر قدیمی در سمت راست، برگه‌ای که منابع صفحه را نشان می‌دهد شبکه نام دارد، درحالی‌که در واسط کاربر جدید در سمت چپ، صفحه نام دارد

به‌روزرسانی‌های زمینه تیره

Chrome 67 با چند تغییر جزئی در آرایش رنگ‌های زمینه تیره عرضه می‌شود. برای مثال، نمادهای نقطه توقف و خط اجرای فعلی اکنون سبز هستند.

نماگرفتی از نماد نقطه توقف جدید و آرایش رنگ‌ها برای خط اجرای فعلی.

شکل ۱۱. نماگرفتی از نماد نقطه توقف جدید و آرایش رنگ‌های خط اجرای فعلی

شفافیت گواهینامه در پانل «امنیت»

پانل امنیت اکنون اطلاعات شفافیت گواهینامه را گزارش می‌کند.

اطلاعات شفافیت گواهینامه در پانل «امنیت».

شکل ۱۲. اطلاعات شفاف‌سازی گواهینامه در پانل «امنیت»

«جداسازی سایت» در پانل «عملکرد»

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

نمودارهای شعله‌ای برای هر فرایند در ضبط «عملکرد».

شکل ۱۳. نمودارهای شعله‌ای برای هر فرایند در ضبط «عملکرد»

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

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

تماس با تیم Chrome DevTools

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

تازه‌های DevTools

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