مرحبا يا هابر! أقدم لكم ترجمة المقال "كيفية استخدام وحدة تحكم JavaScript: تجاوز console.log ()" بواسطة Yash Agrawal.واحدة من أسهل الطرق لتصحيح الأخطاء في JavaScript هي إخراج المواد باستخدام console.log. ولكن هناك العديد من الطرق الأخرى التي توفرها وحدة التحكم التي يمكن أن تساعد في تحسين التصحيح.لنبدأ.حالة الاستخدام الأساسية هي إخراج سلسلة أو مجموعة من كائنات JavaScript. بسيطة جداconsole.log('Is this working?');
تخيل الآن سيناريو عندما يكون لديك مجموعة من الكائنات التي تحتاج إلى إخراجها إلى وحدة التحكم.const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };
الطريقة الأكثر سهولة للإخراج هي ببساطة وحدة التحكم (المتغير) عدة مرات. تصبح المشكلة أكثر وضوحًا عندما نرى كيف يتم عرضها في وحدة التحكم.
كما ترون ، أسماء المتغيرات غير مرئية ، وهي ليست مريحة للغاية. يمكن حل ذلك من خلال دمج جميع المتغيرات في وحدة تحكم واحدة. ({foo، bar}). كما أنه يقلل من عدد أسطر blog.log في الكود الخاص بنا.جدول وحدة التحكم ()
يمكننا اتخاذ الخطوة التالية بوضع كل هذا في جدول لجعله أكثر قابلية للقراءة. عندما يكون لديك كائنات ذات خصائص مشتركة أو مصفوفة كائنات ، استخدم console.table (). يمكننا هنا استخدام console.table ({foo، bar}) وتعرض وحدة التحكم:
console.group ()
يمكن استخدامه عندما تريد تجميع أو دمج العناصر المقابلة معًا لتتمكن من قراءة السجل بسهولة.يمكنك أيضًا استخدامه عندما يكون لديك العديد من عبارات السجل داخل دالة ، وتريد أن تكون قادرًا على رؤية النطاق المقابل لكل عبارة بوضوح.على سبيل المثال ، إذا قمت بتسجيل بيانات المستخدم:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
console.group('Address');
console.log('Street: 123 Townsend Street');
console.log('City: San Francisco');
console.log('State: CA');
console.groupEnd();
console.groupEnd();
يمكنك أيضًا استخدام console.groupCollapsed () بدلاً من console.group () إذا كنت تريد طي المجموعات افتراضيًا. ستحتاج إلى النقر فوق زر المقبض على اليسار للتوسيع.console.warn () & console.error ()
بناءً على الموقف ، لجعل وحدة التحكم الخاصة بك أكثر قابلية للقراءة ، يمكنك إضافة سجلات باستخدام console.warn () أو console.error (). يوجد أيضًا console.info () ، الذي يعرض الرمز "i" في بعض المتصفحات.
يمكنك الذهاب إلى أبعد من ذلك بإضافة طريقتك الخاصة. يمكنك استخدام التوجيه٪ c لإضافة نمط إلى أي عبارة سجل. يمكن استخدام هذا للتمييز بين مكالمات API وأحداث المستخدم وما إلى ذلك.console.log('%c Auth ‘, 'color: white; background-color: #2274A5’, 'Login page rendered');
console.log('%c GraphQL ','color: white; background-color: #95B46A', 'Get user details');
console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details’);
يمكنك أيضًا تغيير حجم الخط ونمطه وعناصر CSS الأخرى.
console.trace ()
يقوم console.trace () بطباعة تتبع المكدس إلى وحدة التحكم ويعرض كيفية خروج الرمز عند نقطة معينة. هناك طرق معينة ترغب في الاتصال بها مرة واحدة فقط ، على سبيل المثال ، الحذف من قاعدة البيانات. يمكن استخدام console.trace () للتأكد من أن الرمز يتصرف بالطريقة التي نريدها.وحدة التحكم. time ()
شيء آخر مهم عندما يتعلق الأمر بتطوير الواجهة الأمامية هو أن الشفرة يجب أن تكون سريعة. يسمح برنامج console.time () بمزامنة عمليات معينة في الكود للاختبار.let i = 0;
console.time("While loop");
while (i < 1000000) { i++;}console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
نأمل أن تكون هذه المقالة قد قدمت بعض المعلومات حول الطرق المختلفة لاستخدام وحدة التحكم.