كيف يمكنك تحسين سير عملك باستخدام وحدة تحكم JavaScript

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

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

ما هي لوحة التحكم؟

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

• عرض سجل الأخطاء والتحذيرات التي تحدث على صفحة الويب.
• تفاعل مع صفحة الويب باستخدام أوامر JavaScript.
• تصحيح أخطاء التطبيقات واجتياز DOM مباشرة في المتصفح.
• فحص وتحليل نشاط الشبكة

في الأساس ، يمكّنك من كتابة وإدارة ومراقبة JavaScript مباشرة داخل متصفحك.

Console.log و Console.error و Console.warn و Console.info

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

Console.group

تسمح لك هذه الطريقة بتجميع سلسلة من console.logs (ولكن أيضًا معلومات الخطأ وما إلى ذلك) ضمن مجموعة يمكن طيها. بناء الجملة بسيط جدًا حقًا: فقط أدخل كل console.logما نريد تجميعه قبل a console.group()(أو console.groupCollapsed()إذا أردنا أن يتم إغلاقه افتراضيًا). ثم أضف console.groupEnd()في النهاية لإغلاق المجموعة.

ستبدو النتائج كما يلي:

وحدة التحكم

منذ أن اكتشفت console.tableتغيرت حياتي. يعد عرض مصفوفات JSON أو مصفوفات JSON كبيرة جدًا داخل console.logتجربة مرعبة. و console.tableيسمح لنا تصور هذه الهياكل داخل جدول جميلة حيث يمكننا تسمية الأعمدة وتمريرها كمعلمات.

النتيجة رائعة ومفيدة للغاية في التصحيح:

Console.count و Console.time و Console.timeEnd

هذه الطرق الثلاث هي سكين الجيش السويسري لكل مطور يحتاج إلى التصحيح. و console.countالتهم والمخرجات عدد المرات التي count()تم الاستناد على نفس الخط وبنفس التسمية. و console.timeيبدأ جهاز ضبط الوقت مع الاسم المحدد كمعلمة إدخال، ويمكن تشغيل ما يصل إلى 10،000 توقيت متزامنة على صفحة معينة. بمجرد البدء ، نستخدم مكالمة console.timeEndلإيقاف المؤقت وطباعة الوقت المنقضي على وحدة التحكم.

سيبدو الإخراج كما يلي:

Console.trace و Console.assert

تقوم هذه الطرق ببساطة بطباعة تتبع مكدس من النقطة التي تم استدعاؤها. تخيل أنك تقوم بإنشاء مكتبة JS وتريد إبلاغ المستخدم بمكان حدوث الخطأ. في هذه الحالة ، يمكن أن تكون هذه الطرق مفيدة للغاية. و console.assertيشبه console.traceولكن سيتم طباعة فقط إذا كان الشرط مرت لم يمر.

كما نرى ، الناتج هو بالضبط ما ستظهره لنا React (أو أي مكتبة أخرى) عندما ننشئ استثناءً.

حذف كافة لوحات المفاتيح؟

غالبًا ما يجبرنا استخدام لوحات المفاتيح على التخلص منها. أو في بعض الأحيان ننسى بناء الإنتاج (ولا نلاحظها إلا بالخطأ بعد أيام وأيام). بالطبع ، لا أنصح أي شخص بإساءة استخدام وحدات التحكم حيث لا تكون هناك حاجة إليها (يمكن حذف وحدة التحكم في مقبض إدخال التغيير بعد أن ترى أنها تعمل). يجب أن تترك سجلات الأخطاء أو سجلات التتبع في وضع التطوير لمساعدتك على التصحيح. أستخدم Webpack كثيرًا ، سواء في العمل أو في مشاريعي الخاصة. تسمح لك هذه الأداة بحذف جميع وحدات التحكم التي لا تريد أن تبقى (حسب النوع) من بناء الإنتاج باستخدام uglifyjs-webpack-plugin؟

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

التكوين بسيط حقًا وهو يبسط العمل ، لذا استمتع بوحدة التحكم (ولكن لا تسيء استخدامها!)

إذا أعجبك المقال ، يرجى التصفيق وتابعني :)

تشك وتنزعج؟

تابع آخر الأخبار والنصائح على Facebook