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

Kayce Basques

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

• جستجو در تمام هدرهای شبکه
• پیش‌نمایش مقادیر متغیرهای CSS در پنل Styles
• کپی به عنوان واکشی
• ممیزی‌های جدید، گزینه‌های پیکربندی دسکتاپ و ردیابی‌های مشاهده
• حلقه‌های بی‌نهایت را متوقف کنید
• زمان‌بندی کاربر در تب‌های عملکرد
• نمونه‌های ماشین مجازی جاوا اسکریپت به وضوح در پنل حافظه فهرست شده‌اند
• تب Network در پنل Sources به تب Page تغییر نام داده است.
• به‌روزرسانی‌های تم تاریک
• اطلاعات شفافیت گواهی در پنل امنیتی
• ویژگی‌های جداسازی سایت در پنل عملکرد

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

جستجو در تمام هدرها و پاسخ‌های شبکه

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

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

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

شکل ۲. یک عبارت منظم در کادر جستجوی شبکه.

به‌روزرسانی‌های رابط کاربری پنل جستجو

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

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

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

پیش‌نمایش مقادیر متغیرهای CSS در پنل Styles

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

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

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

روی یک درخواست شبکه کلیک راست کنید و سپس گزینه Copy > Copy As 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"
});

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

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

هیئت حسابرسی دو حسابرسی جدید دارد، از جمله:

• درخواست‌های کلید پیش‌بارگذاری . درخواست‌های پیش‌بارگذاری می‌توانند با ارائه راهنمایی به مرورگر برای دانلود منابعی که برای مسیر رندر بحرانی شما مهم هستند، در اسرع وقت، زمان بارگذاری صفحه را سرعت بخشند.
• از نمایش متن نامرئی هنگام بارگذاری وب‌فونت‌ها خودداری کنید . اطمینان از قابل مشاهده بودن متن هنگام بارگذاری وب‌فونت‌ها، صفحه را برای کاربران سریع‌تر و مفیدتر می‌کند.

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

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

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

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

مشاهده ردپاها

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

شکل 7. دکمه مشاهده مسیر

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

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

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

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

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

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

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

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

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

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

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

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

تغییر نام تب شبکه به تب صفحه

در پنل منابع ، تب شبکه (Network) اکنون به تب صفحه (Page ) تغییر نام داده است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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