موارد جدید در DevTools، Chrome 138

Sofia Emelianova

بهبود پنل عملکرد

این نسخه بهبودهای متعددی را در پنل عملکرد به همراه دارد.

ریشه‌های از پیش متصل در بینش «درخت وابستگی شبکه»

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

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

برای اطلاعات بیشتر، به پیش‌اتصال به مبدأهای مورد نیاز مراجعه کنید.

زمان پاسخ سرور و تغییر مسیر در بینش «تأخیر درخواست سند»

بخش Performance > Insights > Document request latency اکنون زمان پاسخگویی سرور و در صورت وجود، تعداد ریدایرکت‌ها و زمان ریدایرکت را به شما نشان می‌دهد.

تغییر مسیرها در خلاصه درخواست‌های شبکه

پنل عملکرد اکنون URL های تغییر مسیر را در خلاصه درخواست های شبکه و در نکات راهنمای آنها نشان می دهد.

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

کاهش نویز در ردیابی عملکرد

پنل Performance اکنون رویدادهای مربوط به دسته compile موتور جاوا اسکریپت نسخه ۸ را نشان نمی‌دهد. پیش از این، این رویدادها، به ویژه رویداد compile code باعث سربار و نویز غیرضروری زیادی می‌شدند.

اگر متوجه شدید که برخی از رویدادهای مهم برای شما اکنون از قلم افتاده‌اند، می‌توانید بازخورد خود را در crbug.com/414330508 با ما در میان بگذارید.

«غیرفعال کردن نمونه‌های جاوا اسکریپت» منسوخ شده

گزینه غیرفعال کردن نمونه‌های جاوا اسکریپت در تنظیمات Performance > Captures به دلیل کاربرد نادر و استفاده کم، منسوخ و حذف شده است.

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

پارامتر دقت موقعیت جغرافیایی در حسگرها

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

مشکل کرومیوم: ۴۰۰۷۴۸۴۳

بهبودهای پنل عناصر

این نسخه چندین بهبود در پنل عناصر (Elements) ایجاد کرده است.

اشکال‌زدایی آسان‌تر مقادیر پیچیده CSS

برای کمک به شما در اشکال‌زدایی مقادیر پیچیده CSS، تب Elements > Styles اکنون با نگه داشتن ماوس روی عناصر، یک راهنمای ابزار (tooltip) را به شما نشان می‌دهد:

• زنجیره تعریف کامل متغیرهای CSS، به طوری که نیازی به کلیک روی چندین لینک نداشته باشید.
• ارزیابی گام به گام محاسبات پیچیده CSS، تا بتوانید اشکالات را به طور مؤثرتری شناسایی کنید و درک عمیق‌تری از نحوه محاسبه یک مقدار به دست آورید.

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

مشکل کروم: ۳۹۶۰۸۰۵۲۹

پشتیبانی @function در عناصر > استایل‌ها

برای آماده‌سازی پشتیبانی @function در کروم ، تب Elements > Styles اکنون نام‌های توابع سفارشی شما را در یک بخش اختصاصی به تعاریف آنها پیوند می‌دهد.

بهبود پنل شبکه

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

فیلتر has-request-header

پنل شبکه اکنون از فیلتر has-request-header پشتیبانی می‌کند که به شما امکان می‌دهد درخواست‌ها را بر اساس نام هدر درخواست خاصی فیلتر کنید.

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

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

در پنل شبکه ، اکنون می‌توانید ترافیک برنامه‌های وب ایزوله (IWA) را از طریق TCPSocket، UDPSocket (در حالت اتصال) و UDPSocket (در حالت متصل) رصد کنید.

برای انجام این کار، یک اتصال directscoket را در کنار درخواست‌های معمولی در جدول انتخاب کنید و در تب پیام‌ها ، یک پیام را انتخاب کنید.

برنامه‌های وب ایزوله (IWA) یک مدل امنیتی با قابلیت اطمینان بالا برای برنامه‌های وب ارائه می‌دهند. برای اطلاعات بیشتر، به بخش شروع به کار با برنامه‌های وب ایزوله مراجعه کنید و برنامه آزمایشی که Direct Sockets API را پیاده‌سازی می‌کند را بررسی کنید.

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

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

• برنامه > ذخیره‌سازی : گزینه منسوخ‌شده‌ی Web SQL ( crbug.com/412707590 ) حذف شد.
• عناصر :
  • به طور پیش‌فرض ، برجسته‌سازی مشکلات مربوط به عناصر و ویژگی‌ها در DOM فعال است.
  • سبک‌ها : مقدار clip به گزینه‌های تکمیل خودکار overflow اضافه شد.
• شبکه : هدر HTTP Referrer-Policy از گزینه Copy as fetch حذف شد، زیرا این یک هدر پاسخ برای کنترل رفتار مرورگر است، نه یک دستورالعمل سمت کلاینت ( crbug.com/413904896 ).
• عملکرد : هشدارهای «وظیفه طولانی» از نخ‌های کارگر حذف شد زیرا آنها نخ‌های اصلی را مسدود نمی‌کنند ( crbug.com/40248589 ).
• مشکلات . گزارش‌های فعلی:
  • اگر منابعی که مشکوک به ردیابی کاربران هستند مسدود شوند.
  • کاهش ردیابی پرش (Bounce Tracking) صرف نظر از اینکه آیا در طول ریدایرکت به فضای ذخیره‌سازی دسترسی پیدا می‌کنند یا خیر.
• دسترسی‌پذیری . عناصر زیر در Elements > Styles اکنون با کیبورد قابل تنظیم هستند:
  • نمونه‌های سایه ( crbug.com/401213105 ).
  • لینک‌های نام با موقعیت‌یابی لنگری ( crbug.com/401213107 ).
  • دکمه‌های ویرایشگر Flex و Grid ( crbug.com/401213522 ).
  • طول‌ها ( crbug.com/401211976 ).
  • لینک‌های URL ( crbug.com/401213104 ).
  • نام‌ها و مقادیر ویژگی‌ها ( crbug.com/417458979 ).

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

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

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

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

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

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

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