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

جسلین یین

کوئری‌های قابل ویرایش CSS در پنل Styles

اکنون می‌توانید کوئری‌های CSS container را در پنل Styles مشاهده و ویرایش کنید.

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

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

قابلیت کوئری‌های کانتینر در حال حاضر آزمایشی است. لطفاً برای آزمایش، پرچم #enable-container-queries در chrome://flags فعال کنید.

کوئری‌های قابل ویرایش CSS در پنل Styles

مشکل کرومیوم: ۱۱۴۶۴۲۲

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

بسته وب (Web bundle ) یک فرمت فایل برای کپسوله‌سازی یک یا چند منبع HTTP در یک فایل واحد است. اکنون می‌توانید محتوای بسته وب را در پنل شبکه (Network) پیش‌نمایش کنید.

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

پیش‌نمایش بسته وب

مشکل کرومیوم: ۱۱۸۲۵۳۷

اشکال‌زدایی API گزارش‌دهی انتساب

خطاهای API گزارش انتساب اکنون در برگه مشکلات گزارش می‌شوند.

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

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

مشکل کرومیوم: ۱۱۹۰۷۳۵

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

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

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

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

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

مشکل کرومیوم: ۱۲۰۸۳۸۹

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

خطاهای TypeError مربوط به CORS در کنسول اکنون به پنل Network و تب Issues لینک شده‌اند.

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

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

مشکل کرومیوم: ۱۲۱۳۳۹۳

فانوس دریایی ۸.۱

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

فانوس دریایی

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

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

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

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

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

نمایش آدرس اینترنتی یادداشت جدید در پنجره مانیفست

اکنون پنجره‌ی Manifest آدرس اینترنتی (URL) یادداشت جدید را نمایش می‌دهد.

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

آدرس اینترنتی یادداشت جدید در پنجره مانیفست

مشکل کرومیوم: ۱۱۸۵۶۷۸

انتخابگرهای تطبیق CSS اصلاح‌شده

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

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

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

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

مشکل کرومیوم: ۱۲۱۹۱۵۳

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

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

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

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

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

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

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

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

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

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

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