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

إعادة تشغيل الفيديو خطوة بخطوة في تطبيق "المسجّلة الذكية"

يمكنك الآن تحديد نقطة توقّف وإعادة تشغيل مسار المستخدم خطوة بخطوة في لوحة المسجّلة الذكية.

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

باستخدام هذه الميزة، يمكنك تصور تدفق المستخدم وتصحيحه بشكل كامل بسهولة.

يُرجى الاطّلاع على مرجع ميزات المسجّلة الذكية للحصول على مزيد من المعلومات.

إعادة تشغيل الفيديو خطوة بخطوة في تطبيق "المسجّلة الذكية"

مشكلة Chromium: 1257499

دعم الحدث عند تمرير الماوس فوقه في لوحة "المسجّلة الذكية"

تتيح المسجّلة الذكية الآن إضافة خطوة تمرير الماوس (التمرير) يدويًا في التسجيل.

يعرض هذا العرض التوضيحي قائمة منبثقة عند التمرير. حاول تسجيل تدفق المستخدم والنقر فوق عنصر قائمة.

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

تمرير مؤشر الماوس فوق الحدث في "المسجّلة الذكية"

مشكلة Chromium: 1257499

سرعة عرض أكبر محتوى مرئي (LCP) في لوحة "إحصاءات الأداء"

إنّ LCP هو مقياس مهم يتمحور حول المستخدم لقياس سرعة التحميل التي يتم رصدها. يمكنك الآن معرفة المسارات المهمة والأسباب الجذرية لـ سرعة عرض أكبر محتوى مرئي (LCP).

في تسجيل أداء، انقر على شارة "سرعة عرض أكبر محتوى مرئي" (LCP) في المخطط الزمني. في جزء التفاصيل، يمكنك الاطّلاع على نتيجة مقياس LCP والتعرّف على كيفية إصلاح الموارد التي تؤدي إلى إبطاء سرعة LCP والاطّلاع على المسار الحرج لمورد مقياس LCP.

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

مقياس LCP في لوحة "إحصاءات الأداء"

مشكلة Chromium: 1326481

تحديد وميض النص (FOIT وFOUT) كأسباب أساسية محتملة لمتغيّرات التصميم

ترصد لوحة إحصاءات الأداء الآن وميض النص غير المرئي (FOIT) ووميض النص غير ذي النمط (FOUT) كأسباب أساسية محتملة لمتغيّرات التصميم.

للاطّلاع على الأسباب الأساسية المحتمَلة لمتغيّرات التصميم، انقر على لقطة شاشة في مسار متغيّرات التصميم.

راجِع تحسين تحميل وعرض WebFont للتعرّف على التقنية لمنع متغيّرات التصميم.

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

مشاكل Chromium: 1334628 و1328873

معالِجات البروتوكولات في جزء البيان

يمكنك الآن استخدام "أدوات مطوري البرامج" لاختبار تسجيل معالج بروتوكول عنوان URL في تطبيقات الويب التقدّمية (PWA).

يسمح تسجيل معالج بروتوكول عناوين URL لتطبيقات الويب التقدّمية (PWA) المثبّتة بمعالجة الروابط التي تستخدم بروتوكولاً محدّدًا (مثل magnet وweb+example) للحصول على تجربة أكثر تكاملاً.

انتقل إلى قسم معالِجات البروتوكولات عبر لوحة التطبيق > البيان. يمكنك الاطّلاع على جميع البروتوكولات المتاحة واختبارها هنا.

على سبيل المثال، عليك تثبيت تطبيق الويب التقدّمي (PWA) هذا التجريبي. في قسم معالِجات البروتوكولات، اكتب "americano" وانقر على اختبار البروتوكول لفتح صفحة القهوة في تطبيق الويب التقدّمي (PWA).

معالِجات البروتوكولات في جزء البيان

مشاكل Chromium: 1300613

شارة الطبقة العلوية في لوحة "العناصر"

استخدِم شارة الطبقة العلوية لفهم مفهوم الطبقة العليا، وتوضيح كيفية تغيُّر محتوى الطبقة العلوية.

أصبح العنصر <dialog> ثابتًا مؤخرًا في جميع المتصفّحات. عند فتح مربّع حوار، يتم وضعه في طبقة علوية. ويتم عرض محتوى المستوى الأعلى فوق كل المحتوى الآخر.

في هذا العرض التوضيحي، انقر على فتح مربّع الحوار.

للمساعدة في عرض عناصر الطبقة العلوية، تضيف "أدوات مطوّري البرامج" حاوية من طبقة علوية (#top-layer) إلى شجرة نموذج العناصر في المستند. ويتوفّر بعد علامة الإغلاق </html>.

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

بجانب عنصر شجرة الطبقة العليا (على سبيل المثال، عنصر مربع الحوار)، انقر على شارة الطبقة العليا للانتقال إلى حاوية الطبقة العلوية.

شارة الطبقة العلوية في لوحة &quot;العناصر&quot;

مشكلة Chromium: 1313690

إرفاق معلومات تصحيح أخطاء Wasm في وقت التشغيل

يمكنك الآن إرفاق معلومات تصحيح أخطاء DWARF في Wasm أثناء وقت التشغيل. في السابق، كانت لوحة المصادر تتيح فقط إرفاق خرائط المصدر بملفات JavaScript وWasm.

افتح ملف Wasm في لوحة المصادر. انقر بزر الماوس الأيمن في المحرِّر واختَر إضافة معلومات تصحيح الأخطاء DWARF... لإرفاق معلومات تصحيح الأخطاء عند الطلب.

ALT_TEXT_HERE

مشكلة Chromium: 1341255

دعم التعديل المباشر أثناء تصحيح الأخطاء

يمكنك الآن تعديل أعلى وظيفة في الحزمة بدون إعادة تشغيل برنامج تصحيح الأخطاء.

في Chrome 104، تعيد "أدوات مطوري البرامج" ميزة إعادة تشغيل الإطار. ومع ذلك، لم تتمكن من تعديل الدالة التي تم إيقافها مؤقتًا فيها حاليًا. من الشائع أن يقتطع المطوّرون دالة ثم يعدلون الدالة أثناء توقفها مؤقتًا.

مع هذا التحديث، يُعيد برنامج تصحيح الأخطاء تشغيل الدالة تلقائيًا مع فرض القيود التالية:

  • يمكن تعديل الوظيفة العلوية فقط أثناء الإيقاف المؤقت
  • لا يوجد استدعاء متكرر للوظيفة نفسها في أسفل الحزمة

تعديل مباشر أثناء تصحيح الأخطاء

مشكلة Chromium: 1334484

عرض @scope وتعديله في القواعد في لوحة الأنماط

يمكنك الآن عرض قواعد CSS @scope وتعديلها في لوحة الأنماط.

تشكّل @scope في القواعد جزءًا من مواصفات المستوى 6 للتوريث والتتالي في CSS. تتيح هذه القواعد للمطوّرين تحديد نطاق قواعد الأنماط في CSS.

افتح صفحة العرض التوضيحي هذه وافحص الرابط التشعّبي داخل العنصر <div class=”dark-theme”>. في لوحة الأنماط، اعرض قواعد @scope. انقر على بيان القاعدة لتعديله.

@scope في القواعد الموجودة في جزء الأنماط

مشكلة Chromium: 1337777

تحسينات على خريطة المصادر

في ما يلي بعض الإصلاحات على خرائط المصدر لتحسين تجربة تصحيح الأخطاء بشكل عام:

  • أصبحت "أدوات مطوّري البرامج" الآن تستخدم علامات الترقيم في التعامل مع معرّفات خريطة المصدر التي تتضمّن علامات ترقيم بشكل صحيح. تؤدي بعض أدوات التهجئة الحديثة (مثل esbuild) إلى إنشاء خرائط مصادر تدمج المعرّفات مع علامات الترقيم اللاحقة (فاصلة، أقواس، فاصلة منقوطة).
  • تحل أدوات مطوّري البرامج الآن أسماء خرائط المصدر لدوال الإنشاء باستخدام استدعاء super. ALT_TEXT_HERE
  • تم إصلاح فهرسة عناوين URL لخريطة المصدر لعناوين URL الأساسية المكرّرة. لم تكن نقاط الإيقاف مفعَّلة في بعض الملفات في السابق بسبب عناوين URL الأساسية المكرّرة.

مشكلة Chromium: 1335338، 1333411

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

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

  • أزِل زوج قيمة مفتاح التخزين المحلي بشكل صحيح من الجدول في لوحة التطبيق > التخزين المحلي عند حذفه. (1339280)
  • يتم الآن عرض معاينات الألوان بشكل صحيح عند عرض ملفات CSS في لوحة المصادر. وفي السابق، كانت المناصب في غير محلها. (1340062)
  • اعرض عناصر الشبكة ومرونة CSS بشكل منتظم في لوحة التنسيق، بالإضافة إلى عرضها كشارات في لوحة العناصر. في السابق، كانت العناصر المرنة وعناصر الشبكة مفقودة بشكل عشوائي في كلا المكانين. (1340441، 1273992)
  • يتوفّر رابط جديد لنص إعلان صانع المحتوى لإطارات الإعلانات إذا عثرت "أدوات مطوّري البرامج" على النص البرمجي الذي تسبّب في تصنيف الإطار على أنّه إعلان. يمكنك فتح إطار من خلال التطبيق > الإطارات. (1217041)

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج".
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات على YouTube.

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

الإصدار 118 من Chrome

الإصدار 117 من Chrome

الإصدار 116 من Chrome

الإصدار 115 من Chrome

الإصدار 114 من Chrome

الإصدار 113 من Chrome

الإصدار 112 من Chrome

الإصدار 111 من Chrome

الإصدار 110 من Chrome

الإصدار 109 من Chrome

الإصدار 108 من Chrome

الإصدار 107 من Chrome

الإصدار 106 من Chrome

الإصدار 105 من Chrome

الإصدار 104 من Chrome

الإصدار 103 من Chrome

الإصدار 102 من Chrome

الإصدار 101 من Chrome

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 82 من Chrome

تم إلغاء الإصدار 82 من Chrome.

الإصدار 81 من Chrome

الإصدار 80 من Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome