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

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

بخش جدید برای ویژگی‌های سفارشی در عناصر > سبک‌ها

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

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

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

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

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

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

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

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

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

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

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

دستور قبلی Delete all overrides گیج‌کننده بود، زیرا فقط overrideهای فعال در جلسه فعلی را که با مشخص شده بودند، حذف می‌کرد. ذخیره شد. آیکون نقطه بنفش

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

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

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

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

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

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

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

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

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

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

ویژگی فضای کاری در پنل منابع (Sources) به طور جدید ساده‌سازی شده است:

  • نامگذاری منسجم . نکته قابل توجه این است که نام بخش Sources > Filesystem به Workspace تغییر یافته است. متون مختلف رابط کاربری در این بخش اکنون واضح‌تر و بدون حشو و زوائد هستند.
  • تنظیمات بهبود یافته . نشانه‌های بهتری برای کشیدن و رها کردن پوشه‌ها یا کلیک روی پیوند برای انتخاب پوشه مشاهده کنید.

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

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

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

تغییر ترتیب پنل‌ها در منابع

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

مشکلات کروم: ۱۴۷۳۷۵۸

هایلایت کردن سینتکس و چاپ زیبا برای انواع اسکریپت‌های بیشتر

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

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

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

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

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

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

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

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

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

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

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

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

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

بهبودهای دسترسی

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

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

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

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

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

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

  • شبکه : آیکون‌های جدید برای انواع منابع محبوب: media ، wasm ، websocket ، manifest ، fetch/xhr ، json ( 1466298 ).
  • رنگ‌ها در بسیاری از عناصر رابط کاربری به رنگ‌های متریال ۳ به‌روزرسانی شده‌اند، به‌ویژه در پنل‌های عناصر و عملکرد ( ۱۴۵۶۶۹۰ ، ۱۴۷۲۲۴۳ ).
  • اکنون بخش «مسائل» ، مشکلات کوکی را در سراسر پیمایش‌ها حفظ می‌کند ( ۱۴۶۶۶۰۱ ).
  • بهبودهای مختلف در بخش برنامه‌های کاربردی > پیش‌بارگذاری ، که مهم‌ترین آن‌ها شبکه‌های قابل مرتب‌سازی و جزئیات اصلاح‌شده‌ی مجموعه قوانین ( ۱۴۱۰۷۰۹ ) هستند.
  • بهبودهای مختلف ویرایشگر دستورات در Protocol monitor ، که مهم‌ترین آن‌ها هشدار در مورد ورودی اشتباه، ویرایش دستور ارسالی، ویرایشگر پارامترهای شیء بدون کلیدهای از پیش تعریف‌شده، پشتیبانی از enumهای تعریف‌نشده توسط ارجاعات، اشیاء بدون ارجاع نوع، فیلتر کردن دستورات بر اساس تطابق زیررشته و موارد دیگر ( 1448050 ) است.
  • نمودار شعله‌ای عملکرد ، در نمودار دایره‌ای ( 1470147 ) دور کل کادر حاشیه‌ای دارد.
  • اکنون منابع (Sources) در CSS با خط تیره به عنوان کاراکترهای کلمه رفتار نمی‌کنند ( 1471354 ).
  • تکمیل خودکار اکنون همیشه کلمات کلیدی CSS را در انتها مرتب می‌کند.
  • فیلترهای RegEx اکنون از فاصله‌ها ( 1346936 ) پشتیبانی می‌کنند.
  • عناصر تشخیص ویژگی پرس و جوی رسانه‌ای ثابت ( 1472693 ).

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

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

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

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

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

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