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

Jecelyn Yeen

شروع مجدد فریم در حین اشکال‌زدایی

قابلیت فریم ری‌استارت برگشته است! می‌توانید وقتی در جایی از یک تابع متوقف می‌شوید، کد قبلی را دوباره اجرا کنید. پیش از این، این قابلیت به دلیل مشکلات پایداری در کروم ۹۲ منسوخ و حذف شده بود.

در این مثال ، اشکال‌زدا ابتدا در نقطه توقف (خط ۳۴۳) نزدیک به انتهای تابع toggleColorScheme متوقف شد. برای شروع مجدد اشکال‌زدایی از ابتدای تابع toggleColorScheme ، بخش Call stack را در پنجره Debugger باز کنید، روی toggleColorScheme کلیک راست کرده و Restart frame را انتخاب کنید.

مشکل کرومیوم: ۱۳۰۳۵۲

گزینه‌های پخش آهسته در پنل ضبط‌کننده

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

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

مشکل کرومیوم: ۱۳۰۶۷۵۶

ساخت افزونه برای پنل ضبط کننده

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

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

مشکل کرومیوم: ۱۳۲۵۷۵۱

گروه‌بندی فایل‌ها بر اساس Authored/Deployed در پنل Sources

گزینه جدید Group files by Authored / Deployed را برای سازماندهی فایل‌های خود در پنل Sources فعال کنید. هنگام توسعه برنامه‌های وب با فریم‌ورک‌ها (به عنوان مثال، React، Angular)، به دلیل فایل‌های کوچک‌شده تولید شده توسط ابزارهای ساخت (به عنوان مثال، Webpack، Vite)، پیمایش فایل‌های منبع می‌تواند دشوار باشد.

با استفاده از این کادر انتخاب، می‌توانید فایل‌ها را برای جستجوی سریع‌تر، به ۲ دسته گروه‌بندی کنید:

• Authored . مشابه فایل‌های منبعی که در IDE خود مشاهده می‌کنید. DevTools این فایل‌ها را بر اساس نقشه‌های منبع (که توسط ابزارهای ساخت شما ارائه می‌شوند) تولید می‌کند.
• Deployed . فایل‌های واقعی که مرورگر می‌خواند. معمولاً این فایل‌ها کوچک‌سازی می‌شوند.

خودتان با این نسخه آزمایشی React امتحان کنید!

مشکل کرومیوم: ۹۶۰۹۰۹

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

با استفاده از مسیر جدید زمان‌بندی کاربر در پنل Performance insights، علائم performance.measure() را در ضبط خود تجسم کنید.

برای مثال، این صفحه وب از متد performance.measure() برای محاسبه زمان سپری شده از بارگذاری متن استفاده می‌کند.

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

مشکل کرومیوم: ۱۳۲۲۸۰۸

آشکار کردن جایگاه اختصاص داده شده به یک عنصر

عناصر شیاردار در پنل عناصر ، یک نشان slot جدید دارند. هنگام اشکال‌زدایی مشکلات طرح‌بندی، از این ویژگی برای شناسایی سریع‌تر عنصری که بر طرح‌بندی گره تأثیر می‌گذارد، استفاده کنید.

این مثال شامل کارت‌هایی با چند جایگاه نامگذاری شده است. جایگاه person-occupation یک کارت را بررسی کنید، روی نشان slot کنار آن کلیک کنید تا جایگاه اختصاص داده شده به آن نمایان شود.

یاد بگیرید که چگونه از عناصر <template> و <slot> برای ایجاد یک الگوی انعطاف‌پذیر استفاده کنید که سپس می‌تواند برای پر کردن DOM سایه یک مؤلفه وب استفاده شود.

مشکل کرومیوم: ۱۰۱۸۹۰۶

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

تنظیم جدید Hardware concurrency در پنل Performance به توسعه‌دهندگان اجازه می‌دهد تا مقدار گزارش‌شده توسط navigator.hardwareConcurrency را پیکربندی کنند.

برخی از برنامه‌ها از navigator.hardwareConcurrency برای کنترل درجه موازی‌سازی برنامه خود استفاده می‌کنند، به عنوان مثال، برای کنترل اندازه استخر Emscripten pthread. با این ویژگی، توسعه‌دهندگان می‌توانند عملکرد برنامه خود را با تعداد هسته‌های مختلف آزمایش کنند.

مشکل کرومیوم: ۱۲۹۷۴۳۹

پیش‌نمایش مقدار غیر رنگی هنگام تکمیل خودکار متغیرهای CSS

هنگام تکمیل خودکار متغیرهای CSS، DevTools اکنون متغیر غیر رنگی را با یک مقدار معنادار پر می‌کند تا بتوانید پیش‌نمایشی از نوع تغییری که مقدار روی گره خواهد داشت، مشاهده کنید.

مشکل کرومیوم: ۱۲۸۵۰۹۱

فریم‌های مسدودکننده را در پنل Back/forward cache شناسایی کنید.

بخش Back/forward cache در پنل Application دارای بخش فریم‌های جدیدی است که به شما در شناسایی فریم‌های مسدودکننده‌ای که ممکن است مانع از واجد شرایط بودن صفحه برای bfcache شوند، کمک می‌کند.

مشکل کرومیوم: ۱۲۸۸۱۵۸

بهبود پیشنهادات تکمیل خودکار برای اشیاء جاوا اسکریپت

تکمیل خودکار برای ویژگی‌های شیء جاوا اسکریپت اکنون بر اساس این ترتیب نمایش داده می‌شود:

1. ویژگی‌های قابل شمارش خود را داشته باشید
2. مالکیت ویژگی‌های غیرقابل شمارش
3. ویژگی‌های قابل شمارش به ارث رسیده
4. ویژگی‌های غیرقابل شمارش به ارث رسیده

پیش از این، توسعه‌دهندگان پیدا کردن ویژگی‌های مرتبط را دشوارتر می‌دانستند، زیرا این پیشنهاد فقط ویژگی‌های خود را بر ویژگی‌های ارث‌بری ترجیح می‌داد و به همه ویژگی‌های ارث‌بری اولویت یکسانی داده می‌شد.

مشکل کرومیوم: ۱۲۹۹۲۴۱

بهبود نقشه‌های منبع

در اینجا چند اصلاحیه در مورد نقشه‌های منبع برای بهبود تجربه کلی اشکال‌زدایی ارائه شده است:

• نقاط توقف اکنون در <script> درون‌خطی با حاشیه‌نویسی‌های sourceURL کار می‌کنند.
• اکنون دیباگر، متغیرهای بلوکیِ محدوده‌بندی‌شده را در نمای محدوده (Scope view) با نقشه‌های منبع (source map) شناسایی و حل می‌کند.
• دیباگر اکنون متغیرها را در توابع پیکانی در نمای Scope با نقشه‌های منبع، حل می‌کند.

مشکلات کرومیوم: ۱۳۲۹۱۱۳ ، ۱۳۲۲۱۱۵

نکات برجسته متفرقه

برخی از اصلاحات قابل توجه در این نسخه عبارتند از:

• مشکل تنظیم تکمیل خودکار برای پنل منابع برطرف شد. پیش از این، تکمیل خودکار حتی در صورت غیرفعال بودن این تنظیم، همیشه فعال بود. ( ۱۳۲۳۲۸۶ )
• تب Manifest در پنل Application به‌روزرسانی شد تا آخرین فرمت طرح رنگ را تجزیه و تحلیل کند. ( ۱۳۱۸۳۰۵ )
• پیشنهادات مربوط به مشکلات مسدود شدن رندر <script async> در پنل Performance insights بهبود یافته است. پیش از این، DevTools پیشنهاد می‌کرد که add async attribute to the script tag حتی اگر اسکریپت از قبل به عنوان async علامت‌گذاری شده باشد. ( 1334096 )
• پنل Performance Insights اکنون iframe ها را به عنوان دلایل احتمالی تغییر طرح بندی تشخیص می‌دهد. می‌توانید جزئیات iframe را در قسمت Details مشاهده کنید. ( 1328873 )
• وقتی فایل را در منوی Command باز می‌کنید، فایل‌های نوشته‌شده (فایل‌های تولیدشده توسط نقشه‌های منبع) اکنون رتبه بالاتری دارند، بنابراین بالاتر از اسکریپت‌های مستقر با نام مشابه ظاهر می‌شوند. ( 1312929 )

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

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

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

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

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

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

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