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

Kayce Basques

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

• شبیه‌سازی کاهش سرعت دستگاه تلفن همراه . تنظیم همزمان کاهش سرعت پردازنده و شبکه، برای شبیه‌سازی دستگاه‌های تلفن همراه میان‌رده یا رده پایین.
• میزان استفاده از فضای ذخیره‌سازی . مشاهده کنید که یک منبع چقدر از فضای ذخیره‌سازی را استفاده می‌کند، که بر اساس فناوری (IndexedDB، حافظه پنهان، محلی، جلسه و غیره) تفکیک شده است.
• مهرهای زمانی کش . مشاهده کنید که یک سرویس ورکر چه زمانی یک پاسخ را کش کرده است.
• FPS Meter را از منوی Command فعال کنید .
• رفتار چرخ ماوس و ترک‌پد را در پنل Performance تغییر دهید .
• ماژول‌های ES6 را به صورت بومی اشکال‌زدایی کنید .

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

شبیه‌سازی دستگاه‌های تلفن همراه رده پایین و میان‌رده در حالت دستگاه

منوی تنظیم سرعت دستگاه (Device Mode Throttling) اکنون به طور پیش‌فرض نمایش داده می‌شود و اکنون به شما امکان می‌دهد با چند کلیک، یک دستگاه موبایل رده پایین یا میان‌رده را شبیه‌سازی کنید.

شکل 1. منوی تنظیم سرعت

شکل ۲. برای مشاهده تعاریف مربوط به موبایل‌های میان‌رده و پایین‌رده، موس را روی منوی Throttling نگه دارید یا منوی Capture Settings را باز کنید.

مشاهده میزان استفاده از فضای ذخیره‌سازی

بخش جدید «استفاده» در تب «پاک کردن فضای ذخیره‌سازی» در پنل برنامه‌ها ، میزان فضای ذخیره‌سازی مورد استفاده توسط یک مبدأ و همچنین حداکثر سهمیه آن مبدأ در این دستگاه را نشان می‌دهد.

شکل ۳. بخش استفاده نشان می‌دهد که https://airhorner.com از سهمیه ۱۵۲۱۴ مگابایتی مبدا، ۶۶.۹ کیلوبایت را استفاده می‌کند.

مشاهده زمان ذخیره پاسخ‌ها توسط یک سرویس ورکر

ستون جدید «زمان ذخیره‌شده» در تب «ذخیره‌سازی حافظه پنهان» (Cache Storage) به شما نشان می‌دهد که یک سرویس ورکر چه زمانی پاسخ‌ها را ذخیره کرده است.

شکل ۴. ستون زمان ذخیره شده

فعال کردن FPS Meter از منوی Command

اکنون می‌توانید FPS Meter را از منوی Command فعال کنید.

شکل 5. فعال کردن FPS Meter از منوی Command

تنظیم رفتار چرخ ماوس برای بزرگنمایی یا پیمایش با ضبط‌های عملکرد

تنظیمات را باز کنید و تنظیمات جدید عملکرد چرخ ماوس Flamechart را تنظیم کنید تا نحوه رفتار چرخ‌های ماوس در پنل Performance تغییر کند.

برای مثال، وقتی از چرخ ماوس در بخش اصلی یک ضبط استفاده می‌کنید، یا وقتی با دو انگشت روی ترک‌پد می‌کشید، رفتار پیش‌فرض بزرگنمایی یا کوچکنمایی است. وقتی تنظیمات را به Scroll تغییر می‌دهید، این حرکت اکنون به بالا یا پایین پیمایش می‌کند.

شکل 6. تنظیمات عملکرد چرخ ماوس Flamechart

پشتیبانی از اشکال‌زدایی برای ماژول‌های ES6

ماژول‌های ES6 به صورت بومی در کروم ۶۱ ارائه می‌شوند. در اینجا اتفاق زیادی در رابطه با DevTools نمی‌افتد، به جز اینکه اشکال‌زدایی همانطور که انتظار دارید کار می‌کند. سعی کنید چند نقطه توقف تنظیم کنید و پیاده‌سازی ماژول ES6 از TodoMVC نوشته پاول آیریش را بررسی کنید تا خودتان متوجه شوید.

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

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

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

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

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

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

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