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

Kayce Basques

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

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

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

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

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

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

طريقة العمل:

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

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

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

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

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

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

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

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

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

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

القيود

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعديلات أخرى

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

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

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

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

على سبيل المثال، يمرِّر التطبيق في الشكل 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.

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

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

الإصدار 128 من Chrome

الإصدار 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