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

Jecelyn Yeen

المسجّل: خيارات النسخ للخطوات، وإعادة التشغيل داخل الصفحة، وقائمة السياق الخاصة بالخطوة

خيارات نسخ جديدة في لوحة "المسجّلة الذكية"

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

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

بالإضافة إلى ذلك، يمكنك النقر بزر الماوس الأيمن على خطوة ونسخها إلى الحافظة في لوحة *المسجّل بدلاً من تصدير مسار المستخدم بأكمله. وهي تعمل أيضًا مع الإضافات. على سبيل المثال، جرِّب نسخ خطوة كبرنامج نصي Nightwatch Test. باستخدام هذه الميزة، يمكنك تعديل أيّ نص برمجي حالي بسهولة.

في السابق، كان بإمكانك الوصول إلى قائمة الخطوات من خلال زر النقاط الثلاث فقط. يمكنك الآن النقر بزر الماوس الأيمن على أي مكان في الخطوة للوصول إلى القائمة.

مشاكل Chromium: 1322313 و1351649 و1322313 و1339767

عرض أسماء الدوال الفعلية في تسجيلات الأداء

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

عرض مقارنة بين أسماء الدوال قبل وبعد التغيير في لوحة "الأداء"

في هذا المثال، يتم تصغير حجم ملف المصدر أثناء الإنتاج. على سبيل المثال، يتم تصغير الدالة sayHi إلى n، ويتم تصغير الدالة takeABreak إلى o في هذا العرض التوضيحي.

عرض الملفات قبل وبعد تصغيرها

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

بفضل التغييرات الأخيرة، تقرأ "أدوات مطوّري البرامج" الآن خريطة المصدر وتعرض أسماء الدوال وموقع المصدر الفعلي.

مشاكل Chromium: 1364601 و1364601

اختصارات لوحة مفاتيح جديدة في لوحة Console وSources

يمكنك التبديل بين علامات التبويب في لوحة المصادر باستخدام: في نظام التشغيل MacOS، Function + Command + السهم المتّجه للأعلى وللأسفل في نظامَي التشغيل Windows وLinux، Control + Page up أو down

بالإضافة إلى ذلك، يمكنك التنقّل بين اقتراحات الإكمال التلقائي باستخدام Ctrl + N وCtrl + P على نظام التشغيل MacOS، على غرار Emacs. على سبيل المثال، يمكنك كتابة window. في Console واستخدام هذه الاختصارات للتنقّل.

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

مشكلة في Chromium: 1167965 و1172535 و1371585. 1369503

تصحيح أخطاء JavaScript بشكل محسّن

في ما يلي بعض التحسينات على تصحيح أخطاء JavaScript في هذا الإصدار:

  • ‫new.target هي خاصية وصفية تتيح لك رصد ما إذا تم استدعاء دالة أو أداة إنشاء باستخدام عامل التشغيل new. يمكنك الآن تسجيل new.target في وحدة التحكّم للتحقّق من قيمته أثناء تصحيح الأخطاء. في السابق، كان يعرض أخطاء عند إدخال new.target. عرض مقارنة بين عملية تصحيح أخطاء تقييم new.target قبل وبعد
  • يتيح لك الكائن WeakRef الاحتفاظ بمرجع ضعيف إلى كائن آخر، بدون منع جمع البيانات غير الضرورية من هذا الكائن. تعرض "أدوات مطوّري البرامج في Chrome" الآن معاينة مضمّنة للقيمة وتقيّم المرجع الضعيف مباشرةً في وحدة التحكّم أثناء تصحيح الأخطاء. في السابق، كان عليك استدعاء الدالة deref بشكل صريح لحلّها. عرض مقارنة بين تقييم WeakRef قبل تصحيح الأخطاء وبعده
  • تم إصلاح المعاينة المضمّنة الثابتة للمتغير الذي تم إخفاؤه. في السابق، كانت قيمة العرض غير صحيحة. عرض معاينة مضمّنة للمقارنة بين القيمتين السابقة واللاحقة للمتغير المخفي
  • إزالة التشويش عن أسماء المتغيرات في الدالتَين Generator وasync ضمن جزء النطاق في لوحة المصادر

مشاكل Chromium: 1267690 و1246863 و1371322 و1311637

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

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

  • إتاحة المزيد من التلميحات لخصائص CSS غير النشطة في اللوحة الأنماط، مثل الارتفاع والعرض المضمّنين وخصائص flex وgrid (1373597، 1178508، 1178508،1178508)
  • تم إصلاح تمييز البنية. لم يكن يعمل بشكلٍ صحيح منذ الترقية الأخيرة لمحرّر الرموز البرمجية في "أدوات مطوّري البرامج". (1290182)
  • تسجيل أحداث تغيير الإدخال بشكل صحيح بعد حدث on blur في المسجّل (1378488)
  • تعديل نص إعادة التشغيل البرمجي في Puppeteer عند التصدير للحصول على تجربة أفضل في تصحيح الأخطاء في المسجّل (1351649)
  • إتاحة تسجيل التفاعلات وإعادة تشغيلها في المسجّلة لتصحيح الأخطاء عن بُعد (1185727)
  • تم إصلاح تحليل أسماء متغيّرات CSS الخاصة في var(). في السابق، لم تكن "أدوات مطوّري البرامج" تتيح تحليل المتغيرات التي تتضمّن أحرفًا تم تجاهلها، مثل var(--fo\ o). ، (1378992)

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

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

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

في ما يلي بعض النقاط البارزة:

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

يمكنك الاطّلاع على التغييرات الكاملة في طلب التعليقات (RFC) (مغلق) وترك ملاحظاتك هنا.

عرض لوحة "نقاط التوقف" قبل إعادة التصميم وبعدها

مشاكل Chromium: 1346231 و1324904

[تجريبية] عرض نصوص المصادر المصغّرة تلقائيًا بتنسيق محسّن

تعرض لوحة المصادر الآن تلقائيًا ملفات المصدر المصغَّرة بتنسيق محسّن في مكانها. يمكنك النقر على الزر الطباعة بشكل منسّق { } للتراجع عن ذلك.

في السابق، كانت لوحة المصادر تعرض المحتوى المصغّر تلقائيًا. كان عليك النقر على زر "الطباعة المنسّقة" يدويًا لتنسيق المحتوى. بالإضافة إلى ذلك، لم يتم عرض المحتوى المنسّق في الملف نفسه، بل في علامة تبويب ::formatted أخرى.

عرض ملف مصغّر قبل وبعد تنسيقه تلقائيًا في المكان نفسه

مشكلة في Chromium: 1164184

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

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

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

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

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

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