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

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

به روز رسانی های UI صفحه جستجو

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

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

شکل 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 کلیک کنید تا داده های عملکرد بار را که ممیزی شما بر اساس آن ها در پانل عملکرد مشاهده می کنید، مشاهده کنید.

شکل 7 . دکمه View Trace

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

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

پنل Sources را باز کنید.
روی Pause کلیک کنید . دکمه به Resume Script Execution تغییر می کند .
اجرای اسکریپت رزومه را نگه دارید سپس 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 استفاده کنید.

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