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

Jecelyn Yeen

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

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

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

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

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

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

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

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

بالإضافة إلى ذلك، يمكنك اختيار ألوان من شاشتك باستخدام الاختصار الجديد. اضغط على "ج" لتفعيل قطارة العين واضغط على 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

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

مشاكل Chromium: 1385374، 1385678

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

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

مشكلة Chromium: 1407166

لحظات مميّزة متنوعة

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

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

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

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

التواصل مع فريق "أدوات مطوّري البرامج في Chrome"

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

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

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