الميزات الجديدة في أدوات مطوّري البرامج (Chrome 111)

Jecelyn Yeen

تصحيح أخطاء ألوان النطاق العالي الديناميكية باستخدام جزء "الأنماط"

ستتوفّر قريبًا على الويب أنواع ومساحات ألوان CSS جديدة. من المثير أيضًا أنّ "أدوات مطوّري البرامج" قدّمت أدوات جديدة لمساعدة المطوّرين في إنشاء ألوان عالية الدقة وتحويلها وتصحيح أخطائها.

تتيح لوحة الأنماط الآن 12 مساحة ألوان جديدة و7 نطاقات ألوان جديدة كما هو موضّح في مواصفات مستوى 4 من ألوان CSS. يمكنك الاطّلاع على دليل ألوان CSS العالية الدقة للحصول على فهم شامل لخيارات الألوان المتاحة على الويب.

في ما يلي أمثلة على تعريفات ألوان CSS مع color() وlch() وoklab() وcolor-mix(). أمثلة على تعريفات ألوان CSS

عند استخدام الدالة color-mix()، يمكنك عرض الناتج النهائي للون في اللوحة محسوب. نتيجة color-mix في جزء "محسوبة"

تتوافق أداة اختيار الألوان مع جميع مساحات الألوان الجديدة وتتضمّن المزيد من الميزات. على سبيل المثال، انقر على عيّنة اللون color(display-p3 1 0 1). تمت أيضًا إضافة خط حدود نطاق الألوان، ما يميّز بين نطاقَي الألوان sRGB وdisplay-p3 لتسهيل فهم نطاق الألوان الذي اخترته. خط حدود نطاق الألوان

تتيح لك "أدوات مطوّري البرامج" تحويل الألوان بين تنسيقات الألوان المختلفة. استخدِم رمز تغيير تنسيق الألوان للوصول إلى النافذة المنبثقة الخاصة بالتحويل، أو استخدِم ببساطة Shift + انقر على نموذج ألوان في لوحة الأنماط. تحويل الألوان بين تنسيقات الألوان

عند التحويل، من المهم معرفة ما إذا تم اقتصاص التحويل ليناسب المساحة. يضع DevTools رمز تحذير بجانب اللون المحوّل لتنبيهك بشأن هذا الاقتصاص. تحذير بشأن اقتطاع الألوان

بالإضافة إلى ذلك، يمكنك اختيار الألوان من شاشتك باستخدام الاختصار الجديد. اضغط على المفتاح "c" لتفعيل أداة "قطّارة الألوان"، ثم اضغط على Escape لإيقافها. لا تأخذ أداة اختيار الألوان عينات إلا من مساحة الألوان sRGB. على سبيل المثال، إذا حاولت أخذ عيّنة من اللون color(display-p3 1 0 1)، الذي يقع خارج مساحة ألوان sRGB، ستقص أداة "قطّارة الألوان" اللون إلى أقرب لون في مساحة sRGB، وهو اللون الأرجواني color(display-p3 0.92 0.2 0.97).

فعِّل أداة اختيار الألوان.

أخيرًا، تم إيقاف إعداد تنسيق الألوان نهائيًا لإتاحة مساحة لتنسيق الألوان الجديد عالي الدقة. إيقاف إعداد تنسيق الألوان نهائيًا

مشاكل Chromium: 1073895 و1395782 و1408777 و1395782 و1392717 و1382409 و1392054

تحسين تجربة المستخدم لنقاط الإيقاف

تتيح لك لوحة نقاط الإيقاف المعاد تصميمها الوصول سريعًا إلى الميزات الشائعة الاستخدام، وخاصةً إيقاف نقاط الإيقاف وتعديلها وإزالتها.

في ما يلي بعض النقاط البارزة: - تم نقل خياري إيقاف الاستثناء مؤقتًا إلى اللوحة نقاط التوقف وتمت إضافة تصنيف نصي إليهما لتوضيح الغرض منهما بشكل أفضل. خيارات الإيقاف المؤقت عند حدوث استثناء

  • يتم تجميع نقاط التوقّف حسب الملف، ويتم ترتيبها حسب أرقام الأسطر أو الأعمدة، ويمكن تصغيرها. تجميع نقاط الإيقاف حسب الملف

  • تتوفّر خيارات جديدة لإيقاف نقاط الإيقاف وإزالتها وتعديلها عند تمرير مؤشر الماوس فوق نقطة إيقاف أو ملف. خيارات جديدة لإيقاف نقاط الإيقاف

  • انقر على زر تعديل نقطة التوقّف لفتح محرِّر نقاط التوقّف. من هنا، يمكنك إدخال شرط نقطة التوقّف أو التبديل إلى نقطة تسجيل. مربّع حوار تعديل نقطة الإيقاف

اطّلِع على مرجع تصحيح أخطاء JavaScript لمعرفة كيفية تصحيح الأخطاء باستخدام "أدوات مطوّري البرامج".

مشاكل Chromium: 1407586 و1402891 و1402893

اختصارات "المسجّل" القابلة للتخصيص

استخدِم اختصارات لوحة المفاتيح لتسجيل عمليات المستخدم وإعادة تشغيلها بشكل أسرع.

تقدّم أداة المسجّل بعض اختصارات لوحة المفاتيح الملائمة لتسجيل تدفّقات المستخدمين وإعادة تشغيلها بشكل أسرع.

ألا تتذكر الاختصارات؟ لا مشكلة، انقر على الزر ? لعرض جميع الاختصارات في أي وقت. اختصارات "المسجّلة الذكية"

يمكنك حتى تخصيص هذه الاختصارات من خلال قائمة الإعدادات. تخصيص اختصارات "المسجّلة"

إذا كنت تعمل في لوحة مختلفة وأردت بدء تسجيل تدفّق مستخدم، استخدِم الأمر إنشاء تسجيل جديد من قائمة الأوامر في "أدوات مطوّري البرامج" للبدء. أنشئ أمر تسجيل جديدًا.

مشكلة في Chromium: 1339771

تمييز أفضل للبنية في Angular

حسّنت DevTools ميزة تمييز بناء الجملة في نماذج Angular HTML، ما يسهّل عليك قراءة الرمز البرمجي والتعرّف على بنيته. تمييز البنية لنماذج Angular HTML

مشاكل Chromium: 1385374 و1385678

إعادة تنظيم ذاكرات التخزين المؤقت في "لوحة التطبيق"

يمكنك الآن العثور على لوحة التخزين المؤقت في قسم مساحة التخزين ضمن لوحة التطبيق، بينما تم نقل لوحة التخزين المؤقت للصفحات إلى قسم الخدمات التي تعمل في الخلفية. ذاكرات التخزين المؤقت في لوحة التطبيق

مشكلة في Chromium: 1407166

لمحات متنوّعة

في ما يلي بعض الإصلاحات الجديرة بالذكر في هذا الإصدار:

  • تم تعديل "أدوات مطوّري البرامج" لتتوافق مع الإعداد إيقاف ذاكرة التخزين المؤقت عند تحميل خرائط المصادر. (1407084)
  • تركّز لوحة العناصر الآن تلقائيًا على العنصر الأول المطابق في نتائج البحث. (1381853)
  • إصلاحات متنوّعة لتحسين موثوقية خريطة المصدر ونقاط التوقّف (508270 و1403362 و1403432 و1396298 و1395337 و1405134)
  • لتسهيل عملية تصحيح الأخطاء، تتيح "أدوات مطوّلي البرامج" الآن تقييم التعبيرات باستخدام عناصر الفئة الخاصة. (1381806) تقييم التعبيرات باستخدام عناصر الصف الخاص

تنزيل قنوات المعاينة

ننصحك باستخدام Chrome Canary أو قناة مطوّري البرامج أو القناة التجريبية كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

التواصل مع فريق Chrome DevTools

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر متعلّق بـ "أدوات مطوّري البرامج".

الميزات الجديدة في "أدوات مطوّري البرامج"

قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في "أدوات مطوّري البرامج"