چیزهای جدید در DevTools (Chrome 121)

Sofia Emelianova

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

نوار فیلتر دوباره طراحی شده است تا به شما امکان دهد درخواست‌ها را آسان‌تر فیلتر کنید و پنل شبکه را خلوت‌تر کنید.

آزمایش مربوطه به طور پیش‌فرض در این نسخه فعال بود، اما به حالت قبل برگردانده خواهد شد. می‌توانید پیشرفت را در crbug.com/1523150 پیگیری کنید.

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

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

نظرات خود را در مورد این ویژگی در crbug.com/1500573 با ما در میان بگذارید.

شماره کروم: ۱۴۸۶۴۳۱ .

بهبود عناصر

پشتیبانی از @font-palette-values

پنل Elements اکنون از at-rule مربوط به CSS با مشخصه @font-palette-values ​​پشتیبانی می‌کند. این ویژگی به شما امکان می‌دهد مقادیر پیش‌فرض ویژگی font-palette را سفارشی کنید.

در بخش Styles ، روی مقدار ویژگی font-palette کلیک کنید تا DevTools شما را به بخش اختصاصی @font-palette-values ​​ببرد که در آنجا می‌توانید مقادیر سفارشی خود را ویرایش کنید.

شماره کروم: ۱۵۰۱۷۸۱ .

مورد پشتیبانی‌شده: ویژگی سفارشی به عنوان جایگزین ویژگی سفارشی دیگر

عناصر > سبک‌ها اکنون یک ویژگی سفارشی را که جایگزین یک ویژگی سفارشی دیگر است، شناسایی می‌کند.

شماره کروم: ۱۴۹۹۲۶۵ .

پشتیبانی از نقشه منبع بهبود یافته

تنظیمات تنظیمات > آزمایش‌ها > چک‌باکس حل نام متغیرها در عبارات با استفاده از نقشه‌های منبع به طور پیش‌فرض فعال شده است.

DevTools از نقشه‌های منبع استفاده می‌کند تا به شما امکان دهد کد اصلی خود را در Sources و Scope حتی پس از ترکیب، کوچک‌سازی یا کامپایل آن، اشکال‌زدایی کنید. این آزمایش به شما امکان می‌دهد نام متغیرهای اصلی خود را به طور مداوم در DevTools ارزیابی کنید، از جمله اما نه محدود به:

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

  

• عبارات زنده

  

• عبارات را تماشا کنید

  

• نقاط شکست شرطی و نقاط ثبت وقایع

  

برای جزئیات بیشتر، به RFC مربوطه مراجعه کنید.

شماره کروم: ۱۴۴۴۳۴۹ .

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

مسیر تعاملات پیشرفته

مسیر Performance > Interactions دارای حاشیه‌هایی است که نشان‌دهنده تأخیرهای ورودی و ارائه در مرزهای زمانی پردازش هستند.

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

شماره کروم: ۱۴۹۵۷۵۱

فیلتر پیشرفته در تب‌های Bottom-Up، Call Tree و Event Log

تب‌های Bottom-Up ، Call Tree و Event Log در پنل Performance سه دکمه جدید برای فیلتر پیشرفته دریافت کردند:

• match_case حالت تطبیق .
• عبارت منظم عبارت منظم.
• match_word کل کلمه را مطابقت می‌دهد .

علاوه بر این، برای کمک به شما در حفظ زمینه، اکنون فقط موارد سطح بالا با فیلتر موجود در برگه Bottom-Up مطابقت دارند. قبلاً، فیلتر با هر گره مطابقت داشت.

شماره کروم: ۱۴۹۶۳۵۵

نشانگرهای تورفتگی در پنل منابع

ویرایشگر در پنل منابع ، اکنون برای راحتی شما، بلوک‌های کد تورفته را با خطوط عمودی علامت‌گذاری می‌کند.

شماره کروم: ۱۴۷۹۹۸۶

نکات مفید برای هدرها و محتوای لغو شده در پنل شبکه

پنل شبکه اکنون وقتی نشانگر ماوس را روی آیکون نقطه بنفش کنار تب‌های Headers و Response یک درخواست قرار می‌دهید، راهنماهایی را نشان می‌دهد. این راهنماها به شما می‌گویند چه چیزی توسط DevTools لغو شده است.

شماره کروم: ۱۴۶۹۷۷۶ .

گزینه‌های جدید منوی فرمان برای اضافه کردن و حذف الگوهای مسدود کردن درخواست

اکنون می‌توانید دستوراتی را برای اضافه یا حذف الگوهای مسدود کردن درخواست شبکه در منوی فرمان تایپ کنید.

دستور Add شما را به کادر محاوره‌ای برای مشخص کردن الگو می‌برد و دستور Remove تمام الگوها را بدون باز کردن پنل مسدود کردن درخواست شبکه حذف می‌کند.

آزمایش نقض CSP حذف شد

تب آزمایشی تخلفات CSP که در نسخه ۸۹ معرفی شده بود، به دلیل زائد بودن حذف شده است.

برای مشاهده جزئیات CSP در یک نگاه، به مسیر Application > Frames > Content Security Policy (CSP) بروید.

علاوه بر این، هیئت رسیدگی به مسائل ، تخلفات CSP را گزارش می‌دهد.

فانوس دریایی ۱۱.۳.۰

پنل Lighthouse اکنون Lighthouse 11.3.0 را اجرا می‌کند. لیست کامل تغییرات را ببینید. از جمله تغییرات قابل توجه، امکان اجرای گزارش‌ها در صفحات ۴۰۴ است.

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

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

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

این نسخه بهبودهای دسترسی زیر را دارد:

• در Network > Payload ، اکنون می‌توانید با نگه داشتن کلید Tab، روی دکمه‌های view source و view URL-encoded فوکوس کنید و برای اجرای عمل مربوطه، Enter یا Space را فشار دهید.
• در کنسول ، برای کاهش سردرگمی، لینک‌هایی که به اسکریپت‌هایی منتهی می‌شوند که دیگر برای اشکال‌زدا در دسترس نیستند، اکنون خاکستری شده‌اند و نمی‌توان روی آنها کلیک کرد.
• در درخت‌های ناوبری، مانند درخت موجود در Sources > Page ، کلید Enter اکنون گره‌های دارای فرزند را باز و بسته می‌کند.

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

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

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

• عملکرد . اگر ضبط با شکست مواجه شود، اکنون می‌توانید رویدادهای ردیابی خام را دانلود کنید و سعی کنید بفهمید چه چیزی اشتباه پیش رفته است ( commit ).
• میانبر نمایش کنسول ( Ctrl + ` برای مک، Ctrl + + برای ویندوز و لینوکس) اکنون نه تنها کنسول را باز می‌کند، بلکه با فشار دادن مجدد، آن را می‌بندد.
• منابع توسعه‌دهندگان . اشکالی که مانع از گزارش منابع CSS و مشکلات آنها می‌شد ( 1420362 ) برطرف شد.
• عناصر :
  • اشکالی که در بررسی عناصر در iframe ها وجود داشت برطرف شد ( 1453375 ).
  • محاسبه شد . اشکالی که مانع از رندر شدن مقادیر پیش‌فرض می‌شد ( 1499882 ) برطرف شد.
  • جستجو . اشکالی که مانع از محاسبه تعداد تطابق‌ها برای پرس‌وجوهای کوتاه یک یا دو کاراکتری می‌شد ( 1416457 ) برطرف شد.
• کنسول . اکنون عبارات منظمی را که با یک کاراکتر escape شده در کادر فیلتر ( 1346936 ) خاتمه می‌یابند، به درستی تجزیه می‌کند.
• تنظیمات > فضای کاری . اشکالی که مانع از اضافه شدن یک پوشه مستثنی شده ( 1503580 ) می‌شد، برطرف شد.
• شبکه > پیش‌نمایش . اکنون تصاویر را با data: آدرس‌های اینترنتی ( 1381791 ).
• حافظه . دکمه‌های آپلود، بارگذاری و دانلود ، ذخیره به نوار عمل ( 1275407 ) اضافه شد.

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

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

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

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

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

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

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