كل ما تريد معرفته حول Developer Console

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

كيفية الوصول إلى Developer Console

أول الأشياء أولاً: دعنا نرى كيف يمكنك فتح وحدة تحكم مطوري المتصفح. إذا كنت من مستخدمي Firefox ، فما عليك سوى النقر فوق القائمة (الزاوية اليمنى العليا) والبحث عن خيار Web Developer ، كما ترى أدناه:

ثم حدد Web Console :

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

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

كيفية استخدام Developer Console

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

# 1 مستويات سجل مختلفة

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

في لقطة الشاشة السابقة ، على سبيل المثال ، نرى أن كائن console (كائن عام هدفه مساعدتنا في تصحيح التعليمات البرمجية) له طرق مختلفة لكتابة الرسائل في وحدة التحكم:

• debug log تظهر الرسائل العادية.
• تظهر info رسائل المعلومات. في Firefox يعرضون رمز "معلومات" بجوار الرسالة.
• يعرض warn تحذيرات ، وعادة ما يشير إلى مشكلة أو شيء غير صحيح تمامًا. عادة ما يتم تمييزه باللون الأصفر مع رمز تحذير.
• عادةً ما يتم حجز error لأشد الأخطاء جسامة (أي الأشياء التي فشلت بالفعل). يظهر باللون الأحمر ويطبع أيضًا تتبع المكدس (أي ، ما الوظيفة التي أدت إلى الخطأ وجميع المتصلين به).

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

# 2 مراقبة أوقات التنفيذ

في Agile ، غالبًا ما تسمع هذا: "اجعله يعمل ، اجعله جيدًا ، اجعله سريعًا." بعد كتابة بعض التعليمات البرمجية "لجعلها تعمل" ، ليس من المحتمل أن تكون النتيجة بطيئة وغير فعالة. عندما يحدث هذا ، من المهم تحديد مكان الاختناقات ومعالجتها.

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

إذا كنت تريد معرفة المدة التي يستغرقها جزء معين من التعليمات البرمجية للتشغيل ، فابدأ عداد الوقت في بداية الكود ( console.time ) وأوقفه ( console.timeEnd ) عند انتهاء الكود الخاص بك:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

عندما تصل timeEnd إلى الوقت ، سترى الوقت المستغرق للتشغيل:

 Timer: 655ms - timer ended

لاحظ أنه عندما نبدأ مؤقتًا ونوقفه ، فإننا نطلق عليه اسمًا (في المثال الخاص بي ، "Timer"). هذا لأنه يمكننا إنشاء أكبر عدد نريده من العدادات ، ولكل منها اسمها الخاص ، وتشغيلها جميعًا مرة واحدة.

# 3 عدادات تلقائية

إذا كنت مهتمًا بالتحكم في عدد عمليات تنفيذ أي وظيفة في التعليمات البرمجية الخاصة بك أو تسجيل عدد مرات تشغيل الحلقة ، فاستخدم console.count . في كل مرة يتم فيها تنفيذ الوظيفة ، ستحصل على سجل جديد في وحدة التحكم الخاصة بك بالقيمة الحالية للعداد:

# 4 كيفية تنسيق سجلاتك

السجلات هنا لمساعدتنا على فهم ما يحدث مع الكود الخاص بنا. لكن هذا ممكن فقط إذا كتبنا سجلات يمكننا فهمها لاحقًا ...

سلاسل النص

في بداية هذا المنشور ، تحدثت بإيجاز عن جميع طرق تسجيل console . الأمثلة التي شاركتها طبعت بعض النص العادي. وهذا هو البيان:

 console.log( 'Hello world!' );

طبع هذا النص:

 Hello world!

ماذا لو أردنا طباعة كائن بدلاً من ذلك؟ كذلك هذا:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

يصبح هذا:

ولكن ماذا لو أردنا تسجيل عدة أشياء؟ هل يتعين علينا استخدام مكالمات متعددة لـ console.log ؟ حسنًا ، الجواب لا ، ليس ضروريًا. يمكننا تسجيل كل ما نريد بمكالمة واحدة:

تجميع السجلات ...

عندما نبدأ في الحصول على الكثير من السجلات في كودنا (مثل ، على سبيل المثال ، هنا):

يمكن أن تكون النتيجة مربكة بعض الشيء لأن جميع السجلات يتم دمجها في دفق نصي واحد:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

لحسن الحظ ، يقدم كائن console طريقتين لحل هذه المشكلة: group and groupEnd . معهم ، يمكننا تجميع رسائل السجل لدينا. ما عليك سوى إنشاء المجموعات (على سبيل المثال ، مجموعة واحدة لكل وظيفة):

وسيظهرون مثل هذا:

الجداول

عندما نعمل مع مجموعات البيانات ، ليس من السهل دائمًا تصورها. على سبيل المثال ، تخيل أن لدينا قائمة بالعناصر مثل ما يلي:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

إذا قمنا console.log في تسجيلهم ، فهذا ما نحصل عليه:

وهو أمر جيد إلى حد ما ، حتى يكون لدينا المزيد من الكائنات مع المزيد من الحقول لكل منها. عند مواجهة هذا النوع من بنية البيانات ، أوصيك باستخدام console.table :

# 5 كيفية عرض الأنواع المعقدة بشكل صحيح (كائنات ومصفوفات)

أخيرًا ، أود أن أنهي منشور اليوم بشيء لا يعرفه الكثير من المطورين ... دعنا نقول ، على سبيل المثال ، أنك تعمل في مشروع وترغب في معرفة قيمة العنصر قبل التحديث وبعده. للقيام بذلك ، من المحتمل أن تقوم console.log بالمتغير قبل إجراء التغيير وبعد ذلك ، كما ترى في GIF التالية:

في المثال السابق ، نقوم بتسجيل كائن يحتوي على قيمة معينة على 1. ثم نقوم بتحديث القيمة إلى 200 ثم نقوم بتسجيل الكائن مرة أخرى. قد يتوقع المرء أن يظهر السجل الأول دائمًا القيمة الأصلية (1) ، لكن لاحظ كيف ، عندما نوسع الكائن ، فإنه يُظهر القيمة الجديدة 200. ماذا يحدث؟

بشكل أساسي ، تحتوي رسالة السجل على مرجع للكائن ، وبالتالي ، عندما نقوم بتوسيعها ، فإنها تُظهر لنا الكائن كما هو الآن وليس كما كان عند إنشاء السجل. لعنة التحور!

لحل هذه المشكلة ، ما عليك سوى إرسال نسخة إلى السجل (المكتبات مثل لوداش وطريقة cloneDeep الخاصة به تجعل هذا الأمر سهلاً للغاية). بهذه الطريقة ، سيكون الكائن الأول الذي يتم تسجيله نسخة لا يمكن تغييرها (لأنك لن يكون لديك مرجع لها):

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

Imagen destacada the Tim van der Kuip على Unsplash.