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

Kayce Basques
Kayce Basques
X GitHub

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

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

عمليات التجاوز المحلية

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

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

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

طريقة العمل:

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

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

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

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

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

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

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

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

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

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

القيود

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

فحص نسبة التباين لعنصر 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 تحديثات على زر Step Into Step Into عند الانتقال إلى الرمز الذي يمرّر الرسائل بين سلاسل التنفيذ والرمز غير المتزامن. إذا أردت استخدام السلوك السابق للتنقل، يمكنك استخدام زر التنقل الخطوة الجديد بدلاً من ذلك.

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

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

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

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

الشكل 8 الخطوة إلى داخل رمز تمرير الرسائل في Chrome 65

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

التعمّق في رمز تمرير الرسائل في الإصدار 63 من Chrome

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

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

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

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

الخطوة إلى الرمز غير المتزامن في Chrome 65

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

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

الخطوة إلى رمز غير متزامن في Chrome 63

الشكل 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 أو قناة مطوّري البرامج أو القناة التجريبية كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

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

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

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

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