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

Kayce Basques

تشمل الميزات الجديدة التي ستتوفّر في "أدوات مطوّري البرامج" في الإصدار 65 من Chrome ما يلي:

• عمليات التجاوز المحلية
• أدوات جديدة لتسهيل الاستخدام
• علامة التبويب التغييرات
• عمليات تدقيق جديدة في تحسين محركات البحث والأداء
• تسجيلات متعدّدة في لوحة الأداء
• التنفيذ الموثوق للرموز البرمجية خطوة بخطوة باستخدام العاملين والرموز غير المتزامنة

يمكنك قراءة هذه الملاحظات أو مشاهدة نسخة الفيديو أدناه.

إجراءات التجاوز المحلية

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

الشكل 1 الاحتفاظ بتغيير CSS في جميع عمليات تحميل الصفحات باستخدام عمليات الإلغاء المحلية

طريقة العمل:

• تحدّد دليلاً يجب أن تحفظ فيه "أدوات مطوّري البرامج" التغييرات.
• عند إجراء تغييرات في "أدوات مطوّري البرامج"، تحفظ هذه الأدوات نسخة من الملف المعدَّل في الدليل.
• عند إعادة تحميل الصفحة، تعرض "أدوات مطوّري البرامج" الملف المعدَّل المحلي بدلاً من مورد الشبكة.

لإعداد عمليات التجاوز المحلية، اتّبِع الخطوات التالية:

1. افتح لوحة المصادر.

2. افتح علامة التبويب عمليات الإلغاء.

   

   الشكل 2 علامة التبويب عمليات الإلغاء

3. انقر على إعدادات التجاوز.

4. اختَر الدليل الذي تريد حفظ التغييرات فيه.

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

6. أدخِل تغييراتك.

القيود

• لا تحفظ "أدوات مطوّلي البرامج" التغييرات التي تم إجراؤها في شجرة DOM ضمن لوحة العناصر. يمكنك تعديل رمز HTML في لوحة المصادر بدلاً من ذلك.
• إذا عدّلت CSS في لوحة الأنماط، وكان مصدر CSS هو ملف HTML، لن تحفظ أدوات مطوّلي البرامج التغيير. عدِّل ملف HTML في لوحة المصادر بدلاً من ذلك.

الميزات ذات الصلة

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

علامة التبويب "التغييرات"

تتبُّع التغييرات التي تجريها محليًا في "أدوات مطوّري البرامج" من خلال علامة التبويب الجديدة التغييرات

الشكل 3 علامة التبويب التغييرات

أدوات جديدة لتسهيل الاستخدام

استخدِم لوحة تسهيل الاستخدام الجديدة لفحص خصائص تسهيل الاستخدام الخاصة بأحد العناصر، وافحص نسبة التباين الخاصة بعناصر النص في أداة اختيار الألوان للتأكّد من أنّها متاحة للمستخدمين الذين يعانون من ضعف البصر أو عجز في رؤية الألوان.

لوحة تسهيل الاستخدام

استخدِم جزء تسهيل الاستخدام في لوحة العناصر للتحقّق من سمات تسهيل الاستخدام الخاصة بالعنصر المحدّد حاليًا.

الشكل 4 تعرض لوحة تسهيل الاستخدام سمات ARIA والخصائص المحسوبة للعنصر المحدّد حاليًا في شجرة نموذج المستند ضمن لوحة العناصر، بالإضافة إلى موضع العنصر في شجرة تسهيل الاستخدام.

يمكنك مشاهدة فيديو A11ycast من Rob Dodson حول التصنيف أدناه للاطّلاع على جزء إمكانية الوصول أثناء العمل.

نسبة التباين في "أداة اختيار الألوان"

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

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

الشكل 5 فحص نسبة التباين للعنصر h1 المميّز

في الشكل 5، يشير علامتا الاختيار بجانب 4.61 إلى أنّ هذا العنصر يستوفي نسبة التباين المحسّنة المقترَحة (AAA). إذا كان يتضمّن علامة اختيار واحدة فقط، يعني ذلك أنّه يستوفي الحدّ الأدنى لنسبة التباين المقترَحة (AA).

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

الشكل 6 قسم نسبة التباين الموسّع

الميزات ذات الصلة

تتضمّن لوحة عمليات التدقيق عملية تدقيق آلية في إمكانية الوصول للتأكّد من أنّ كل عنصر نصي على الصفحة يتضمّن نسبة تباين كافية.

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

عمليات التدقيق الجديدة

يتضمّن الإصدار 65 من Chrome فئة جديدة تمامًا من عمليات التدقيق في تحسين محركات البحث، والعديد من عمليات التدقيق الجديدة في الأداء.

عمليات تدقيق جديدة لتحسين محركات البحث

قد يساعد التأكّد من أنّ صفحاتك تجتاز كل عمليات التدقيق في فئة SEO الجديدة في تحسين ترتيب موقعك الإلكتروني على محركات البحث.

الشكل 7 فئة التدقيق الجديدة SEO

عمليات تدقيق جديدة في الأداء

يتضمّن الإصدار 65 من Chrome أيضًا العديد من عمليات التدقيق الجديدة في الأداء:

• وقت بدء تشغيل JavaScript طويل
• استخدام سياسة ذاكرة تخزين مؤقت غير فعّالة على مواد العرض الثابتة
• يتجنّب هذا الطلب عمليات إعادة توجيه الصفحات
• يستخدم المستند مكوّنات إضافية
• تصغير CSS
• تصغير JavaScript

الأداء مهم! بعد أن حسّنت شركة Mynet سرعة تحميل صفحاتها بمقدار 4 مرات، زاد الوقت الذي يقضيه المستخدمون على الموقع الإلكتروني بنسبة% 43، وزاد عدد الصفحات التي يشاهدونها بنسبة% 34، وانخفضت معدلات الارتداد بنسبة %24، وزادت الإيرادات بنسبة% 25 لكل مشاهدة لصفحة المقالة. مزيد من المعلومات

ملاحظة: إذا أردت تحسين أداء تحميل صفحاتك، ولكن لا تعرف من أين تبدأ، جرِّب لوحة عمليات التدقيق. ما عليك سوى إدخال عنوان URL، وستحصل على تقرير مفصّل حول العديد من الطرق المختلفة التي يمكنك من خلالها تحسين تلك الصفحة. ابدأ استخدامها.

تعديلات أخرى

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

تتبُّع الرموز البرمجية بشكل موثوق باستخدام العاملين والرموز البرمجية غير المتزامنة

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

الوصول إلى الرمز الذي ينقل الرسائل بين سلاسل المحادثات

عند الانتقال إلى التعليمات البرمجية التي تنقل الرسائل بين سلاسل المحادثات، تعرض لك "أدوات مطوّري البرامج" الآن ما يحدث في كل سلسلة محادثات.

على سبيل المثال، يمرّر التطبيق في الشكل 8 رسالة بين السلسلة الرئيسية وسلسلة العامل. بعد الانتقال إلى خطوة في استدعاء postMessage() في سلسلة التعليمات البرمجية الرئيسية، توقّف DevTools مؤقتًا في معالج onmessage في سلسلة التعليمات البرمجية للعامل. يرسل معالج onmessage رسالة إلى سلسلة المحادثات الرئيسية. يؤدي الانتقال إلى مكالمة هذه إلى إيقاف DevTools مؤقتًا في سلسلة التعليمات البرمجية الرئيسية.

الشكل 8 التعمّق في رمز تمرير الرسائل في Chrome 65

عندما كنت تتنقّل في رمز برمجي مشابه في الإصدارات السابقة من Chrome، كان Chrome يعرض لك فقط الجزء الخاص بالرمز البرمجي في سلسلة التعليمات الرئيسية، كما هو موضّح في الشكل 9.

الشكل 9 الخطوة إلى رمز تمرير الرسائل في Chrome 63

التبديل إلى الرمز غير المتزامن

عند الانتقال إلى التعليمات البرمجية غير المتزامنة، تفترض "أدوات مطوّلي البرامج" الآن أنّك تريد الإيقاف المؤقت في التعليمات البرمجية غير المتزامنة التي يتم تنفيذها في النهاية.

على سبيل المثال، في الشكل 10، بعد الانتقال إلى setTimeout()، تنفّذ "أدوات مطوّلي البرامج" جميع الرموز البرمجية التي تؤدي إلى تلك النقطة في الخلفية، ثم تتوقف مؤقتًا في الدالة التي تم تمريرها إلى setTimeout().

الشكل 10 التنقّل إلى الرمز غير المتزامن في الإصدار 65 من Chrome

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

الشكل 11 الخطو إلى داخل الرمز غير المتزامن في Chrome 63

تسجيلات متعدّدة في "لوحة الأداء"

تتيح لك لوحة الأداء الآن حفظ ما يصل إلى 5 تسجيلات مؤقتًا. يتم حذف التسجيلات عند إغلاق نافذة "أدوات مطوّري البرامج". راجِع بدء تحليل أداء وقت التشغيل للتعرّف على لوحة الأداء.

الشكل 12 الاختيار بين تسجيلات متعددة في لوحة الأداء

مكافأة: تنفيذ إجراءات "أدوات مطوّري البرامج" تلقائيًا باستخدام الإصدار 1.0 من Puppeteer

أصبح الإصدار 1.0 من Puppeteer، وهي أداة لأتمتة المتصفّح يديرها فريق "أدوات مطوّري البرامج في Chrome"، متاحًا الآن. يمكنك استخدام Puppeteer لأتمتة العديد من المهام التي كانت متاحة سابقًا فقط من خلال "أدوات مطوّري البرامج"، مثل التقاط لقطات شاشة:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

تتضمّن أيضًا واجهات برمجة تطبيقات للعديد من مهام التشغيل الآلي المفيدة بشكل عام، مثل إنشاء ملفات PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

اطّلِع على البدء السريع لمعرفة المزيد.

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

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

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

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

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

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

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

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