موارد جدید در DevTools (Chrome 118)

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

بخش جدید برای ویژگی‌های سفارشی در Elements > Styles

اکنون پنل Elements از @property CSS at-rule پشتیبانی می‌کند. این به شما امکان می دهد خصوصیات سفارشی CSS را به طور صریح تعریف کنید و آنها را بدون اجرای هیچ جاوا اسکریپتی در یک شیوه نامه ثبت کنید.

برای بررسی ویژگی‌های سفارشی ثبت‌شده خود، در Elements > Styles ، نشانگر را روی نام دارایی نگه دارید و توصیف‌گرهای آن را در یک راهنمای ابزار ببینید. در راهنمای ابزار، برای مشاهده ملک ثبت شده در قسمت تاشو @property ، روی لینک کلیک کنید.

مسائل Chromium: 1471102 ، 1471103 ، 1471105 .

بهبودهای محلی بیشتر لغو می شود

با ادامه جریان بهبودها در نسخه قبلی ، لغوهای محلی اکنون کارهای زیر را انجام می دهند:

  • در Sources > Page ، وقتی روی یک فایل نقشه‌برداری شده راست کلیک می‌کنید و گزینه Override content را انتخاب می‌کنید، DevTools گفتگویی را نشان می‌دهد که شما را به منبع اصلی می‌برد. محتویات فایل های نگاشت منبع را نمی توان نادیده گرفت.

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

  • پانل شبکه یک ستون جدید دارای لغو و یک has-overrides:[content|headers|yes|no] . برای دیدن ستون Has overrides ، روی سرصفحه جدول کلیک راست کرده و آن را انتخاب کنید.

    فیلتر کردن مقدار 'has-overrides:yes' در ستون 'Has-overrides'.

  • در Sources > Overrides گزینه Delete all overrides منو با گزینه Delete با رفتار دقیق جایگزین شده است.

    قبل و بعد از جایگزینی «حذف همه موارد لغو» با «حذف».

حذف همه موارد لغو قبلی گیج کننده بود زیرا فقط موارد لغو فعال در جلسه فعلی را حذف کرد که با علامت ذخیره شد. نماد نقطه بنفش

گزینه جدید Delete ابتدا یک پیام اخطار نشان می دهد و از شما درخواست تایید می کند، سپس پوشه ای را که کلیک کرده اید با تمام محتویات آن پاک می کند.

برای برگرداندن گزینه قبلی، تیک بزنید چک باکس. "حذف همه موارد لغو موقت" را در آن فعال کنید تنظیمات. تنظیمات > آزمایش‌ها .

مسائل Chromium: 1472952 , 1416338 , 1472580 , 1473681 1475668 .

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

جستجوی قبل و بعد از انجام همه موارد مطابق در هر خط را نشان می دهد.

علاوه بر این، جستجو افزایش سرعت داشت. مقایسه قبل (چپ) و بعد (راست) را در ویدیوی بعدی ببینید.

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

مسائل Chromium: 1468875 ، 1472019 .

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

فضای کاری ساده در پانل منابع

ویژگی فضای کاری در پانل منابع جدید ساده شده است:

  • نامگذاری ثابت مهمتر از همه، پانل Sources > Filesystem به Workspace تغییر نام داد. متون UI مختلف در این بخش اکنون واضح تر و بدون افزونگی هستند.
  • تنظیمات بهبود یافته نشانه های بهتری را برای کشیدن و رها کردن پوشه ها مشاهده کنید یا برای انتخاب پوشه روی پیوندی کلیک کنید.

Sources > Workspace به شما امکان می دهد تغییراتی را که در DevTools ایجاد می کنید مستقیماً با فایل های منبع خود همگام سازی کنید.

تنظیمات و گردش کار جدید را در عمل مشاهده کنید:

مسائل Chromium: 1473771 ، 1473880 ، 1473963 ، 1474686 ، 1474687 .

ترتیب مجدد صفحات در منابع

اکنون می‌توانید با کشیدن و رها کردن پانل‌ها در سمت چپ پانل منابع ، مانند روشی که می‌توانید دیگر پانل‌ها، برگه‌ها و پانل‌ها را دوباره ترتیب دهید، مرتب کنید.

مسائل Chromium: 1473758 .

برجسته سازی نحو و چاپ زیبا برای انواع بیشتر اسکریپت

پانل منابع اکنون می تواند:

  • جاوا اسکریپت درون خطی زیبا با انواع اسکریپت زیر: module ، importmap ، speculationrules .
  • نحو انواع اسکریپت importmap و speculationrules را برجسته کنید، که هر دو دارای JSON هستند.

قبل و بعد از چاپ زیبا و برجسته سازی نحوی نوع اسکریپت قوانین حدس و گمان.

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

شماره Chromium: 1473875 .

شبیه‌سازی ویژگی رسانه ترجیح می‌دهد-شفافیت کاهش یافته

Chrome 118 اکنون از ویژگی رسانه prefers-reduced-transparency پشتیبانی می‌کند. این ویژگی به توسعه‌دهندگان اجازه می‌دهد محتوای وب را با اولویت‌های انتخابی کاربر برای کاهش شفافیت در سیستم‌عامل، مانند تنظیم کاهش شفافیت در macOS، تطبیق دهند.

برای شبیه سازی این ویژگی رسانه، تب Rendering را باز کرده و به سمت پایین اسکرول کنید.

شماره Chromium: 1424879 .

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

پنل Lighthouse اکنون Lighthouse 11 را اجرا می کند. مهم‌تر از همه، این نسخه ناوبری قدیمی را حذف می‌کند و ممیزی‌های دسترسی جدید را اضافه می‌کند و نحوه امتیازدهی دسته دسترس‌پذیری را تغییر می‌دهد.

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

شماره Chromium: 772558 .

بهبود دسترسی

DevTools اکنون از کلیدهای ناوبری بیشتری پشتیبانی می کند:

  • نمای کلی CSS : از فلش های بالا و پایین برای پیمایش بخش ها در نوار کناری سمت چپ استفاده کنید.
  • حافظه : در نوار کناری سمت چپ، روی دکمه ذخیره در کنار عکس‌های فوری با Tab متمرکز شده و Enter را فشار دهید تا پوشه را انتخاب کنید.

علاوه بر این، چندین مشکل اعلامیه صفحه خوان رفع شده است.

مسائل Chromium: 1470401 ، 1471301 ، 1474108 ، 1468631 .

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

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

  • شبکه : نمادهای جدید برای انواع منابع محبوب: media ، wasm ، websocket ، manifest ، fetch/xhr ، json ( 1466298 ).
  • به‌روزرسانی‌های رنگی برای رنگ‌های ماده 3 در بسیاری از عناصر رابط کاربری، به ویژه در پانل‌های عناصر و عملکرد ( 1456690 ، 1472243 ).
  • Issues اکنون مشکلات کوکی را در مسیرهای پیمایش حفظ می کند ( 1466601 ).
  • برنامه های مختلف > بهبودهای بارگیری از قبل ، به ویژه شبکه های قابل مرتب سازی و جزئیات بازنگری شده مجموعه قوانین ( 1410709 ).
  • بهبودهای مختلف ویرایشگر فرمان در مانیتور پروتکل ، به ویژه هشدارها در مورد ورودی اشتباه، ویرایش دستور ارسال شده، ویرایشگر پارامترهای شی بدون کلیدهای از پیش تعریف شده، پشتیبانی از enum های تعریف نشده توسط مراجع، اشیاء بدون مرجع نوع، دستورات فیلتر توسط مطابقت های زیر رشته ای و موارد دیگر. ( 1448050 ).
  • نمودار شعله عملکرد یک مرز در اطراف کادر کل در نمودار دایره ای می گیرد ( 1470147 ).
  • منابع اکنون خط تیره ها را به عنوان کاراکترهای کلمه در CSS در نظر نمی گیرند ( 1471354 ).
  • اکنون تکمیل خودکار همیشه کلمات کلیدی CSS را در پایان مرتب می کند.
  • فیلترهای RegEx اکنون از فضاها پشتیبانی می کنند ( 1346936 ).
  • عناصر شناسایی ویژگی پرس و جو رسانه را ثابت کردند ( 1472693 ).

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

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

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

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

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

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