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

Kayce Basques

تشمل الميزات الجديدة والتغييرات الرئيسية التي ستطرأ على "أدوات مطوري البرامج" في Chrome 66 ما يلي:

• تجاهل النص البرمجي في لوحة الشبكة
• الضبط التلقائي للتكبير في وضع الجهاز
• عرض النص بوضوح في علامتَي التبويب معاينة وردّ
• معاينة محتوى HTML في علامة التبويب معاينة
• عمليات الإلغاء المحلي مع أنماط داخل HTML

يُرجى مواصلة القراءة أو مشاهدة إصدار الفيديو الخاص بملاحظات الإصدار أدناه.

تجاهل النص البرمجي في لوحة "الشبكة"

يوضّح لك عمود بادئ التشغيل في لوحة الشبكة سبب طلب مورد. بالنسبة على سبيل المثال، إذا أدّت لغة JavaScript إلى جلب صورة، سيعرض عمود المُنشئ سطر رمز JavaScript الذي تسبب في الطلب.

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

وما تريده حقًا في هذا السيناريو هو رؤية رمز التطبيق الذي يتسبب في ظهور الطلب. وهي تعني ممكن الآن:

1. مرِّر مؤشر الماوس فوق عمود المبدئ. تظهر حزمة الاستدعاء التي تسبّبت الطلب في نافذة منبثقة.
2. انقر بزر الماوس الأيمن على المكالمة التي تريد إخفاءها من نتائج بدء المكالمة.
3. اختَر إضافة نص برمجي إلى قائمة التجاهل. يُخفي عمود المُنشئ الآن أي استدعاءات من النص البرمجي تجاهلته.

الشكل 1. تجاهل requests.js

يمكنك إدارة النصوص البرمجية التي تم تجاهلها من علامة التبويب قائمة التجاهل في الإعدادات.

راجِع تجاهل نص برمجي أو نمط من النصوص البرمجية لمزيد من المعلومات حول تجاهل النصوص البرمجية.

عرض النص بتنسيق محسّن في علامتَي التبويب "معاينة" و"الرد"

تعرض علامة التبويب معاينة في لوحة الشبكة الآن الموارد تلقائيًا عند رصدها. أنه تم تصغير هذه الموارد.

الشكل 2. تعرض علامة التبويب معاينة محتوى analytics.js بشكل تلقائي.

لعرض النسخة غير المصغّرة من مرجع، استخدِم علامة التبويب ردّ. يمكنك أيضًا اختيار يمكنك عرض الموارد بتنسيق محسّن من علامة التبويب الرد باستخدام الزر تنسيق جديد.

الشكل 3. طباعة محتوى analytics.js يدويًا باستخدام الزر تنسيق

معاينة محتوى HTML في علامة التبويب "معاينة"

في السابق، كانت علامة التبويب معاينة في لوحة الشبكة تعرض رمزًا لمورد HTML في في حالات معينة، مع عرض معاينة HTML في حالات أخرى. أصبحت علامة التبويب معاينة دائمًا يقوم بعرض أساسي لـ HTML. المتصفح ليس ممتلئًا، لذلك قد لا يتم عرضه HTML بالشكل الذي تتوقعه تمامًا. إذا كنت تريد عرض رمز HTML، انقر على علامة التبويب الردّ. انقر بزر الماوس الأيمن على أحد الموارد واختَر فتح في لوحة المصادر.

الشكل 4. معاينة ملف HTML في علامة التبويب معاينة

الضبط التلقائي للتكبير/التصغير في وضع الجهاز

عندما تكون في وضع الجهاز، افتح القائمة المنسدلة تكبير/تصغير واختَر ضبط التكبير أو التصغير تلقائيًا على تغيير حجم إطار العرض تلقائيًا متى غيّرت اتجاه الجهاز.

تعمل عمليات التجاوز المحلي الآن مع بعض الأنماط المحددة في HTML

عندما أطلقت "أدوات مطوري البرامج" عمليات الإلغاء المحلية في Chrome 65، كان أحد القيود هو لم يتمكن من تتبع التغييرات على الأنماط المحددة في HTML. على سبيل المثال، في الشكل 7 يوجد نمط في head من المستند الذي يعرّف عن font-weight: bold لعناصر h1.

الشكل 5. مثال على الأنماط المحددة في HTML

في Chrome 65، إذا غيّرت بيان font-weight من خلال لوحة النمط في "أدوات مطوّري البرامج"، على الجهاز المحلي ولن تعمل عمليات الإلغاء على تتبُّع التغيير. بمعنى آخر، عند إعادة التحميل التالية، سيعكس النمط رجوع إلى font-weight: bold ولكن في Chrome 66، تظل مثل هذه التغييرات قائمة في جميع عمليات تحميل الصفحات.

نصيحة إضافية: تجاهُل النصوص البرمجية لإطار العمل لجعل "نقاط إيقاف أداة معالجة الحدث" أكثر فائدة

عندما أنشأتُ فيديو البدء باستخدام تصحيح أخطاء JavaScript، ترك بعض المشاهدين تعليقاتهم. أن نقاط إيقاف مستمع الحدث ليست مفيدة للتطبيقات التي تستند إلى أُطر العمل، لأن الحدث المستمعين غالبًا في رمز إطار العمل. على سبيل المثال، في الشكل 8، أعددت click نقطة توقف في أدوات مطوري البرامج. عند النقر على الزر في العرض التوضيحي، تتوقف أدوات مطوري البرامج مؤقتًا تلقائيًا في السطر الأول من رمز المستمع. في هذه الحالة، يتوقف مؤقتًا في رمز تضمين Vue.js على السطر 1802، والذي ليس مفيدًا إلى هذا الحد.

الشكل 6. تتوقف نقطة إيقاف click مؤقتًا في Vue.js'. رمز برنامج تضمين

بما أنّ نص Vue.js البرمجي في ملف منفصل، يمكنني تجاهل هذا النص البرمجي من حزمة المكالمات. لجعل نقطة الإيقاف هذه click أكثر فائدة.

الشكل 7. تجاهل نص Vue.js من لوحة حزمة الاتصال

في المرة التالية التي أنقر فيها على الزر وأشغِّل نقطة إيقاف click، يتم تنفيذ رمز Vue.js. بدون توقفه، ثم يتوقف مؤقتًا عند السطر الأول من الرمز في مستمع التطبيق، وهو حيث أردت حقًا أن أتوقف مؤقتًا.

الشكل 8. تتوقف نقطة إيقاف "click" مؤقتًا عند الرمز البرمجي للمستمِع في التطبيق.

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

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

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

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

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

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

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