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

Kayce Basques

مرحبًا في ما يلي الميزات الجديدة في أدوات مطوّري البرامج في Chrome في الإصدار 76 من Chrome.

الإكمال التلقائي باستخدام قيم CSS

عند إضافة تعريفات الأنماط إلى عقدة DOM، يكون أحيانًا من الأسهل تذكُّر قيمة التعريف مقارنةً باسم التعريف. على سبيل المثال، عند جعل عقدة <p> غامقة، قد يكون من السهل remembered تذكر القيمة bold أكثر من الاسم font-weight. تتيح واجهة مستخدم الإكمال التلقائي في لوحة "النمط" الآن قيم CSS. إذا كنت تتذكر قيمة الكلمة الرئيسية التي تريدها، ولكن لا يمكنك تذكر اسم الخاصية، فحاول كتابة القيمة ومن المفترض أن يساعدك الإكمال التلقائي في العثور على الاسم الذي تبحث عنه.

بعد كتابة &quot;غامق&quot;، تتمّ الإكمال التلقائي في لوحة &quot;الأنماط&quot; ليصبح &quot;font-weight: bold&quot;.

الشكل 1. بعد كتابة bold، يتم إكمال لوحة "الأنماط" تلقائيًا لتصبح font-weight: bold.

يمكنك إرسال ملاحظاتك حول هذه الميزة الجديدة إلى المشكلة رقم 931145 في Chromium.

واجهة مستخدِم جديدة لإعدادات الشبكة

كانت لوحة "الشبكة" تواجه سابقًا مشكلة في سهولة الاستخدام، حيث كان يتعذّر الوصول إلى خيارات مثل قائمة "تقييد السرعة" عندما تكون نافذة DevTools ضيّقة. لإصلاح هذه المشكلة وترتيب فوضى لوحة "الشبكة"، تم نقل بعض الخيارات الأقل استخدامًا إلى لوحة إعدادات الشبكة زر &quot;إعدادات الشبكة&quot; الجديدة.

إعدادات الشبكة

الشكل 2. إعدادات الشبكة

تم نقل الخيارات التالية إلى إعدادات الشبكة: استخدام صفوف طلبات كبيرة والتجميع حسب الإطار وعرض نظرة عامة والتقاط لقطات شاشة. يعين الشكل 3 المواقع القديمة للمواقع الجديدة.

ربط المواقع الجغرافية القديمة بالمواقع الجغرافية الجديدة

الشكل 3. تعيين المواقع القديمة إلى الجديدة.

يمكنك إرسال ملاحظاتك حول تغيير واجهة المستخدم هذا إلى المشكلة رقم 892969 في Chromium.

رسائل WebSocket في عمليات تصدير HAR

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

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

يمكنك إرسال ملاحظاتك حول هذه الميزة الجديدة إلى المشكلة رقم 496006 في Chromium.

أزرار استيراد وتصدير ملف HAR

يمكنك مشاركة سجلات الشبكة مع الزملاء بسهولة أكبر باستخدام الزرَّين الجديدَين تصدير الكل كملف HAR مع المحتوى تصدير واستيراد ملف HAR استيراد. كانت ميزة استيراد ملفات HAR وتصديرها متوفرة في DevTools منذ فترة. إنّ الأزرار التي يسهل العثور عليها هي التغيير الجديد.

أزرار HAR الجديدة

الشكل 4. أزرار HAR الجديدة.

يُرجى إرسال ملاحظاتك حول تغيير واجهة المستخدم هذا إلى المشكلة رقم 904585 في Chromium.

إجمالي استخدام الذاكرة في الوقت الفعلي

تعرض لوحة "الذاكرة" الآن إجمالي استخدام الذاكرة في الوقت الفعلي.

إجمالي استخدام الذاكرة في الوقت الفعلي.

الشكل 5. يوضّح أسفل لوحة "الذاكرة" أنّ الصفحة تستخدِم 43.4 ميغابايت من الذاكرة بالكامل. 209 كيلوبايت/ثانية يشير إلى أن إجمالي استخدام الذاكرة يتزايد 209 كيلوبايت في الثانية.

اطّلِع أيضًا على أداة مراقبة الأداء لتتبُّع استخدام الذاكرة في الوقت الفعلي.

يمكنك إرسال ملاحظاتك حول هذه الميزة الجديدة إلى المشكلة رقم 958177 في Chromium.

أرقام منافذ تسجيل مشغّل الخدمات

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

منافذ مشغّل الخدمات

الشكل 6. منافذ مشغّل الخدمات.

يمكنك إرسال تعليقات حول تغيير واجهة المستخدم هذا إلى مشكلة Chromium رقم 601286.

فحص أحداث "جلب البيانات في الخلفية" و"المزامنة في الخلفية"

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

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

لوحة &quot;الاسترجاع في الخلفية&quot;

الشكل 7 لوحة "الاسترجاع في الخلفية" عرض توضيحي لـ ماكسيم سلنيكوف.

جزء &quot;مزامنة الخلفية&quot;.

الشكل 8. لوحة "المزامنة في الخلفية"

يمكنك إرسال ملاحظاتك حول هذه الميزات الجديدة إلى المشكلة رقم 927726 في Chromium.

Puppeteer لمتصفّح Firefox

‫Puppeteer for Firefox هو مشروع تجريبي جديد يتيح لك التشغيل الآلي لمتصفّح Firefox باستخدام واجهة برمجة التطبيقات Puppeteer API. بعبارة أخرى، يمكنك الآن التشغيل الآلي لمتصفّحَي Firefox وChromium باستخدام واجهة برمجة التطبيقات Node API نفسها، كما هو موضح في الفيديو أدناه.

بعد تشغيل node example.js، يفتح Firefox ويتم إدراج النص page في مربّع البحث على موقع وثائق Puppeteer. وبعد ذلك، يتم تكرار المهمة نفسها في Chromium.

يمكنك الاطّلاع على محاضرة Puppeteer التي قدّمها Joel وAndrey في مؤتمر Google I/O لعام 2019 لمعرفة المزيد من المعلومات حول Puppeteer وPuppeteer لتطبيق Firefox. يظهر إعلان Firefox في حوالي الساعة 4:05.

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

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

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

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

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

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