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

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

Google I/O نسخه 2025

Chrome DevTools قرار است در نمایشگاه Google I/O امسال حضور پررنگی داشته باشد. قرار است ترکیبی از جلسات زنده و جلسات ضبط شده وجود داشته باشد.

برای آشنایی با ویژگی‌های جدید هیجان‌انگیز، موارد زیر را دنبال کنید:

علاوه بر این، فراموش نکنید که در جلسه راشل اندرو چه جدید در وب است ، 20 مه 2025 تنظیم کنید | 4:30 بعد از ظهر PT.

آخرین ویدیوی ما را برای مروری سریع از آخرین نکات برجسته ما بررسی کنید:

با Gemini تغییرات CSS را در فضای کاری خود تغییر دهید و ذخیره کنید

با چند کلیک، اکنون می‌توانید از Gemini بخواهید CSS را برای شما اصلاح و اصلاح کند و با یک پوشه فضای کاری متصل ، تغییرات خود را در فایل‌های منبع در رایانه‌تان ذخیره کنید.

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

با اتصال پوشه فضای کاری ، در پنل Elements ، روی Ask AI کلیک کنید، از Gemini بخواهید CSS را تغییر دهد، روی Continue کلیک کنید تا تغییرات را به صورت زنده آزمایش کنید، سپس تغییرات ذخیره نشده را گسترش دهید، روی Apply to workpace کلیک کنید، تفاوت را بررسی کنید و روی Save all کلیک کنید.

یک پوشه فضای کاری را وصل کنید و تغییرات را در فایل های منبع خود ذخیره کنید

اکنون می توانید به طور خودکار (یا به صورت دستی) یک پوشه فضای کاری را متصل کنید تا به DevTools اجازه دهید تغییرات جاوا اسکریپت، HTML و CSS را به فایل های منبع ذخیره شده در رایانه شما ذخیره کند.

بررسی کنید که چگونه با جاوا اسکریپت کار می کند:

شماره Chromium: 404170628 .

از Gemini در مورد بینش عملکرد بپرسید

با کلیک روی یک دکمه، اکنون می توانید یک چت با Gemini برای بررسی و عمل بر روی بینش عملکرد زیر شروع کنید:

  • LCP به صورت فاز
  • کشف درخواست LCP
  • رندر درخواست های مسدود کردن
  • مقصران تغییر چیدمان
  • تأخیر درخواست سند

قبل و بعد از افزودن دکمه "Ask AI" به بینش در پانل عملکرد.

می توانید نظرات خود را در مورد این ویژگی در crbug.com/371170842 بنویسید.

یافته های عملکرد را با جمینی حاشیه نویسی کنید

اکنون می توانید از Gemini بخواهید که حاشیه نویسی در مورد رویدادها در ردیابی عملکرد ایجاد کند.

روی یک رویداد در مسیر اصلی دوبار کلیک کنید، سپس روی Generate label در کنار فیلد ورودی کلیک کنید. Gemini می تواند برچسبی را بر اساس ردیابی پشته و زمینه پیشنهاد دهد.

اسکرین شات ها را به چت های خود با Gemini اضافه کنید

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

می‌توانید از اسکرین‌شات‌ها برای ارائه زمینه بصری اضافی به درخواست‌های خود استفاده کنید، به عنوان مثال، برای بررسی اینکه آیا همه دکمه‌های قابل مشاهده فاصله یکسانی دارند یا خیر.

قبل و بعد از افزودن دکمه «گرفتن اسکرین شات» به پانل «دستیار هوش مصنوعی».

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

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

جاوا اسکریپت تکراری

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

بینش «جاوا اسکریپت تکراری» در پانل عملکرد.

همچنین می‌توانید روی View Treemap در بینش کلیک کنید تا وابستگی‌های جاوا اسکریپت را بررسی کنید.

جاوا اسکریپت قدیمی

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

بینش «جاوا اسکریپت قدیمی» در پانل عملکرد.

گمانه زنی ها اکنون از برچسب های قانون پشتیبانی می کنند

در صورت وجود تگ ، Application > Speculative loads اکنون به جای URL برای مجموعه قوانین، برچسب ها را نشان می دهد.

قبل و بعد از جایگزینی URL مجموعه قوانین با یک برچسب.

شماره Chromium: 393408589 .

فانوس دریایی 12.6.0

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

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

قبل و بعد از افزودن گزینه تغییر به بینش در گزارش Lighthouse.

همچنین لیست کامل تغییرات را ببینید.

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

شماره Chromium: 40543651 .

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

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

  • شبکه : تجزیه برای فرمت های شناخته شده زمان بندی سرور اضافه شده است.
  • اکنون می‌توانید ردیف‌های جداول را با Cmd / Ctrl + کلیک لغو انتخاب کنید (مشکل Chromium: 409474445 ).
  • عملکرد > اطلاعات آماری > استفاده از طول عمر حافظه پنهان کارآمد اکنون دارایی هایی با TTL برابر یا بیشتر از 30 روز را نادیده می گیرد.

دسترسی

این نسخه بهبودهای دسترسی زیر را به همراه دارد:

  • عملکرد : فلش های آغازگر در ردیابی اکنون بیشتر قابل مشاهده هستند.
  • عناصر : اکنون می توانید نمای درختی دسترسی تمام صفحه را با میانبر A تغییر دهید (مشکل Chromium: 40888478 ).

  • خوانندگان صفحه اکنون از جمله اعلام می کنند:

    • وقتی از بلوک‌های کد کپی می‌کنید، "در کلیپ بورد کپی شد".
    • هنگامی که تغییراتی را در فضای کاری خود در چت کمک هوش مصنوعی اعمال می کنید، "اعمال در فضای کاری".
    • هنگامی که از هوش مصنوعی می‌خواهید آن را در Performance > Annotations ایجاد کند، "Generating Label" را انتخاب کنید.
    • توجه داشته باشید که دستورات پیشنهادی در چت کمک هوش مصنوعی وجود دارد.
    • پس‌اندازهای تخمینی را برای اطلاعات آماری مرتبط در عملکرد > اطلاعات آماری بخوانید.

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

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

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

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

چیزهای جدید در DevTools

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