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

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

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

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

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

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

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

طريقة العمل:

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

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

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

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

   

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

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

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

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

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

القيود

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

ميزات ذات صلة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ميزات ذات صلة

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

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

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

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

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

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

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

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

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

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

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

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

تعديلات أخرى

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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