إذا كنت منخرطًا في برمجة الويب ، فهذا يعني أنك لست بحاجة إلى التحدث عن مدى أهمية تصحيح الأخطاء في عملك. غالبًا ما يتم استخدام المكتبات الخارجية لكتابة البيانات إلى السجلات أو تنسيقها أو عرضها على الشاشة ، دون مراعاة حقيقة أن المبرمجين لديهم أوامر JavaScript للعمل مع وحدات التحكم المضمنة في المتصفحات. وهذه المفاتيح لديها قدرات أكثر خطورة مما قد تبدو للوهلة الأولى.
ربما يكون أول شيء يفكر فيه كثير من الناس عندما يقولون "وحدة التحكم" هو الأمر
console.log() . ومع ذلك ، فهي واحدة فقط من العديد من هذه الفرق. المادة ، التي ننشر ترجمتها اليوم ، مخصصة لميزات العمل مع وحدة تحكم JavaScript.
ما هي الكونسول؟
وحدة تحكم JavaScript هي آلية مدمجة في المستعرضات الحديثة تدعم أدوات التطوير المضمنة في واجهة سطر الأوامر. باستخدام وحدة التحكم ، يمكن للمطور القيام بما يلي:
- عرض سجلات الأخطاء والتحذيرات التي تحدث على صفحة الويب.
- تفاعل مع صفحة ويب باستخدام أوامر JavaScript.
- قم بتصحيح التطبيقات والعمل مع DOM مباشرة من المتصفح.
- التحقيق وتحليل نشاط الشبكة.
بشكل عام ، تمنح وحدة التحكم المطور القدرة على كتابة كود JavaScript مباشرة في المتصفح ، ومراقبة ما يحدث على الصفحات ، وإدارة هذه العمليات.
طرق console.log و console.error و console.warn و console.info
ربما تكون الأساليب الأكثر استخدامًا عند العمل مع وحدة التحكم هي
console.log() و
console.error() و
console.warn() و
console.info() . يمكنك تمرير معلمة واحدة أو أكثر لهذه الأساليب. يحسب النظام قيمة كل منها ويجمع كل النتائج في سلسلة ، يتم فصل أجزاء منها بمسافات. في حالة الكائنات أو المصفوفات ، تسمح لك هذه الأوامر بعرضها في شكل يسمح لك بعرض محتوياتها. إليك كيف تبدو.
استخدام أوامر مختلفة لإخراج البيانات إلى وحدة التحكمطريقة Console.group
تتيح لك طريقة
console.group() جمع سلسلة من المكالمات إلى
console.log() (بالإضافة إلى طرق أخرى مماثلة) في مجموعات يمكن طي محتوياتها وتوسيعها. يعد استخدام هذه الطريقة
console.group() بسيطًا للغاية: بعد استدعاء
console.group() (أو بعد
console.groupCollapsed() ، إذا كنت ترغب في عرض المجموعة على الفور) ، يلزمك إجراء جميع مكالمات
console.log() التي يجب تجميعها. بعد ذلك ، في نهاية مجموعة الأوامر التي تريد تجميعها ، تحتاج إلى وضع الأمر
console.groupEnd() . تأمل في مثال.
function doSomething(obj){ console.group('doSomething Profile'); const _data = new Date(); console.log('evaluating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}`; console.log('fullName: ', _fullName); const _id = Math.random(1); console.log('id: ', _id); console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"});
بعد تنفيذ جزء التعليمات البرمجية هذا ، سيصل ما يلي إلى وحدة التحكم.
تجميع البيانات في وحدة التحكم باستخدام طريقة console.group ()طريقة Console.table
بعد أن علمت بوجود طريقة
console.table() ، تغيرت حياتي إلى الأبد. على سبيل المثال ، يعد استخدام الأمر
console.log() العادي لإخراج كود JSON أو صفائف JSON الكبيرة بمثابة كابوس. تتيح لك طريقة
console.table() عرض هياكل البيانات المعقدة داخل جداول لطيفة ، والتي يمكن تسمية أعمدتها بأسماء عن طريق تمريرها كمعلمات (لا تدعم جميع المتصفحات هذه الميزة
console.table() ). هنا مثال للعمل مع هذا الفريق.
const typeOfConsole = [ {name:'log', type:'standard'}, {name:'info', type:'standard'}, {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]);
ما حدث ، ويبدو رائعا ، ويمكن أن يسهل التصحيح.
جدولة المخرجات باستخدام console.table ()طرق console.count و console.time و console.timeEnd
يمكن أن يطلق على أساليب
console.count() و
console.time() و
console.timeEnd() ما يشبه السكين السويسري لمطور يعمل في تطبيقات تصحيح الأخطاء. لذا ، تسمح لك طريقة
console.count() بحساب عدد مكالماتك الخاصة وعرضها في وحدة التحكم مع التسمية المحددة. تسمح لك طريقة
console.time() بتشغيل مؤقت مسمى (يتم تمرير الاسم إليها كمعلمة ، يمكن أن يصل عدد 10000 ساعة إلى صفحة واحدة). لإيقاف مؤقت معين ، يتم استخدام الأمر
console.timeEnd() مع تسمية المؤقت التي تم تمريرها كمعلمة. أوقفت المؤقت وعرض وقت عمله في وحدة التحكم. إليك كيفية استخدام هذه الأساليب.
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){ arr[i] = new Object(); const _type = (i % 2 === 0) ? 'even' : 'odd'; console.count(_type+'added'); } console.timeEnd('total');
وهنا نتيجة عمل هذا الرمز في وحدة التحكم.
باستخدام طرق console.count () و console.time () و console.timeEnd ()Console.trace وطرق وحدة التحكم
تتيح لك
console.trace() و
console.assert() إخراج معلومات المكدس من المكان الذي تم الاتصال بهما. تخيل أنك تطور مكتبة JS وتريد إخبار المستخدم بمكان حدوث الخطأ. في مثل هذه الحالة ، يمكن أن تكون هذه الطرق مفيدة للغاية. أسلوب
console.assert() مشابه لـ
console.trace() ، والفرق بين الاثنين هو أن
console.assert() البيانات فقط إذا لم يتم استيفاء الشرط الذي تم تمريرها إليها. إليك كيفية العمل بهذه الأساليب.
function lesserThan(a,b){ console.assert(a<b, { "message":"a is not lesser than b", "a": a, "b": b }); } lesserThan(6,5); console.trace("End");
من السهل ملاحظة أن الإخراج الناتج عن هذا الجزء من الكود يبدو وكأنه شيء مشابه سيبدو في رد فعل (أو في أي مكتبة أخرى) عندما يبلغ إطار العمل عن استثناء.
نتيجة استخدام الأمرين console.assert () و console.trace ()أوامر للعمل مع وحدة التحكم ورمز الإنتاج
هناك حاجة إلى أوامر للعمل مع وحدة التحكم في مرحلة تطوير التطبيقات وتصحيحها. هذا يعني أنه عندما يحين الوقت لإصدار المنتج ، يجب إزالة هذه الأوامر من التعليمات البرمجية. يمكنك ببساطة نسيانها ، وبعد مرور بعض الوقت بعد تجميع نسخة الإنتاج من المشروع ، لاحظ أن البرنامج يكتب شيئًا إلى وحدة التحكم عندما لا تكون هناك حاجة إليه. لا تقم بتحميل أجهزة الكمبيوتر ذات الأعمال غير الضرورية ، على الرغم من أنها تبدو غير مهمة مثل إخراج البيانات إلى وحدة التحكم. في الوقت نفسه ، مع الأخذ في الاعتبار حقيقة أن أوامر العمل مع وحدة التحكم يمكن أن تكون مفيدة أثناء وضع اللمسات الأخيرة على التطبيق ، فمن الأفضل عدم حذفها من التعليمات البرمجية المصدر للبرنامج بشكل دائم ، ولكن إزالتها فقط من إصدار الإنتاج الخاص بها. هنا ، ستأتي الأموال لتجميع المشاريع لمساعدتنا. لذلك ، أستخدم Webpack باستمرار ، سواء في العمل أو في مشاريعي الخاصة. تتيح لك هذه الأداة إزالة جميع الأوامر غير الضرورية للعمل مع وحدة التحكم (وهي قادرة على تمييزها عن الأوامر الأخرى) من تجميعات الإنتاج باستخدام
uglifyjs-webpack-plugin .
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // uglifyOptions: { // comments: false, compress: { // warnings: false, // drop_console: true }, } })] : [] }
هذا التكوين بسيط للغاية ، ولكنه يسهل العمل اليومي للمبرمج ويزيل مشكلة أوامر وحدة التحكم المنسية.
الملخص
في هذه المقالة ، تحدثنا عن بعض الأوامر المفيدة للعمل مع وحدة التحكم. وهي تسمح باستخدام أدوات تشكل جزءًا من المتصفحات الحديثة لحل العديد من المشكلات التي تصاحب تطوير وتصحيح تطبيقات JavaScript من جانب العميل.
أعزائي القراء! ما نوع أوامر العمل مع وحدة تحكم JavaScript التي تستخدمها؟
