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

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

نسخه گوگل آی/او ۲۰۲۵

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

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

علاوه بر این، فراموش نکنید که در جلسه آنلاین «چه خبر؟» از ریچل اندرو، ۲۰ می ۲۰۲۵، ساعت ۴:۳۰ بعد از ظهر به وقت اقیانوس آرام، شرکت کنید.

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

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

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

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

با اتصال یک پوشه فضای کاری ، در پنل Elements ، روی «از هوش مصنوعی بپرسید» کلیک کنید، از Gemini بخواهید CSS را تغییر دهد، برای آزمایش تغییرات به صورت زنده روی «ادامه» کلیک کنید، سپس «تغییرات ذخیره نشده» را باز کنید، روی «اعمال به فضای کاری» کلیک کنید، تفاوت را بررسی کنید و روی «ذخیره همه» کلیک کنید.

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

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

نحوه کار با جاوا اسکریپت را بررسی کنید:

مشکل کروم: ۴۰۴۱۷۰۶۲۸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بخش جدید Performance > Insights > Duplicated JavaScript در بخش Network Track، درخواست‌های مربوط به ماژول‌های بزرگ و تکراری جاوا اسکریپت در بسته‌های شما را در صورت وجود در صفحه‌تان، برجسته می‌کند.

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

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

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

بخش جدید Performance > Insights > Legacy JavaScript در بخش Network Track، درخواست‌های مربوط به جاوااسکریپت قدیمی را در صورت وجود در صفحه شما، برجسته می‌کند. برای مثال، polyfillها و transformهایی که مرورگرهای قدیمی‌تر را قادر به استفاده از ویژگی‌های جدید جاوااسکریپت می‌کنند. با این حال، بسیاری از آنها برای مرورگرهای مدرن ضروری نیستند.

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

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

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

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

شماره کروم: ۳۹۳۴۰۸۵۸۹۹

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

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

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

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

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

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

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

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

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

  • شبکه : تجزیه و تحلیل برای فرمت‌های شناخته شده زمان‌بندی سرور اضافه شد.
  • اکنون می‌توانید با استفاده از Cmd / Ctrl + click، ردیف‌های جداول را از حالت انتخاب خارج کنید (شماره کروم: ۴۰۹۴۷۴۴۴۵ ).
  • عملکرد > بینش‌ها > استفاده از طول عمر کارآمد حافظه پنهان اکنون دارایی‌هایی با TTL برابر یا طولانی‌تر از ۳۰ روز را نادیده می‌گیرد.

دسترسی‌پذیری

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

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

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

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

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

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

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

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

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

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