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

جسلین ین

پرس و جوهای ظرف CSS قابل ویرایش در پانل Styles

اکنون می توانید پرس و جوهای کانتینر CSS را در قسمت Styles مشاهده و ویرایش کنید.

پرس و جوهای کانتینر رویکرد بسیار پویاتری برای طراحی پاسخگو ارائه می دهند. @container at-rule به روشی مشابه یک درخواست رسانه با @media کار می‌کند. با این حال، @container به جای پرس و جو از viewport و عامل کاربر برای اطلاعات، کانتینر اجدادی را که با معیارهای خاصی مطابقت دارد، پرس و جو می کند.

در پنل Elements ، روی یک عنصر DOM با @container at-rule کلیک کنید، DevTools اکنون اطلاعات @container را در قسمت Styles نمایش می‌دهد. برای ویرایش سایز روی آن کلیک کنید. پنجره Styles اطلاعات ظرف مربوطه را نیز نمایش می دهد. ماوس را روی آن نگه دارید تا عنصر ظرف در صفحه برجسته شود و اندازه ظرف را بررسی کنید. برای انتخاب عنصر ظرف، روی آن کلیک کنید.

ویژگی جستجوی کانتینر در حال حاضر آزمایشی است. لطفاً پرچم #enable-container-queries را در زیر chrome://flags روشن کنید تا آن را آزمایش کنید.

پرس و جوهای ظرف CSS قابل ویرایش در پانل Styles

شماره Chromium: 1146422

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

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

ویژگی بسته وب در حال حاضر آزمایشی است. لطفاً پرچم #enable-experimental-web-platform-features را در زیر chrome://flags فعال کنید تا آن را آزمایش کنید.

پیش نمایش بسته نرم افزاری وب

شماره Chromium: 1182537

اشکال زدایی API Reporting Attribution

خطاهای Attribution Reporting API اکنون در برگه Issues گزارش می‌شوند.

Attribution Reporting یک API جدید است که به شما کمک می‌کند بدون استفاده از شناسه‌های متقابل سایت اندازه‌گیری کنید که چه زمانی یک اقدام کاربر (مانند کلیک یا مشاهده آگهی) منجر به تبدیل می‌شود.

خطاهای Attribution Reporting API در برگه Issues

شماره Chromium: 1190735

مدیریت بهتر رشته در کنسول

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

منوی زمینه جدید در کنسول

در Chrome 90، DevTools کنسول را به‌روزرسانی کرد تا همیشه خروجی‌های رشته‌ای را به صورت JSON معتبر قالب‌بندی کند . بازخوردی از توسعه‌دهندگان دریافت کردیم مبنی بر اینکه این تغییر می‌تواند گیج‌کننده باشد، برخی احساس می‌کنند که میزان فرار بیش از حد است و خروجی را غیرقابل خواندن می‌کند.

کنسول اکنون خروجی‌های رشته‌ای را به صورت واقعی جاوا اسکریپت قالب‌بندی می‌کند و علاوه بر این ۳ گزینه رشته کپی را در اختیار شما قرار می‌دهد. گزینه Copy as JavaScript literal از کاراکترهای ویژه مناسب فرار می کند و بسته به محتوای رشته، رشته را در گیومه های تک، دو نقل قول یا بکتیک قرار می دهد. محتوای رشته کپی در عوض محتویات رشته خام (شامل خطوط جدید و سایر کاراکترهای خاص) را به طور کلمه به کلمه در کلیپ بورد کپی می کند. در نهایت، Copy as JSON literal رشته را به صورت JSON Literal معتبر فرمت می کند و آن را در کلیپ بورد کپی می کند.

شماره Chromium: 1208389

اشکال زدایی CORS بهبود یافته است

TypeError های مربوط به CORS در کنسول اکنون به پانل شبکه و برگه مشکلات پیوند داده شده است.

برای مشاهده درخواست شبکه، یا درک بیشتر پیام خطا و دریافت راه حل های بالقوه در تب Issues، روی دو نماد جدید در کنار پیام خطای مربوط به CORS کلیک کنید.

نمادهای کنار پیام خطای مربوط به CORS

شماره Chromium: 1213393

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

پنل Lighthouse اکنون Lighthouse 8.1 را اجرا می کند.

فانوس دریایی

اگر سایت شما نقشه‌های منبع را در معرض دید Lighthouse قرار می‌دهد، به دنبال دکمه View Treemap بگردید تا خلاصه‌ای از جاوا اسکریپت ارسالی خود را ببینید، قابل فیلتر بر اساس اندازه و پوشش در بارگذاری.

این گزارش همچنین شامل یک فیلتر متریک جدید است (به نمایش حسابرسی مربوط به فیلتر در تصویر مراجعه کنید). معیاری را برای تمرکز بر فرصت‌ها و تشخیص‌های مرتبط با بهبود فقط آن معیار انتخاب کنید.

دسته عملکرد تعدادی تغییرات امتیازی داشت تا با سایر ابزارهای عملکردی هماهنگ شود و وضعیت وب را بهتر منعکس کند.

برای لیست کامل تغییرات، یادداشت های انتشار را بررسی کنید.

شماره Chromium: 772558

نشانی اینترنتی یادداشت جدید را در قسمت Manifest نمایش دهید

اکنون صفحه Manifest URL یادداشت جدید را نشان می دهد.

در حال حاضر در ChromeOS (CrOS)، برنامه‌های Chrome و برنامه‌های Android که قابلیت «یادداشت جدید» را اعلام می‌کنند، ممکن است به عنوان برنامه یادداشت‌برداری در تنظیمات قلم انتخاب شوند (اگر دستگاه CrOS با قلم استفاده شده باشد، نشان داده می‌شود). هنگامی که به عنوان یک برنامه یادداشت برداری انتخاب می شود، برنامه می تواند از دکمه "ایجاد یادداشت" پالت قلم راه اندازی شود. افزودن فیلد new-note-url در مانیفست برنامه بخشی از تلاش برای افزودن عملکردی معادل به برنامه های وب است.

URL یادداشت جدید در صفحه Manifest

شماره Chromium: 1185678

انتخابگرهای تطبیق CSS را ثابت کرد

DevTools انتخابگرهای تطبیق CSS را اصلاح کرد، در آخرین نسخه کار نمی کرد.

انتخابگرهای جدا شده با کاما در صفحه Styles بسته به اینکه با گره DOM انتخاب شده مطابقت داشته باشند، رنگ های متفاوتی دارند:

  • یک قسمت بی همتا با خاکستری روشن نشان داده شده است.
  • یک بخش انتخابگر منطبق به رنگ سیاه نشان داده شده است.

انتخابگرهای تطبیق CSS

شماره کرومیوم: 1219153

چاپ زیبا پاسخ های JSON در پانل شبکه

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

یک پاسخ JSON را در پانل شبکه باز کنید، روی نماد {} کلیک کنید تا زیبا چاپ شود.

چاپ زیبا پاسخ های JSON در پانل شبکه

اشکال کرومیوم: 998674

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

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

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

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

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

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