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

Jecelyn Yeen

ميزة المعاينة: لوحة "إحصاءات الأداء" الجديدة

استخدِم لوحة إحصاءات الأداء للحصول على إحصاءات قابلة للاستخدام ومستندة إلى حالات الاستخدام حول أداء موقعك الإلكتروني.

افتح اللوحة وابدأ تسجيلًا جديدًا استنادًا إلى حالة الاستخدام. على سبيل المثال، لنقِس سرعة تحميل صفحة العرض التوضيحي هذه.

لوحة "إحصاءات الأداء" الجديدة

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

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

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

مشكلة في Chromium: 1270700

اختصارات جديدة لمحاكاة المظهرَين الفاتح والداكن

يمكنك الآن محاكاة التصميمين الفاتح والداكن بشكل أسرع (ميزة prefers-color-scheme لوسائط صفحات الأنماط المتتالية (CSS)) باستخدام الاختصارات الجديدة في لوحة الأنماط.

في السابق، كان يتطلّب محاكاة السمات في علامة التبويب العرض اتّخاذ المزيد من الخطوات.

اختصارات جديدة لمحاكاة المظهرَين الفاتح والداكن

مشكلة في Chromium: 1314299

تحسين الأمان في علامة التبويب "معاينة الشبكة"

تطبّق "أدوات مطوّلي البرامج" الآن "سياسة أمان المحتوى" (CSP) في علامة التبويب معاينة ضمن لوحة الشبكة.

على سبيل المثال، تعرض لقطة الشاشة الأولى صفحة تحتوي على محتوى مختلط. يتم تحميل الصفحة عبر اتصال HTTPS آمن، ولكن يتم تحميل ورقة الأنماط عبر اتصال HTTP غير آمن.

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

تحسين الأمان في علامة التبويب "معاينة الشبكة"

مشكلة في Chromium: 833147

إعادة التحميل المحسّنة عند نقطة الإيقاف

تنهي أداة تصحيح الأخطاء الآن تنفيذ النص البرمجي عند إعادة التحميل عند نقطة توقّف.

على سبيل المثال، كان النص البرمجي يدخل في حلقة لا نهائية سابقًا عند الضبط وإعادة التحميل عند نقطة الإيقاف ReactDOM في العرض التوضيحي لتطبيق React هذا. تعطّلت لوحة المصادر بسبب التكرار اللانهائي.

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

إعادة التحميل المحسّنة عند نقطة الإيقاف

مشاكل Chromium: 1014415 و1004038 و1112863 و1134899

تحديثات Console

التعامل مع أخطاء تنفيذ النصوص البرمجية في "وحدة التحكّم"

تؤدي الأخطاء التي تحدث أثناء تقييم النص البرمجي في "وحدة التحكّم" الآن إلى إنشاء أحداث أخطاء مناسبة تؤدي إلى تشغيل معالج window.onerror ويتم إرسالها كأحداث "error" على عنصر النافذة.

التعامل مع أخطاء تنفيذ النصوص البرمجية في "وحدة التحكّم"

مشكلة في Chromium: 1295750

تأكيد التعبير المباشر باستخدام مفتاح Enter

بعد الانتهاء من كتابة تعبير مباشر، يمكنك النقر على Enter لتأكيده. في السابق، كان الضغط على مفتاح Enter يؤدي إلى إضافة أسطر جديدة. وهذا لا يتوافق مع الأجزاء الأخرى من "أدوات مطوّري البرامج".

لإضافة سطر جديد في أداة تعديل التعبير المباشر، استخدِم Shift + Enter بدلاً من ذلك.

تأكيد التعبير المباشر باستخدام مفتاح Enter

مشكلة في Chromium: 1260744

إلغاء تسجيل مسار المستخدم في البداية

يمكنك إلغاء التسجيل أثناء بدء تسجيل مسار المستخدم. في السابق، لم يكن هناك خيار لإلغاء التسجيل.

إلغاء تسجيل مسار المستخدم في البداية

مشكلة في Chromium: 1257499

عرض العناصر الزائفة المميزة الموروثة في لوحة "الأنماط"

يمكنك عرض عناصر highlight الزائفة الموروثة (مثل ::selection و::spelling-error و::grammar-error و::highlight) في لوحة الأنماط. في السابق، لم تكن هذه القواعد معروضة.

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

عرض العناصر الزائفة المميزة الموروثة في لوحة "الأنماط"

مشكلة في Chromium: 1024156

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

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

  • تعرض لوحة الخصائص الآن خصائص الوصول مع قيمة تلقائية. تم إخفاؤه عن طريق الخطأ في السابق. (1309087)
  • يعرض جزء الأنماط الآن قواعد @support التي تم تجاهلها بشكل صحيح على أنّها مشطوبة. في السابق، لم تكن القواعد مشطوبة. (1298025)
  • تم إصلاح منطق تنسيق CSS في لوحة المصادر الذي كان يتسبّب في ظهور أسطر فارغة متعددة عند تعديل CSS. (1309588)
  • وضع حد أقصى يبلغ 100 على الخيار التوسيع بشكل متكرر لأحد العناصر في وحدة التحكّم لكي لا يستمر إلى الأبد بالنسبة إلى العناصر الدائرية (1272450)

[تجريبية] نسخ تغييرات صفحات CSS

من خلال هذه التجربة، ستُبرز لوحة الأنماط تغييرات CSS باللون الأخضر. يمكنك تمرير مؤشر الماوس فوق القواعد التي تم تغييرها والنقر على زر النسخ الجديد بجانبها لنسخها.

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

تمت إضافة زر نسخ جديد إلى علامة التبويب التغييرات أيضًا لمساعدتك في تتبُّع تغييرات CSS ونسخها بسهولة.

نسخ تغييرات صفحات CSS

مشكلة في Chromium: 1268754

[تجريبية] اختيار لون خارج المتصفّح

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

في لوحة الأنماط، انقر على أي معاينة للألوان لفتح أداة اختيار الألوان. استخدِم أداة اختيار الألوان لاختيار لون من أي مكان.

اختيار لون خارج المتصفّح

مشكلة في Chromium: 1245191

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

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

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

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

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

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