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

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

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

إجراءات الإلغاء على المستوى المحلي

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

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

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

آلية عمله:

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

لإعداد عمليات الإلغاء المحلية:

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

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

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

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

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

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

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

القيود

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

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

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

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

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

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

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

جزء إمكانية الوصول

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

جزء إمكانية الوصول

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

تحقق من ملف A11ycast لروب دودسون حول التصنيف أدناه لرؤية جزء إمكانية الوصول عمليًا.

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

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

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

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

الشكل 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، ستقدّم لك تقريرًا تفصيليًا عن العديد من الطرق المختلفة التي يمكنك من خلالها تحسين تلك الصفحة. ابدأ استخدامها.

تعديلات أخرى

تنفيذ رموز موثوق بها مع العاملين والرموز غير المتزامنة

يوفّر Chrome 65 تحديثات لزر Step 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. الاختيار من بين عدة تسجيلات في لوحة الأداء

ميزة إضافية: يمكنك تنفيذ إجراءات في أدوات مطوري البرامج بشكل مبرمَج باستخدام الإصدار Puppeteer 1.0.

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

تنزيل قنوات المعاينة

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

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

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

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

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome