موارد جدید در 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 برای شروع استفاده کنید. یک دستور ضبط جدید ایجاد کنید.

شماره کرومیوم: 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 استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59