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

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

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

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

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

توضیح یک خطا توسط هوش مصنوعی.

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

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

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

قبل و بعد از پشتیبانی از @position-try قوانین CSS.

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

شماره Chromium: 40279608 .

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

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

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

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

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

قبل و بعد از افزودن تنظیمات جدید برای چاپ زیبای خودکار و بسته شدن براکت.

مسائل Chromium: 40865010 ، 324314570 .

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

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

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

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

قبل و بعد از تشخیص ردهای گرفتار شده.

شماره Chromium: 40283993 .

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

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

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

ردیابی پشته قبل و بعد از چاپ با پیشوندهای "Caused by".

شماره Chromium: 40182832 .

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

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

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

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

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

قبل و بعد از افزودن بخش اختصاصی برای نکات اولیه.

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

شماره Chromium: 40222701 .

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

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

قبل و بعد از اضافه کردن گزینه برای مخفی کردن ستون آبشار.

شماره Chromium: 40574989 .

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

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

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

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

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

قبل و بعد از اضافه کردن آمار انتخابگر.

شماره Chromium: 324282954 .

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

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

برای ورود به حالت پیکربندی، روی دکمه ویرایش در سمت چپ نام آهنگ کلیک کنید. سپس روی up یا down کلیک کنید تا مسیر را جابجا کنید یا روی 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 است که در این نسخه قدیمی شده است.

قبل و بعد از اضافه کردن حذف از افزونه 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 استفاده کنید.

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

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