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

Kayce Basques

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

يمكنك الاطّلاع على المزيد من المعلومات أدناه أو مشاهدة نسخة الفيديو من ملاحظات الإصدار هذه.

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

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

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

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

طريقة العمل:

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

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

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

  2. افتح علامة التبويب عمليات الاستبدال.

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

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

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

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

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

  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 الجديدة للتدقيق

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

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

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

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

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

تعديلات أخرى

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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"

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

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

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