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

Sofia Emelianova

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

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

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

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

قوانین @position-try در Elements > Styles پشتیبانی می‌کند

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

برای کسب اطلاعات بیشتر، به معرفی CSS Anchor positioning API مراجعه کنید.

شماره Chromium: 40279608 .

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

این نسخه چندین پیشرفت را در پنل Sources به ارمغان می آورد.

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

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

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

مسائل Chromium: 40865010 ، 324314570 .

وعده‌های رد شده به‌عنوان دستگیر شده شناخته می‌شوند

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

به عبارت دیگر، هنگامی که Sources > Breakpoints > check_box Pause on uncatch excesses روشن است، دیباگر در عباراتی مشابه موارد زیر مکث نمی کند:

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

شماره Chromium: 40283993 .

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

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

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

شماره Chromium: 40182832 .

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

این نسخه چندین پیشرفت را در پنل شبکه به ارمغان می آورد.

سرصفحه های Early Hints را بررسی کنید

سرصفحه های Early Hints یک بخش اختصاصی در برگه Headers درخواست در پانل Network دریافت می کنند. قبلاً می‌توانید سرصفحه‌های مربوطه را در بخش Response Headers پیدا کنید.

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

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

شماره Chromium: 40222701 .

ستون آبشار را پنهان کنید

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

شماره Chromium: 40574989 .

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

این نسخه چندین پیشرفت را در پنل Performance به ارمغان می آورد.

آمار انتخابگر CSS را ضبط کنید

پانل عملکرد یک تنظیم جدید دریافت می کند تا به شما امکان می دهد آمار انتخابگر CSS را برای رویدادهای طولانی مدت محاسبه مجدد سبک ثبت کنید.

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

شماره Chromium: 324282954 .

تغییر ترتیب و مخفی کردن آهنگ

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

برای ورود به حالت پیکربندی، روی دکمه ویرایش ویرایش در سمت چپ نام آهنگ کلیک کنید. سپس روی arrow_upward up یا arrow_downward down کلیک کنید تا مسیر را جابجا کنید یا روی visibility_off hide کلیک کنید. پس از پایان کار، روی دکمه بررسی انجام شده در سمت راست نام آهنگ کلیک کنید.

نسخه بعدی، کروم 126، بهبودهای بیشتری را در این رابط کاربری به ارمغان خواهد آورد.

شماره Chromium: 311439339 .

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

اکنون می توانید نگهدارنده ها را در عکس های فوری پشته ای که با پانل حافظه می گیرید نادیده بگیرید.

برای نادیده گرفتن یک نگهدارنده، یک شی را انتخاب کنید و در قسمت Retainer ، روی یک نگهدارنده کلیک راست کرده و از منوی کشویی گزینه Ignore this retainer را انتخاب کنید. نگهدارنده های نادیده گرفته شده با مقدار ignored در ستون Distance علامت گذاری می شوند. برای توقف نادیده گرفتن، روی Restore ignored Retainers در نوار اقدام در بالا کلیک کنید.

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

شماره Chromium: 327337527 .

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

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

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

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

شماره Chromium: 772558 .

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

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

• پانل ضبط اکنون به طور رسمی از وضعیت پیش نمایش خارج شده است ( 329271496 ).
• هنگامی که یک فرمت‌کننده سفارشی یک null را برای تابع body() برمی‌گرداند، کنسول خطایی نشان نمی‌دهد ( 329400119 ).
• پانل Sources برجسته‌کننده نحو به‌روزرسانی شده است، به‌ویژه، اکنون از پرچم‌های v و d در عبارت منظم پشتیبانی می‌کند.
• برگه Network > Cookies یک اشکال را با نگاشت کوکی‌های مستثنی شده برای کوکی‌های پاسخ برطرف کرد ( 41491846 ).
• اکنون تب Elements > Styles کارهای زیر را انجام می دهد:
  • قوانین ارثی کاملاً بارگذاری شده را با ویژگی های سفارشی نشان می دهد ( 41489874 ).
  • مقدار اعمال شده را در روشنایی تاریک () بسته به تم رنگ برجسته می کند ( 331123816 ).

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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