موارد جدید در 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.

برای کسب اطلاعات بیشتر، عناصر Tether را با یکدیگر با موقعیت لنگر CSS ببینید.

شماره 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: چاپ می‌کند، بنابراین همچنان می‌توانید خطای اصلی را ببینید.

ردیابی پشته قبل و بعد از چاپ با پیشوندهای "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 است که در این نسخه قدیمی شده است.

قبل و بعد از اضافه کردن حذف از افزونه 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 را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools Tips ما بگذارید.

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

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

کروم 125

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

کروم 118

کروم 117

کروم 116

کروم 115

کروم 114

کروم 113

کروم 112

کروم 111

کروم 110

کروم 109

کروم 108

کروم 107

کروم 106

کروم 105

کروم 104

کروم 103

کروم 102

کروم 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

کروم 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

کروم 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

کروم 74

کروم 73

کروم 72

کروم 71

Chrome 70

کروم 68

کروم 67

کروم 66

کروم 65

کروم 64

کروم 63

کروم 62

کروم 61

کروم 60

کروم 59