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

جسلین ین

اشکال زدایی رنگ HD با صفحه Styles

انواع رنگ ها و فضاهای جدید CSS به وب می آیند! به همان اندازه هیجان انگیز است که DevTools ابزارهای جدیدی را برای کمک به توسعه دهندگان برای ایجاد، تبدیل و اشکال زدایی رنگ با وضوح بالا معرفی کرد.

صفحه Styles اکنون از 12 فضای رنگی جدید و 7 طیف جدید همانطور که در مشخصات CSS Color Level 4 ذکر شده است، پشتیبانی می کند. برای درک جامع از گزینه های رنگ موجود در وب، به راهنمای رنگ CSS با وضوح بالا مراجعه کنید.

در اینجا نمونه هایی از تعاریف رنگ CSS با color() ، lch() ، oklab() و color-mix() آورده شده است. نمونه هایی از تعاریف رنگ CSS.

هنگام استفاده از تابع color-mix() می توانید خروجی رنگ نهایی را در صفحه Computed مشاهده کنید. نتیجه ترکیب رنگ در صفحه Computed.

انتخابگر رنگ از تمام فضاهای رنگی جدید با ویژگی های بیشتر پشتیبانی می کند. برای مثال، روی نمونه color(display-p3 1 0 1) کلیک کنید. یک خط مرزی نیز اضافه شده است که برای درک واضح تری از وسعت رنگ انتخابی شما، بین گستره های sRGB و display-p3 تمایز قائل می شود. یک خط مرزی وسعت.

DevTools از تبدیل رنگ ها بین فرمت های رنگی پشتیبانی می کند. از نماد Change Color Format برای دسترسی به پنجره تبدیل استفاده کنید، یا به سادگی از Shift + کلیک بر روی یک نمونه رنگ در صفحه Styles استفاده کنید. تبدیل رنگ ها بین فرمت های رنگی

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

علاوه بر این، می توانید با میانبر جدید، رنگ ها را از روی صفحه نمایش خود انتخاب کنید. برای فعال کردن قطره چکان C را فشار دهید و Escape برای غیرفعال کردن آن فشار دهید. ابزار قطره چکان فقط رنگ ها را در فضای رنگی sRGB نمونه برداری می کند. برای مثال، اگر سعی کنید color(display-p3 1 0 1) که خارج از فضای رنگی sRGB است، نمونه برداری کنید، ابزار قطره چکان رنگ را به نزدیکترین رنگ در فضای sRGB که color(display-p3 0.92 0.2 0.97) .

قطره چشم را فعال کنید.

در نهایت، تنظیم فرمت Color اکنون منسوخ شده است تا فضا برای فرمت رنگی جدید HD باز شود. منسوخ شدن تنظیم قالب رنگ.

مسائل Chromium: 1073895 , 1395782 , 1408777 , 1395782 , 1392717 , 1382409 , 1392054

UX نقطه شکست پیشرفته

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

اینها برخی از نکات برجسته هستند: - هر دو گزینه استثنای مکث به قسمت Breakpoints منتقل شدند و با متن برچسب گذاری شدند تا واضح تر شود. توقف موقت گزینه های استثنا

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

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

  • روی دکمه ویرایش نقطه شکست کلیک کنید تا ویرایشگر نقطه شکست باز شود. از اینجا می توانید شرط نقطه شکست را وارد کنید یا به یک logpoint تغییر دهید. گفتگوی ویرایش نقطه انفصال.

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

مشکلات Chromium: 1407586 ، 1402891 ، 1402893

میانبرهای ضبط کننده قابل تنظیم

از میانبرهای صفحه کلید برای ضبط و پخش مجدد جریان های کاربر سریعتر استفاده کنید.

Recorder چند میانبر صفحه کلید راحت را برای ضبط سریع تر و پخش مجدد جریان های کاربر معرفی می کند.

میانبرها را به خاطر نمی آورید؟ مشکلی نیست، روی ? دکمه برای مشاهده تمام میانبرها در هر زمان. میانبرهای Recorder

حتی می توانید این میانبرها را از طریق منوی تنظیمات شخصی سازی کنید. سفارشی کردن میانبرهای ضبط

اگر در پانل دیگری کار می‌کنید و می‌خواهید ضبط جریان کاربر را شروع کنید، از دستور Create a new recording از منوی فرمان در DevTools برای شروع استفاده کنید. یک دستور ضبط جدید ایجاد کنید.

موضوع Chromium: 1339771

هایلایت سینتکس بهتر برای Angular

DevTools برجسته‌سازی نحو را برای قالب‌های Angular HTML بهبود بخشید و خواندن کد و تشخیص ساختار آن را برای شما آسان‌تر کرد. برجسته سازی نحو برای قالب های HTML Angular.

مسائل Chromium: 1385374 ، 1385678

حافظه پنهان را در پانل برنامه سازماندهی مجدد کنید

اکنون می‌توانید بخش ذخیره‌سازی حافظه پنهان را در بخش ذخیره‌سازی پنل برنامه‌ها پیدا کنید، در حالی که پنجره کش Back/Forward به بخش خدمات پس‌زمینه منتقل شده است. حافظه پنهان در پنل برنامه.

شماره Chromium: 1407166

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

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

  • DevTools به‌روزرسانی شده است تا هنگام بارگیری نقشه‌های منبع، به تنظیمات غیرفعال کردن حافظه پنهان احترام بگذارد. ( 1407084 )
  • اکنون پانل عناصر فوراً بر روی اولین عنصر منطبق در نتایج جستجو فوکوس می کند. ( 1381853 )
  • اصلاحات مختلف برای بهبود قابلیت اطمینان نقشه منبع و نقاط شکست. ( 508270 , 1403362 , 1403432 , 1396298 , 1395337 , 1405134 )
  • برای تسهیل بهتر اشکال زدایی، DevTools اکنون از ارزیابی عبارات با اعضای کلاس خصوصی پشتیبانی می کند. ( 1381806 ) ارزیابی عبارات با اعضای کلاس خصوصی.

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

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

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

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

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

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