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

Sofia Emelianova

یک Chrome DevTools قابل اعتمادتر و پربازده‌تر

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

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

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

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

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

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

مکالمه خود را از پنل عناصر با انتخاب یک عنصر DOM و کلیک کردن روی از هوش مصنوعی بپرسید ، بنابراین عنصر به عنوان زمینه مکالمه مشخص می‌شود. سپس در فیلد ورودی روی add_photo_alternate کلیک کنید تا تصویر اضافه شود .

هدرهای درخواست را به جدول در شبکه اضافه کنید

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

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

نکات برجسته کنفرانس گوگل I/O 2025 را ببینید

اگر هنوز این کار را نکرده‌اید، ویژگی‌های جدید و مهم Chrome DevTools که در Google I/O 2025 برجسته شده‌اند را امتحان کنید، از جمله اما نه محدود به:

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

علاوه بر این، به بینش‌های جدید عملکرد با عنوان‌های Duplicated JavaScript و Legacy JavaScript نگاهی بیندازید.

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

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

• کاربرد : اکنون یک پنجره‌ی تأیید برای پاک کردن مخازن شیء IndexedDB وجود دارد زیرا این یک اقدام برگشت‌ناپذیر است ( crbug.com/326987147 ).
• منابع : نقاط ثبت وقایع و نشان‌های نقطه توقف شرطی در کنار خطوط کد، اکنون با نگه داشتن ماوس روی آن‌ها، یک راهنمای ابزار (tooltip) حاوی پیام یا شرط گزارش مربوطه نمایش می‌دهند ( crbug.com/40266230 ).

• عملکرد :

  • بخش مربوط به مقصران تغییر طرح‌بندی (Layout shift ) اکنون لینک‌هایی به تصاویر بدون اندازه را نشان می‌دهد ( crbug.com/416449602 ).
  • بینش کشف درخواست LCP اکنون تأخیر بارگذاری تصویر را پس از اولین نقطه شروع نشان می‌دهد.
  • تنظیم سرعت : مشکل فرمت قدیمی تنظیمات تنظیم سرعت که برخی از کاربران به صورت محلی ذخیره کرده بودند، برطرف شد.
  • گزارش رویدادها : سرعت فیلترینگ افزایش یافته است ( crbug.com/40783421 ).

• انیمیشن‌ها : پیش‌نمایش تصاویر منسوخ شده است زیرا پیش‌نمایش کلیکی یک گروه انیمیشن، تجربه مشابه و بهتری را ارائه می‌دهد ( crbug.com/330179643 ).

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

  • برچسب‌های آریا به نوار کناری منابع > نقاط توقف DOM ، در صورت وجود، اضافه شدند.
  • پیمایش صفحه‌کلید Shift + Tab در فیلد متن Live expression در کنسول ( crbug.com/408398435 ، crbug.com/420344137 ) برطرف شد.
  • تنظیمات اکنون از میانبرهای بزرگنمایی/کوچکنمایی/تنظیم مجدد پشتیبانی می‌کند: Cmd/Ctrl + +/-/0 ( crbug.com/41484555 ).
  • عناصر > سبک‌ها : نمادهای راهنمایی و هشدار CSS ( crbug.com/40706851 ) و ساعت زاویه‌ای اکنون با صفحه‌کلید قابل تنظیم برای فوکوس هستند ( crbug.com/401212624 ، crbug.com/401213524 ).

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

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

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

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

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

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

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