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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

آخر الأخبار حول "المسجّلة الذكية"

التوافق مع إضافات إعادة التشغيل

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

جرِّب الإضافة النموذجية. انقر على خيار إعادة التشغيل المخصّص الجديد لفتح واجهة مستخدم إعادة التشغيل المخصّصة.

واجهة مستخدم مخصّصة لإعادة التشغيل

لتخصيص Recorder حسب احتياجاتك ودمجها مع أدواتك، ننصحك بتطوير إضافة خاصة بك: استكشِف chrome.devtools.recorder API واطّلِع على المزيد من أمثلة الإضافات.

مشكلة في Chromium: ‏ 1400243

التسجيل باستخدام أدوات اختيار الاختراق

بالإضافة إلى أدوات الاختيار المخصّصة وأدوات اختيار CSS وARIA وText وXPath، يمكنك الآن التسجيل باستخدام أدوات اختيار pierce. تتصرّف أدوات الاختيار هذه مثل أدوات اختيار CSS، ولكن يمكنها أيضًا اختراق جذور الظل.

ابدأ تسجيلًا جديدًا على صفحة تتضمّن shadow DOM وضع علامة في المربّع مربّع اختيار Pierce ضمن أنواع أداة الاختيار المُستخدَمة أثناء التسجيل. سجِّل تفاعلك مع العناصر في shadow DOM وافحص الخطوة المقابلة.

ضبط "المسجّلة الذكية" لاستخدام أدوات اختيار Pierce، وأداة اختيار Pierce قيد الاستخدام

مشكلة في Chromium: 1411188.

التصدير كنص برمجي من مكتبة Puppeteer مع تحليل Lighthouse

تقدّم أداة المسجّلة خيار تصدير جديدًا: Puppeteer (بما في ذلك تحليل Lighthouse). باستخدام Puppeteer، يمكنك إعداد عمليات Chrome تلقائيًا والتحكّم فيها. باستخدام Lighthouse، يمكنك تسجيل أداء موقعك الإلكتروني وتحسينه.

افتح التسجيل، وانقر على تصدير. تصدير، واختَر الخيار الجديد، واحفظ ملف .js.

تصدير Puppeteer (بما في ذلك تحليل Lighthouse)

نفِّذ نص Puppeteer البرمجي للحصول على تقرير Lighthouse في ملف flow.report.html.

تم فتح تقرير Lighthouse في Chrome.

الحصول على إضافات

استكشاف خيارات لتخصيص تجربة استخدام "المسجّلة"، مثل خيارات التصدير المخصّصة يمكنك الحصول على إضافات المسجّل من خلال النقر على تصدير. تصدير > الحصول على إضافات في تسجيل.

خيار "الحصول على إضافات" في القائمة المنسدلة "تصدير"

يمكنك إضافة إضافتك الخاصة إلى قائمة إضافات "المسجّل". نتطلّع إلى رؤية تطبيقك في القائمة.

مشاكل Chromium: 1417104 و1413168.

العناصر > تعديلات على الأنماط

مستندات CSS

كم مرة في اليوم تبحث عن مستندات حول سمات CSS؟ تعرض لك الآن اللوحة العناصر > التصاميم وصفًا موجزًا عند تمرير مؤشر الماوس فوق إحدى السمات.

تلميح الأدوات الذي يتضمّن مستندات حول إحدى خصائص CSS

تحتوي تلميحة الأدوات أيضًا على رابط مزيد من المعلومات ينقلك إلى مرجع CSS على شبكة مطوّلي Mozilla بشأن هذه السمة.

إذا كنت تعرف CSS جيدًا، قد تجد تلميحات الأدوات مزعجة. لإيقافها كلها، ضَع علامة في المربّع مربّع اختيار عدم العرض.

لإعادة تفعيلها، ضَع علامة في المربّع بجانب عرض تلميح الأداة الخاص بمستندات CSS ضمن الإعدادات > الإعدادات المفضّلة > العناصر > مربّع اختيار.الإعدادات.

مشكلة في Chromium: 1401107

إتاحة التداخل في CSS

تتعرّف الآن اللوحة العناصر > الأنماط على بنية التداخل في CSS وتطبّق الأنماط المتداخلة على العناصر الصحيحة.

مشكلة في Chromium: 1172985

وضع علامات logpoint ونقاط إيقاف مشروطة في "وحدة التحكّم"

في إطار مواصلة تحسين تجربة المستخدم في نقاط التوقف المحسّنة، تضع وحدة التحكّم الآن علامات على الرسائل التي يتم تشغيلها بواسطة نقاط التوقف:

تغييرات على طريقة عرض "وحدة التحكّم" الآن للرسائل التي يتم تشغيلها بواسطة نقاط التوقّف: باستخدام الرموز ورابط المصدر المناسب

توفّر لك وحدة التحكّم الآن روابط ثابتة مناسبة لنقاط التوقّف في ملفات المصدر بدلاً من نصوص VM<number> البرمجية التي ينشئها Chrome لتشغيل أي جزء من JavaScript على V8.

انقر على الرابط بجانب رسالة نقطة الإيقاف للانتقال مباشرةً إلى محرّر نقاط الإيقاف.

رابط العنصر الثابت بجانب رسالة نقطة تسجيل الدخول التي تفتح أداة تعديل نقاط التوقّف

مشكلة في Chromium: 1027458

تجاهُل النصوص البرمجية غير ذات الصلة أثناء تصحيح الأخطاء

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

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

قوائم السياق لمجلد ونص برمجي يتضمّنان خيارات ذات صلة بالتجاهل

يتم عرض جميع النصوص البرمجية والمجلدات المُدرَجة في قائمة التجاهل باللون الرمادي في شجرة الملفات.

تظهر النصوص البرمجية والمجلدات المدرَجة في قائمة التجاهل باللون الرمادي، ويمكنك إخفاؤها باستخدام خيار تجريبي في القائمة المنسدلة &quot;خيارات إضافية&quot;.

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

مشكلة في Chromium: 883325.

بدأ إيقاف أداة "تحليل JavaScript" نهائيًا

منذ الإصدار 58 من Chrome، خطّط فريق "أدوات مطوّري البرامج" لإيقاف أداة JavaScript Profiler نهائيًا، وأن يطلب من مطوّري Node.js وDeno استخدام لوحة الأداء لإنشاء ملفات تعريف لأداء وحدة المعالجة المركزية في JavaScript.

يبدأ إصدار DevTools هذا (112) عملية إيقاف أداة تحليل JavaScript نهائيًا على أربع مراحل. تعرض لوحة أداة تحليل JavaScript الآن بانر التحذير ذي الصلة.

بانر الإيقاف النهائي في أعلى أداة Profiler

بدلاً من Profiler، استخدِم لوحة الأداء لإنشاء ملفات تعريف لوحدة المعالجة المركزية.

يمكنك الاطّلاع على مزيد من المعلومات وتقديم الملاحظات في RFC وcrbug.com/1354548 ذي الصلة.

مشكلة في Chromium: 1417647

محاكاة التباين المخفَّض

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

خيار التباين المخفَّض الذي تم اختياره ضمن وظيفة &quot;محاكاة مشاكل الرؤية&quot;

يُرجى العِلم أنّه تم تعديل خيارات القائمة لتوضيح نوع حساسية الألوان التي تمثّلها الخيارات.

باستخدام "أدوات مطوّري البرامج"، يمكنك العثور على جميع مشاكل التباين وحلّها في آنٍ واحد. لمزيد من المعلومات، اطّلِع على تسهيل قراءة موقعك الإلكتروني.

مشاكل Chromium: 1412719 و1412721

Lighthouse 10

تعمل لوحة Lighthouse الآن بالإصدار 10.0.1 من Lighthouse. لمزيد من التفاصيل، يُرجى الاطّلاع على الميزات الجديدة في الإصدار 10.0.1 من Lighthouse.

للتعرّف على أساسيات استخدام لوحة Lighthouse في "أدوات مطوّري البرامج"، يمكنك الاطّلاع على Lighthouse: تحسين سرعة الموقع الإلكتروني.

Lighthouse > الإعدادات. > مربّع اختيار فارغ تم الآن إيقاف شريط التنقّل القديم تلقائيًا. يستخدم هذا الخيار إعدادات Lighthouse القديمة في وضع التنقّل.

تم إيقاف وضع التنقّل القديم.

يستخدم الإصدار 10 من Lighthouse الآن جهاز Moto G Power التلقائي للمحاكاة. أضافت "أدوات المطوّرين" هذا الجهاز إلى الإعدادات. الإعدادات > الأجهزة.

جهاز Moto G Power في قائمة الأجهزة

مشكلة في Chromium: 772558.

تحذير في "وحدة التحكّم" لإزالة معالج جلب عامل الخدمة الذي لا ينفّذ أي عملية

يتجاهل الإصدار 112 من Chrome معالِجات جلب مشغّل الخدمات التي لا تنفّذ أي عملية لأنّها قد تبطئ عملية التنقّل بدون أي فائدة. لم يعُد من الضروري توفير معالجات من هذا النوع لكي يكون موقعك الإلكتروني مؤهلاً كـ تطبيق ويب تقدّمي.

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

معالج جلب لا ينفّذ أي عملية والتحذير المقابل في &quot;وحدة التحكّم&quot;

مشكلة في Chromium: 1347319

لمحات متنوّعة

في ما يلي بعض الإصلاحات الجديرة بالذكر في هذا الإصدار:

  • تعرض اللوحة المصادر > نقاط التوقف الآن مسارات ملفات مميّزة بجانب أسماء الملفات الغامضة (1403924).
  • يصنّف قسم الرئيسي في الرسم البياني الشعلة ضِمن لوحة الأداء الآن CpuProfiler::StartProfiling على أنّه Profiler Overhead (1358602).
  • تحسين ميزة الإكمال التلقائي في "أدوات مطوّري البرامج":
    • المصادر: عمليات إكمال متسقة لأي كلمة (1320204).
    • وحدة التحكّم: يختار Arrow down الاقتراح الأول وتتلقّى الاقتراحات تلميحات Tab (1276960).
  • أضافت "أدوات مطوّري البرامج" نقطة فاصلة لأداة معالجة الحدث تتيح لك الإيقاف المؤقت عند فتح نافذة "نافذة ضمن النافذة" للمستند (1315352).
  • أعدّت "أدوات مطوّري Chrome" حلاً بديلاً يعرض بشكل صحيح عناصر Vue2 webpack على أنّها JavaScript (1416562).
  • تم تحسين اسم إعداد وحدة التحكّم ليصبح: توسيع رسائل console.trace() تلقائيًا. (1139616).

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

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

التواصل مع فريق Chrome DevTools

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر متعلّق بـ "أدوات مطوّري البرامج".

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

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