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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مشاكل Chromium: 1364601 و1364601

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

يمكنك التبديل بين علامات التبويب في لوحة المصادر باستخدام: في نظام التشغيل 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 أو Dev أو Beta كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

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

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

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

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