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

Kayce Basques

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

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

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

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

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

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

طريقة العمل:

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

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

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

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

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

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

  3. انقر على عمليات إلغاء الإعداد.

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

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

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

القيود

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

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

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

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

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

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

يمكنك استخدام لوحة Accessibility (تسهيل الاستخدام) الجديدة لفحص خصائص تسهيل الاستخدام الخاصة بأحد العناصر وفحص نسبة التباين بين عناصر النص في Color Picker، وذلك لضمان إمكانية وصول المستخدمين الذين يعانون من مشاكل في الرؤية أو في رؤية الألوان إلى تلك العناصر.

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

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

لوحة إمكانية الوصول

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

تحقق من قناة Rob Dodson's A11ycast بشأن التصنيف أدناه لمشاهدة جزء إمكانية الوصول عمليًا.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعديلات أخرى

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

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

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

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

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

الدخول إلى رمز تمرير الرسائل في Chrome 65.

الشكل 8. استخدام رمز تمرير الرسائل في Chrome 65

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

الدخول إلى رمز تمرير الرسائل في Chrome 63.

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

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

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

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

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

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

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

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

الإصدار 118 من Chrome

الإصدار 117 من Chrome

الإصدار 116 من Chrome

الإصدار 115 من Chrome

الإصدار 114 من Chrome

الإصدار 113 من Chrome

الإصدار 112 من Chrome

الإصدار 111 من Chrome

الإصدار 110 من Chrome

الإصدار 109 من Chrome

الإصدار 108 من Chrome

الإصدار 107 من Chrome

الإصدار 106 من Chrome

الإصدار 105 من Chrome

الإصدار 104 من Chrome

الإصدار 103 من Chrome

الإصدار 102 من Chrome

الإصدار 101 من Chrome

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 82 من Chrome

تم إلغاء الإصدار 82 من Chrome.

الإصدار 81 من Chrome

الإصدار 80 من Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome