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

Kayce Basques

تشمل الميزات الجديدة التي سيتم طرحها في "أدوات مطوري البرامج" في Chrome 65 ما يلي:

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

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

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

الاحتفاظ بتغيير CSS في جميع عمليات تحميل الصفحات باستخدام ميزة "إجراءات التجاوز المحلي"

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

طريقة العمل:

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

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

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

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

    علامة التبويب "عمليات الإلغاء"

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

  3. انقر على استبدالات الإعداد.

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

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

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

القيود

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

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

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

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

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

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

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

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

استخدِم لوحة تسهيل الاستخدام في لوحة العناصر للاطّلاع على سمات تسهيل الاستخدام للعنصر المحدّد حاليًا.

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

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

يمكنك الاطّلاع على A11ycast الخاص بروب دوسن حول وضع التصنيفات أدناه للاطّلاع على لوحة تسهيل الاستخدام أثناء عملها.

نسبة التباين في منتقي الألوان

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

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

فحص نسبة التباين لعنصر H1 المميّز

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

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

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

قسم "نسبة التباين" الموسّع

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعديلات أخرى

خطوات الرمز الموثوقة باستخدام وحدات العمل والرموز غير المتزامنة

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

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

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

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

الانتقال إلى رمز إرسال الرسائل في الإصدار 65 من Chrome

الشكل 8 الانتقال إلى رمز إرسال الرسائل في Chrome 65

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

الانتقال إلى رمز إرسال الرسائل في Chrome 63

الشكل 9 استخدام رمز تمرير الرسائل في Chrome 63

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

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

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

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

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

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

الانتقال إلى الرمز غير المتزامن في Chrome 63

الشكل 11 الانتقال إلى الرمز غير المتزامن في Chrome 63

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

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

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

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

ميزة إضافية: التشغيل التلقائي لإجراءات أدوات مطوري البرامج باستخدام Puppeteer 1.0

تم الآن إزالة الإصدار 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 لعرض ميزات "أدوات مطوّري البرامج" أثناء التصفّح بدون فتح "أدوات مطوّري البرامج" صراحةً. اطّلِع على استخدام ميزات "أدوات مطوّري البرامج" بدون فتح "أدوات مطوّري البرامج" للحصول على مثال.

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

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

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

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

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

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