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

کیسی باسکی

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

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

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

جستجوی متن 'cache-control' با پنجره جستجوی شبکه جدید.

شکل 1 . جستجو برای cache-control متنی با پنجره جستجوی شبکه جدید

روی Match Case کلیک کنید مورد مطابقت تا درخواست شما به حروف کوچک و بزرگ حساس شود. روی Use Regular Expression کلیک کنید از بیان منظم استفاده کنید برای نشان دادن نتایجی که با الگوی ارائه شده مطابقت دارد. نیازی نیست RegEx خود را به صورت اسلش رو به جلو بپیچید.

یک پرس و جو عبارت منظم در صفحه جستجوی شبکه.

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

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

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

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

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

پیش نمایش مقدار متغیر CSS در صفحه Styles

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

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

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

کپی به عنوان واکشی

روی یک درخواست شبکه کلیک راست کنید سپس Copy > Copy As Fetch را انتخاب کنید تا کد fetch() - معادل آن درخواست را در کلیپ بورد خود کپی کنید.

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

شکل 5 . کپی کردن کد fetch() -Equivalent برای یک درخواست

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"
});

به روز رسانی پنل حسابرسی

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

پنل حسابرسی دارای 2 ممیزی جدید است، از جمله:

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

اکنون می توانید پنل حسابرسی را به صورت زیر پیکربندی کنید:

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

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

شکل 6 . گزینه های پیکربندی حسابرسی جدید

مشاهده آثار

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

دکمه View Trace.

شکل 7 . دکمه View Trace

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

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

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

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

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

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

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

شکل 8 . مشاهده معیارهای زمان بندی کاربر در برگه پایین به بالا . نوار آبی سمت چپ قسمت User Timing نشان می دهد که انتخاب شده است.

به‌طور کلی، اکنون می‌توانید هر یک از بخش‌ها ( Main Thread ، User Timeming ، GPU ، ScriptStreamer و غیره) را انتخاب کنید و فعالیت آن بخش را در برگه‌ها مشاهده کنید.

نمونه های جاوا اسکریپت VM را در پانل حافظه انتخاب کنید

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

تصاویر قبل و بعد از پانل حافظه.

شکل 9 . در رابط کاربری قدیمی در سمت چپ، نمونه‌های جاوا اسکریپت VM در پشت منوی کشویی Target پنهان می‌شوند، در حالی که در رابط کاربری جدید در سمت راست، در جدول Select JavaScript VM Instance نشان داده شده‌اند.

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

برگه شبکه به برگه Page تغییر نام داد

در پنل Sources ، تب Network اکنون تب Page نامیده می شود.

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

شکل 10 . در رابط کاربری قدیمی در سمت چپ، برگه ای که منابع صفحه را نشان می دهد Network نامیده می شود، در حالی که در رابط کاربری جدید سمت راست به آن Page می گویند.

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

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

تصویری از نماد نقطه شکست جدید و طرح رنگ فعلی خط اجرا.

شکل 11 . تصویری از نماد نقطه شکست جدید و طرح رنگ فعلی خط اجرا

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

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

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

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

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

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

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

شکل 13 . نمودارهای شعله هر فرآیند در یک ضبط عملکرد

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

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

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

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

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

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