يمكن أن يكون تصحيح الأخطاء مملاً وأكثر إحباطًا عندما لا يمكنك بسهولة تحديد موقع الخطأ. تم تعيين أدوات مطور Chrome 106 (devtools) لتبسيط عملية تصحيح الأخطاء ، مما يجعلها أسهل وأسرع.

يمكنك الآن فرز الملفات بسهولة ، وتحسين البحث ، وإخفاء البرامج النصية لجهات خارجية ، والوصول إلى تقارير الأداء المتعمقة ، وأكثر من ذلك بكثير التي تمت مناقشتها في هذه المقالة. تعد أدوات التطوير هذه ضرورية ، خاصة للمطورين الذين يعملون مع أطر عمل JavaScript مثل Angular و React و Vue.js ، الذين لديهم الآن وحدة تحكم تفاعلية ومبسطة لتصور وتصحيح الأخطاء كودهم.

دعونا نلقي نظرة فاحصة على بعض هذه الميزات الجديدة:

للاستفادة الكاملة من التحديثات الجديدة على Chrome 106 ، قم بتنزيل Chrome كناري, ديف ، أو بيتا الإصدارات كمتصفح التطوير الافتراضي الخاص بك. سيكون لديك حق الوصول إلى أحدث أدوات المطور التي تتيح اختبار واجهات برمجة تطبيقات منصة الويب ، والتعرف بسرعة على المشكلات أو الأخطاء الموجودة على موقعك لضمان حصول المستخدمين لديك على أفضل تجربة للعملاء.

1. تم تجميع الملفات حسب المؤلف / المنشور

يمكنك الآن الانتقال مباشرة إلى مكونات التطبيق الخاص بك عن طريق تجميع الملفات في

instagram viewer
تأليف / نشر على ال مصدر لوحة. اذهب إلى المصدر> 3-dot-menu> Group by Authored / Deployed. الآن ، عندما تفتح الملفات ، يمكنك فقط رؤية الملفات المنشورة على اللوحة.

في إصدارات Chrome السابقة ، كانت جميع ملفات التعليمات البرمجية المصدر مرئية في ملف ملاحة لوحة ، مما يجعل من الصعب العثور على ملف واحد.

2. البحث عن ملف مبسط

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

هذا التحديث هو إصدار devtools لتحسين البحث على متصفحات الويب باستخدام أوراق الغش في بحث Google. لتكوين هذا الإعداد ، انتقل إلى 3-dot-menu> إخفاء مصادر قائمة التجاهل.

نصوص الطرف الثالث تملأ وحدة التحكم الخاصة بك؟ أضاف Chrome 106 ملحق قائمة التجاهل في خريطة المصدر لتمكينك من إخفاء البرامج النصية التي تم إنشاؤها تلقائيًا بواسطة أطر العمل والجهات الخارجية الأخرى.

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

4. تتبعات مكدس مفصلة

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

قامت Google بتهيئة ملف console.createTask () طريقة في كروم 106. تمكن هذه الطريقة الأطر من أداء تتبعات المكدس على وحدة التحكم. تصحيح أخطاء JavaScript باستخدام devtools سهل مثل تصحيح أخطاء CSS باستخدام الكروم.

5. تتبع التفاعلات في لوحة الأداء

تتبع التفاعلات الجديدة في أداء لوحة لتحديد مشكلات الاستجابة المحتملة لتطبيقك. في Chrome 106 ، تظهر جميع التفاعلات في مسار التفاعلات بعد العملية. يُظهر المسار مصدر التفاعلات ومعرفاتهم. يساعد التتبع على تحديد المصدر واعتراضه وفقًا لذلك.

6. رؤى توقيت LCP في لوحة الأداء

ال أكبر رسم مضمون تفاصيل توقيت (LCP) متاحة الآن على لوحة رؤى الأداء. LCP يعد مقياسًا حيويًا لأداء الويب يُبلغ عن وقت عرض الصور أو كتل النص التي تستغرقها للتحميل على صفحة الويب. 2.5 ثانية أو أقل هي نتيجة أداء جيدة.

لرؤية الأفكار انتقل إلى لوحة الأداء> 3-dot-menu-more tolls> performance. عندما تعيد تشغيل أحد التسجيلات ، فإن ملف تفاصيل ستظهر لوحة توقيت التحميل.

تحديثات إضافية في Chrome 106

تشمل التحسينات الأخرى على Chrome 106 ما يلي:

  • يمكنك تصدير تسجيلات البرنامج النصي الخاص بك دون مشاكل من ملف مسجل لوحة. توجد مشكلة في زر التصدير في الإصدارات السابقة.
  • لديك الآن منتقي الألوان في الأنماط عناصر جزء SVG.
  • يمكنك تحديد البرامج النصية المشوهة للتخطيط في ملف رؤى الأداء لوحة.
  • يمكنك عرض مسارات خطوط الويب LCP بتنسيق رؤى الأداء لوحة.

قد تعمل هذه الميزات على تحسين كيفية استخدامك لأدوات تطوير المتصفح.

ما تحصل عليه من Chrome 106

أحدث التحسينات على devtools في Chrome 106 تجعل عملية تصحيح الأخطاء أسرع. تسهل التحديثات الجديدة تصور العمليات من خلال وحدة تحكم مبسطة وديناميكية يسمح لك بإخفاء الملفات وتعطيل البرامج النصية والتسجيل والحصول على عرض متعمق لتطبيقك متى التصحيح.

ستمكنك إضافات Chrome 106 من إدارة تطبيقك وتحسين أدائه. انطلق واستمتع بهذه المزايا من خلال التحديث إلى أحدث إصدار من Chrome 106.