الميزات الجديدة في DevTools، الإصدار 131 من Chrome

Sofia Emelianova
Sofia Emelianova
GitHub

تصحيح أخطاء CSS باستخدام Gemini

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

التجربة الآن في لوحة العناصر، انقر بزر الماوس الأيمن على أحد العناصر واختَر الاستعانة بالذكاء الاصطناعي أو انقر على الزر المقابل بجانب العنصر. ستفتح "أدوات مطوّري البرامج" لوحة مساعد الذكاء الاصطناعي الجديدة.

خيار القائمة "اسأل الذكاء الاصطناعي" والزر المقابل

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

لوحة المساعدة الجديدة المستندة إلى الذكاء الاصطناعي التي تجيب عن طلب

لمعرفة المزيد حول أفضل طريقة لاستخدام اللوحة الجديدة، يمكنك الاطّلاع على 5 ميزات رائعة يمكنك الاستفادة منها في "ميزة الذكاء الاصطناعي" في "أدوات مطوّري البرامج" والاطّلاع على ميزة الذكاء الاصطناعي لتصميم الأنماط.

يتطلّع فريق DevTools إلى تلقّي ملاحظاتك. يمكنك ترك ملاحظاتك في crbug.com/364805393.

التحكّم في ميزات الذكاء الاصطناعي في علامة تبويب مخصّصة للإعدادات

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

علامة التبويب الجديدة "ابتكارات الذكاء الاصطناعي"

لمزيد من المعلومات، يُرجى الاطّلاع على الإعدادات > ابتكارات الذكاء الاصطناعي.

"إحصاءات وحدة التحكّم" على بُعد نقرة واحدة

لم تعُد "أدوات مطوّري البرامج" تتطلّب تفعيل مزامنة الإعدادات لاستخدام ميزات الذكاء الاصطناعي. وبالتالي، أصبحت إحصاءات Console التي تم إصدارها سابقًا، بالإضافة إلى المساعدة المستنِدة إلى الذكاء الاصطناعي في تصميم الأنماط، متاحة بنقرة واحدة.

إذا كنت مسجّلاً الدخول إلى Chrome، يمكنك تفعيل هذه الميزات من خلال الإعدادات > ابتكارات الذكاء الاصطناعي.

تحسينات على "لوحة الأداء"

يتضمّن هذا الإصدار عددًا من التحسينات على لوحة الأداء.

إضافة تعليقات توضيحية إلى نتائج الأداء ومشاركتها

تحصل لوحة الأداء على علامة التبويب الجديدة التعليقات التوضيحية في شريط جانبي قابل للتوسيع على اليمين يسهّل عملية إنشاء ملاحظات لاستكشاف عمليات التتبُّع والتعاون عند مشاركة نتائج الأداء.

يمكنك الآن تصنيف الأحداث وربطها بالأسهم وتمييز النطاقات الزمنية مباشرةً في التتبُّع. يمكنك بعد ذلك حفظ التتبُّعات المشروحة ومشاركتها وتحميلها مرة أخرى إلى لوحة الأداء.

علامة التبويب الجديدة الخاصة بالتعليقات التوضيحية في الشريط الجانبي على اليمين والحدث والنطاق والاتصال الذي تمت إضافة تعليق توضيحي إليه

الحصول على إحصاءات الأداء مباشرةً في لوحة "الأداء"

يمكنك الآن الاطّلاع على إحصاءات قابلة للتنفيذ في علامة التبويب الجديدة الإحصاءات في الشريط الجانبي الأيمن من لوحة الأداء. يتم تجميع الإحصاءات من تقرير Lighthouse ولوحة إحصاءات الأداء التي سيتم إيقافها نهائيًا.

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

يتطلّع فريق "أدوات مطوّري البرامج" إلى تلقّي ملاحظاتك حول فائدة الإحصاءات وطرق تحسينها وتجربتك في استخدامها مع أدوات أخرى، مثل إحصاءات PageSpeed وLighthouse. يمكنك إرسال ملاحظاتك على crbug.com/371170842.

رصد متغيّرات التصميم المفرطة بسهولة أكبر

مظهر جديد لمسار عمليات تغيير التنسيق يتم الآن وضع علامة على تغييرات التنسيق باستخدام ماسات أرجوانية (أكثر وضوحًا)، ويتم تجميعها في مجموعات استنادًا إلى مدى قربها من بعضها على المخطط الزمني. يتم عرض جدول منظَّم في علامة التبويب الملخّص يتضمّن التوقيتات والنتائج والعناصر والجناة المحتملين لكلّ من التغييرات ومجموعاتها.

صورة لما قبل وما بعد تعديل مسار "تغيّرات التنسيق" وإعادة تنظيم علامة التبويب "الملخّص"

بالإضافة إلى ذلك، يتضمّن عرض المقاييس المباشرة سجلّ عمليات تغيير التنسيق مع النتائج والعناصر بجانب علامة التبويب التفاعلات.

قبل إضافة سجلّ "عمليات تغيير التنسيق" إلى عرض المقاييس المباشرة وبعدها

مشكلة في Chromium: 369100729.

تحديد الصور المتحركة غير المركّبة

يعرض لك مسار الصور المتحركة الآن معلومات مفيدة حول الصور المتحركة غير المركّبة:

  • تسمّي الصور المتحركة وفقًا لخاصية CSS المقابلة، إن وجدت.
  • يضع علامات مثلثات حمراء على الصور المتحركة غير المركّبة في المقطع الصوتي.
  • تعرض علامة التبويب الملخّص سبب تعذُّر إنشاء الصورة المركّبة.

الصور المتحركة لعمليات التسمية السابقة واللاحقة في المقطع الصوتي، ووضع علامة على الصور غير المدمجة، وعرض سبب الخطأ

لمزيد من المعلومات، يُرجى الاطّلاع على الالتزام بالسمات الخاصة ببرنامج Compositor فقط وإدارة عدد الطبقات.

مشكلة في Chromium: 41006273.

نقل مستوى التزامن في الجهاز إلى "أدوات الاستشعار"

تم نقل الإعداد التزامن مع الأجهزة من لوحة الأداء إلى مكان أكثر ملاءمة، وهو لوحة أدوات الاستشعار.

صورة قبل وبعد نقل إعداد "التزامن على مستوى الأجهزة" إلى لوحة "أدوات الاستشعار"

مشكلة في Chromium: 371463665.

تجاهل النصوص البرمجية المخفية الهوية والتركيز على الرمز في عمليات تتبُّع تسلسل استدعاء الدوال البرمجية

يمكن الآن لعمليات تتبُّع تسلسل استدعاء الدوال البرمجية في وحدة التحكّم رصد الإطارات التي تأتي من الملفات المدرَجة في قائمة التجاهل وتجاهلها وتصغيرها وتظليلها (في حال توسيعها). في السابق، لم يكن يتم عرض اسم الدالة باللون الرمادي في التتبُّع الموسّع.

يمكنك أيضًا تفعيل الجديدة الإعدادات > قائمة التجاهل > البرامج النصية المجهولة المصدر من eval أو وحدة التحكّم لضبط DevTools على تجاهل البرامج النصية المجهولة المصدر التي لا تتضمّن عنوان URL للمصدر.

في ما يلي مثال على قائمة التجاهل قبل تحسينها وبعده في تتبُّع تسلسل استدعاء الدوال البرمجية.

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

مشاكل Chromium: 40279542 و40945570 و345248263

"العناصر" > "الأنماط": إتاحة أوضاع الكتابة sideways-* لتراكبات الشبكة والكلمات الرئيسية على مستوى CSS

تتيح علامة التبويب العناصر > الأنماط الآن ما يلي:

مشاكل Chromium: 40280717 و40706051 و40501131

عمليات تدقيق Lighthouse للصفحات غير المتوفّرة عبر بروتوكول HTTP في وضعَي الفترة الزمنية واللقطة

يمكن أن ينشئ Lighthouse الآن تقارير للصفحات التي لا تستخدم HTTP في وضعَي "المدة الزمنية" و"اللقطة".

في ما يلي مثال على ذلك قبل تفعيل التدقيق وبعده لصفحة غير HTTP في وضعَي الفترة الزمنية واللقطة.

تسهيل الاستخدام

يتضمّن هذا الإصدار تحسينات تسهيل الاستخدام التالية:

  • في المصادر > المحرّر، يمكن الآن إغلاق علامات التبويب التي تحتوي على ملفات مفتوحة من خلال التركيز على الزر X والضغط على Enter أو المسافة.
  • في الأداء، يمكنك الآن اختيار إدخال في التتبُّع والضغط على مفتاح المسافة لفتح قائمة السياق.
  • في قسم الأداء، يمكن الوصول إلى علامة التبويب الإحصاءات في الشريط الجانبي على يمين الصفحة باستخدام لوحة المفاتيح، ويمكن التنقّل بين العناصر باستخدام مفتاح Tab.

مشكلة في Chromium: 372411090.

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

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

  • تتم الآن مزامنة إعدادات التقييد بشكل صحيح بين لوحتَي الأداء والشبكة (370332090).
  • يتضمّن الآن التطبيق > الخدمات التي تعمل في الخلفية > عمليات التحميل التخمينية > القواعد زر {} "طباعة جميلة" مشابهًا لما هو متوفّر في المصادر > المحرّر (40279147).
  • التعابير الحية: يؤدي الضغط على Tab بعد اختيار أحد خيارات الإكمال التلقائي إلى الخروج من حقل التعديل بدلاً من ترك مسافة بادئة في النص (349939551).
  • العناصر > الأنماط: تتوافق anchor() وanchor-size() مع بنية جديدة يمكنك من خلالها إعادة ترتيب الوسيطات وحذف اتجاه anchor-size() (343516786). بالإضافة إلى ذلك، تم إصلاح مشكلة عرض المحتوى الاحتياطي (365802559).
  • الشبكة: تم إصلاح معاينات GraphQL (369931288).
  • الأداء: تعرض الآن التقارير تقدّمًا تدريجيًا في تحميل عمليات التتبُّع ومعالجتها.
  • WebAuthn: يتم الآن تعديل بيانات الاعتماد ديناميكيًا باستخدام طرق signal* (368467199).
  • WebAssembly: يعرض الآن تحذير في وحدة التحكّم لإعلامك في حال توفّر رموز تصحيح أخطاء متعدّدة لوحدة WebAssembly، ويحدّد الرمز المستخدَم (40879198، 369515221).
  • تتم إزالة طبقة "مؤشرات أداء الويب الأساسية" المركّبة من علامة التبويب العرض 328487897.
  • لم تعُد الميزات المستندة إلى الذكاء الاصطناعي التوليدي تتطلّب مزامنة إعدادات Chrome.

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

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

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

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

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

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