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

Sofia Emelianova

با Gemini خطاها و هشدارها را در کنسول بهتر درک کنید

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

برای دریافت توضیح تولید شده توسط هوش مصنوعی در مورد یک خطا یا هشدار، روی این دکمه خطا (هشدار) کنار پیام در کنسول را درک کنید و دستورالعمل‌ها را دنبال کنید.

برای اطلاعات بیشتر، به «با هوش مصنوعی خطاها و هشدارها را بهتر درک کنید» مراجعه کنید.

پشتیبانی از قوانین @position-try در عناصر > سبک‌ها

برای کمک به شما در اشکال‌زدایی موقعیت‌یابی لنگر CSS ، تب Elements > Styles اکنون از قوانین CSS @position-try پشتیبانی می‌کند. این تب مقادیر position-try-options را بررسی کرده و هر گزینه را به یک بخش اختصاصی @position-try --name پیوند می‌دهد.

برای کسب اطلاعات بیشتر، به معرفی API موقعیت‌یابی لنگر CSS مراجعه کنید.

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

بهبودهای پنل منابع

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

پیکربندی چاپ زیبا و بستن براکت خودکار

اکنون می‌توانید قابلیت چاپ زیبا و بستن خودکار براکت را برای ویرایشگر در بخش منابع فعال یا غیرفعال کنید. چاپ زیبا فایل‌های کوچک‌شده را قابل خواندن می‌کند. بستن براکت هنگام تایپ یک براکت آغازین، به طور خودکار یک براکت پایانی ( ) یا } ) یا برچسب ( > ) اضافه می‌کند.

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

مشکلات کرومیوم: ۴۰۸۶۵۰۱۰ ، ۳۲۴۳۱۴۵۷۰ .

وعده‌های رد شده‌ی مدیریت شده به عنوان پذیرفته شده شناخته می‌شوند

پنل منابع اکنون به درستی promise های رد شده را به عنوان catch شده تشخیص می‌دهد، اگر آنها را با .catch() یا دو آرگومان .then() مدیریت کرده باشید.

به عبارت دیگر، وقتی گزینه‌ی «مکث در استثنائاتِ نادیده» از مسیر «منابع» > «نقاط شکست » > «چک‌باکس» فعال باشد، دیباگر روی دستوراتی مشابه موارد زیر مکث نخواهد کرد:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

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

علل خطا در کنسول

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

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

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

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

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

بررسی سربرگ‌های Early Hints

سرتیترهای Early Hints در تب Headers مربوط به درخواست در پنل Network ، بخش اختصاصی خود را دارند. پیش از این، می‌توانستید سرتیترهای مربوطه را در بخش Response Headers پیدا کنید.

Early Hints یک کد وضعیت HTTP ( 103 Early Hints ) است که برای ارسال یک پاسخ اولیه HTTP قبل از پاسخ نهایی استفاده می‌شود. این به سرور اجازه می‌دهد تا در حالی که سرور مشغول تولید منبع اصلی است، در مورد منابع فرعی حیاتی (مثلاً یک style sheet یا جاوا اسکریپت حیاتی) یا منابع اصلی که احتمالاً توسط صفحه استفاده خواهند شد، به مرورگر سرنخ‌هایی ارسال کند.

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

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

ستون آبشاری را مخفی کنید

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

مشکل کروم: ۴۰۵۷۴۹۸۹

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

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

آمار انتخابگرهای CSS را ثبت کنید

پنل Performance تنظیمات جدیدی دریافت می‌کند که به شما امکان می‌دهد آمار انتخابگر CSS را برای رویدادهای طولانی‌مدت Recalculate Style ثبت کنید.

برای مشاهده آمار، یک رویداد Recalculate Style را انتخاب کنید و تب جدید Selector Stats را باز کنید. این تب اطلاعاتی در مورد زمان سپری شده، تعداد تلاش‌ها برای تطبیق و درصد موارد غیرمطابقت یافته با مسیر آهسته برای هر سلکتور را به شما نشان می‌دهد.

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

تغییر ترتیب و پنهان کردن آهنگ‌ها

پنل Performance یک حالت پیکربندی جدید دریافت می‌کند که به شما امکان می‌دهد ترتیب آهنگ‌ها را تغییر داده و آنها را پنهان کنید.

برای ورود به حالت پیکربندی، روی دکمه ویرایش (Edit) در سمت چپ نام آهنگ کلیک کنید. سپس برای جابجایی آهنگ، روی فلش_بالارو (arrow_upward) به بالا یا فلش_پایینرو (arrow_downward) به پایین کلیک کنید یا روی دید_خاموشرو (visibility_off) به پایین کلیک کنید. وقتی کارتان تمام شد، روی دکمه بررسی انجام شده (done Check) در سمت راست نام آهنگ کلیک کنید.

نسخه بعدی، کروم ۱۲۶، بهبودهای بیشتری را در این رابط کاربری به همراه خواهد داشت.

مشکل کروم: ۳۱۱۴۳۹۳۳۹

نادیده گرفتن نگهدارنده‌ها در پنل حافظه

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

برای نادیده گرفتن یک نگهدارنده، یک شیء را انتخاب کنید و در بخش نگهدارنده ، روی یک نگهدارنده کلیک راست کرده و از منوی کشویی گزینه «نادیده گرفتن این نگهدارنده» را انتخاب کنید. نگهدارنده‌های نادیده گرفته شده با مقدار ignored در ستون فاصله مشخص می‌شوند. برای متوقف کردن نادیده گرفتن، روی «بازگرداندن نگهدارنده‌های نادیده گرفته شده» در نوار اقدام در بالا کلیک کنید.

علاوه بر این، اسنپ‌شات‌های هیپ اکنون از تعداد بیشتری (صدها میلیون) لبه و گره مهار ( ۳۳۲۳۵۰۵۷۶ ) پشتیبانی می‌کنند.

مشکل کروم: ۳۲۷۳۳۷۵۲۷

فانوس دریایی ۱۱.۷.۱

پنل Lighthouse اکنون Lighthouse 11.7.1 را اجرا می‌کند. لیست کامل تغییرات را ببینید.

از جمله تغییرات قابل توجه، پشتیبانی منسوخ‌شده از افزونه Publisher Ads است که در این نسخه منسوخ شده است.

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

مشکل کروم: ۷۷۲۵۵۸

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

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

• پنل ضبط‌کننده اکنون رسماً از وضعیت پیش‌نمایش خارج شده است ( ۳۲۹۲۷۱۴۹۶ ).
• کنسول اکنون وقتی یک قالب‌بندی سفارشی مقدار null را برای تابع body() برمی‌گرداند، خطایی نشان نمی‌دهد، که یک رفتار معتبر است ( 329400119 ).
• پنل منابع ، نشانگر سینتکس را به‌روزرسانی کرد، به ویژه، اکنون از پرچم‌های v و d در عبارات منظم پشتیبانی می‌کند.
• تب Network > Cookies اشکالی را که باعث می‌شد کوکی‌های معاف به کوکی‌های پاسخ نگاشت شوند، برطرف کرد ( ۴۱۴۹۱۸۴۶ ).
• تب عناصر > سبک‌ها اکنون موارد زیر را انجام می‌دهد:
  • قوانین ارثی کاملاً سربارگذاری شده با ویژگی‌های سفارشی ( ۴۱۴۸۹۸۷۴ ) را نشان می‌دهد.
  • مقدار اعمال شده در تابع light-dark() را بسته به تم رنگ ( 331123816 ) هایلایت می‌کند.

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

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

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

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

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

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

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