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

Kayce Basques

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

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

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

الشكل 1. بعد كتابة bold، يتم إكمال جزء "الأنماط" تلقائيًا إلى font-weight: bold.

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

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

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

الشكل 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 وتصديرها في "أدوات مطوّري Chrome" منذ فترة. الأزرار التي يسهل العثور عليها هي التغيير الجديد.

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

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

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

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

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

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

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

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

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

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

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

فحص أحداث Background Fetch وBackground Sync

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

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

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

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

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

Puppeteer for Firefox

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

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

يمكنك مشاهدة محاضرة جويل وأندري من Google I/O 2019 حول Puppeteer لمعرفة المزيد عن Puppeteer وPuppeteer for Firefox. يبدأ الإعلان عن Firefox في الدقيقة 4:05 تقريبًا.

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

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

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

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

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

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

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