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

صوفیا املیانووا
Sofia Emelianova
GitHub

تاریخچه چت پایدار هوش مصنوعی

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

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

این نسخه بهبودهای زیادی را در پنل عملکرد (Performance) به همراه دارد.

بینش تحویل تصویر

تب Performance > Insights اکنون می‌تواند تصاویری را که می‌توانید حجم فایل آنها را بهینه کنید، هایلایت کند. برای مشاهده هایلایت شدن تصویر در مسیر Network ، روی آن در Insight کلیک کنید.

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

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

ناوبری کیبورد کلاسیک و مدرن

پنل عملکرد اکنون به شما امکان می‌دهد سبک ناوبری کیبورد مورد نظر خود را انتخاب کنید، با تفاوت‌های اصلی زیر:

  • کلاسیک : بزرگنمایی با چرخ ماوس (صفحه لمسی به بالا یا پایین) و پیمایش عمودی با Shift + چرخ ماوس.
  • مدرن : اسکرول عمودی با چرخ ماوس، اسکرول افقی با Shift + چرخ ماوس، و زوم با Command/Control + چرخ ماوس.

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

کادر گفتگوی میانبرها با میانبرهای موجود برای پنل عملکرد.

اسکریپت‌های نامربوط را در نمودار شعله‌ای نادیده بگیرید

برای تمرکز بهتر روی کد خود، اکنون می‌توانید اسکریپت‌های نامربوط را مستقیماً در پنل Performance به لیست نادیده گرفتن اضافه کنید. این پنل به طور خودکار تودرتو بودن بیش از حد را از بین می‌برد.

برای افزودن اسکریپت‌ها به لیست نادیده گرفته شده، روی گزینه‌ی « «نمایش تنظیمات لیست نادیده گرفته شده» (Show ignore list settings) در نوار عملیات بالا کلیک کنید و یک عبارت منظم (regular expression) را در فیلد ورودی تایپ کنید. نمودار شعله‌ای (flame chart) همزمان با تایپ شما، قانون جدید را اعمال خواهد کرد.

DevTools قوانین لیست نادیده گرفته شده را که در تنظیمات > لیست نادیده گرفته شده اضافه می‌کنید، ذخیره می‌کند و می‌توانید آنها را در کادر محاوره‌ای به دلخواه فعال یا غیرفعال کنید.

نشانگر تایم‌لاین و هایلایت محدوده با هاور

برای کمک به شما در درک بهتر ردیابی عملکرد، پنل عملکرد اکنون موارد زیر را انجام می‌دهد:

  • یک نشانگر عمودی به شما نشان می‌دهد که وقتی نشانگر ماوس را روی خط زمانی (Timeline) نگه می‌دارید، کل رد عملکرد را در بر می‌گیرد.
  • وقتی نشانگر ماوس را روی آیتم‌های موجود در مسیر اصلی نگه می‌دارید، یک محدوده را در خط زمانی برجسته می‌کند.

تنظیمات توصیه‌شده برای کنترل سرعت

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

قبل و بعد از افزودن توصیه‌های مربوط به کاهش سرعت به منوهای تنظیمات.

گلوگاه پردازنده‌ی پیشنهادی (فعلاً) رایج‌ترین گزینه‌ی 4x slowdown است و توصیه‌ی شبکه بر اساس داده‌های گزارش تجربه‌ی کاربری کروم است، البته اگر در معیارهای زنده فعال باشد.

علاوه بر این، پنل Performance اکنون تنظیمات throttling که در کنار هر ردیابی در منوی کشویی Recent sessions در نوار اکشن استفاده کرده‌اید را به شما یادآوری می‌کند.

نشانگرهای زمان‌بندی در یک پوشش

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

قبل و بعد از انتقال نشانگرها به پایین مسیر.

مسیر Timings فراخوانی‌های سفارشی mark() و measure() شما را حفظ می‌کند.

خلاصه‌ای از ردپاهای فراخوانی‌های جاوا اسکریپت در پشته

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

قبل و بعد از افزودن ردپاهای پشته به برگه خلاصه.

تنظیمات نشان به منو در Elements منتقل شد

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

قبل و بعد از انتقال تنظیمات نشان به منو.

پنل جدید «چه خبر؟»

پنل «چه خبر؟» ظاهر جدیدی پیدا کرده که بیشتر از طراحی کروم پیروی می‌کند.

ظاهر قدیمی و جدید پنل «چه خبر».

شماره کروم: ۳۲۵۴۴۱۸۵۸

فانوس دریایی ۱۲.۳.۰

پنل Lighthouse اکنون Lighthouse 12.3.0 را اجرا می‌کند.

این به‌روزرسانی، در کنار موارد دیگر، ممیزی‌های جدیدی را اضافه می‌کند که جداسازی صحیح مبدا را با COOP و سیاست قوی HSTS بررسی می‌کند. لیست کامل تغییرات را ببینید.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

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

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

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

  • منابع : وقتی متوقف می‌شود، اشکال‌زدا اکنون اگر پس از مکث ایجاد شود، به‌طور غیرمنتظره به زمینه‌ی سرویس ورکر ( 373893057 ) تغییر نمی‌کند.
  • عملکرد :
    • با نگه داشتن نشانگر ماوس روی اسکریپت‌ها، راهنماهای ابزار در نمودار شعله‌ای اکنون آدرس‌های اینترنتی (URL) را، در صورت وجود ( 368541957 )، نشان می‌دهند.
    • خلاصه : نمودار دایره‌ای با نمایش میله‌ای جایگزین شده است.
    • کادر انتخاب داده‌های افزونه در تنظیمات ضبط به نمایش آهنگ‌های سفارشی تغییر نام داده است.
    • تب Insights اکنون دارای بخش Passed Insights (N) است که به طور پیش‌فرض بسته است.
  • برنامه > ذخیره‌سازی : می‌توانید ورودی‌های ذخیره‌سازی را با کلیدهای خالی ایجاد کنید زیرا از نظر فنی معتبر هستند ( ۳۷۳۷۰۳۲۸۵ ).
  • حالت دستگاه اکنون برای صفحات chrome:// ( 40186276 ) غیرفعال است.
  • شبکه :
    • با فعال بودن تنظیمات مربوطه، با یک بار کلیک روی Export HAR ، منویی با دو گزینه (sanitized و with sensitive data) باز می‌شود. پیش از این، این منو با کلیک طولانی ( 378076279 ) باز می‌شد.
    • کپی به عنوان cURL اکنون از ویژگی -b برای دور زدن کوکی‌ها و خوانایی بیشتر، به جای -H 'cookie:...' ( 40791742 ) استفاده می‌کند.
  • دسترسی‌پذیری : اکنون می‌توانید تب‌های داخل پنل‌ها را با استفاده از منوی زمینه به چپ یا راست حرکت دهید ( ۳۸۳۱۶۴۷۸۲ ).
  • مسدود کردن درخواست شبکه : این تنظیم منوی فرمان اکنون با کادر انتخاب مربوطه ( 378058733 ) همگام‌سازی شده است.

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

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

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

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

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

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