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

Jecelyn Yeen

اشکال‌زدایی رنگ HD با استفاده از پنل Styles

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

پنجره‌ی استایل‌ها اکنون از ۱۲ فضای رنگی جدید و ۷ طیف رنگی جدید، همانطور که در مشخصات رنگ سطح ۴ CSS مشخص شده است، پشتیبانی می‌کند. برای درک جامع از گزینه‌های رنگی موجود در وب، به راهنمای رنگ CSS با وضوح بالا مراجعه کنید.

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

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

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

DevTools از تبدیل رنگ‌ها بین فرمت‌های رنگی پشتیبانی می‌کند. برای دسترسی به پنجره‌ی تبدیل، از آیکون «تغییر فرمت رنگ» استفاده کنید، یا به سادگی با نگه داشتن Shift و کلیک روی یک نمونه رنگ در پنل Styles ، این کار را انجام دهید.

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

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

در نهایت، تنظیمات فرمت رنگ (Color format) اکنون منسوخ شده است تا جا برای فرمت رنگ جدید HD باز شود.

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

تجربه کاربری بهبود یافته در نقاط شکست

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

برخی از نکات برجسته عبارتند از: - هر دو گزینه‌ی مربوط به استثنائات مکث به پنجره‌ی نقاط شکست منتقل شده و با متن برچسب‌گذاری شده‌اند تا واضح‌تر باشند.

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

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

• برای باز کردن ویرایشگر نقطه شکست، روی دکمه ویرایش نقطه شکست کلیک کنید. از اینجا می‌توانید شرط نقطه شکست را وارد کنید یا به یک نقطه ثبت تغییر دهید.

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

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

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

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

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

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

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

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

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

هایلایت بهتر سینتکس برای انگولار

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

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

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

اکنون می‌توانید پنل Cache Storage را در بخش Storage از پنل Application پیدا کنید، در حالی که پنل Back/forward cache به بخش Background Services منتقل شده است.

مشکل کرومیوم: ۱۴۰۷۱۶۶

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

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

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

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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