أشياء ربما لم تكن تعرفها يمكنك فعلها باستخدام وحدة تحكم مطوري Chrome

يأتي Chrome مزودًا بأدوات مطور مدمجة. يأتي هذا مع مجموعة متنوعة من الميزات ، مثل العناصر والشبكة والأمان. اليوم ، سنركز بنسبة 100٪ على وحدة تحكم JavaScript الخاصة بها.

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

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

1. حدد عناصر DOM

إذا كنت معتادًا على استخدام jQuery ، فأنت تعلم مدى أهمية محددات $ ('. class') و $ ('# id'). يختارون عناصر DOM بناءً على الفئة أو المعرّف المرتبط بهم.

ولكن عندما لا يكون لديك وصول إلى jQuery في DOM ، فلا يزال بإمكانك فعل الشيء نفسه في وحدة تحكم المطور.

$ ('tagName') $ ('. class') $ ('# id') و $ ('. class #id') مكافئتان لـ document.querySelector (''). يؤدي هذا إلى إرجاع العنصر الأول في DOM الذي يطابق المحدد.

يمكنك استخدام $$ ('tagName') أو $$ ('. class') - لاحظ علامات الدولار المزدوجة - لتحديد جميع عناصر DOM بناءً على محدد معين. هذا يضعهم أيضًا في مصفوفة. يمكنك المضي قدمًا مرة أخرى وتحديد عنصر معين بينهم عن طريق تحديد موضع هذا العنصر في المصفوفة.

على سبيل المثال ، $$ ('. className') سيمنحك كل العناصر التي تحتوي على className ، و $$ ('. className') [0] و $$ ('. className') [1] سيمنحك العنصر الأول والثاني على التوالي.

2. تحويل المستعرض الخاص بك إلى محرر

كم مرة تساءلت عما إذا كان بإمكانك تعديل بعض النصوص في المتصفح نفسه؟ الجواب نعم ، يمكنك تحويل متصفحك إلى محرر نصوص. يمكنك إضافة نص إلى وإزالة النص من أي مكان في DOM.

ليس عليك فحص العنصر وتعديل HTML بعد الآن. بدلاً من ذلك ، انتقل إلى وحدة تحكم المطور واكتب ما يلي:

document.body.contentEditable=true 

هذا سيجعل المحتوى قابلاً للتحرير. يمكنك الآن تعديل أي شيء وكل شيء تقريبًا في DOM.

3. البحث عن الأحداث المرتبطة بعنصر في DOM

أثناء تصحيح الأخطاء ، يجب أن تكون مهتمًا بالعثور على مستمعي الأحداث المرتبطين بعنصر في DOM. تسهل وحدة تحكم المطورين العثور عليها.

يُرجع getEventListeners ($ ('selector')) مصفوفة من الكائناتالتي تحتوي على جميع الأحداث المرتبطة بهذا العنصر. يمكنك توسيع الكائنلعرض الأحداث:

للعثور على المستمع لحدث معين ، يمكنك القيام بشيء مثل هذا:

getEventListeners($(‘selector’)).eventName[0].listener 

سيعرض هذا المستمعالمرتبطة بحدث معين. هنا eventName [0] هو مصفوفة تسرد جميع الأحداث لحدث معين. فمثلا:

getEventListeners($(‘firstName’)).click[0].listener 

… سيعرض المستمع المرتبط بحدث النقر لعنصر بالمعرف "الاسم الأول".

4. مراقبة الأحداث

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

  • ستراقب monitorEvents ($ ('selector')) جميع الأحداث المرتبطة بالعنصر باستخدام محددك ، ثم تسجيلها في وحدة التحكم بمجرد إطلاقها. على سبيل المثال ، سوف يسجل monitorEvents ($ ('# firstName')) جميع الأحداث المرتبطة بالعنصر بمعرف "firstName".
  • monitorEvents ($ ('selector') ، 'eventName') سيسجل حدثًا معينًا مرتبطًا بعنصر. يمكنك تمرير اسم الحدث كوسيطة للدالة. سيؤدي هذا إلى تسجيل حدث معين فقط مرتبط بعنصر معين. على سبيل المثال ، سوف تقوم monitorEvents ($ ('# firstName')، 'click') بتسجيل جميع أحداث النقر المرتبطة بالعنصر بالمعرف "firstName".
  • monitorEvents ($ ('selector') ، ['eventName1' ، 'eventName3' ،….]) سيسجل أحداثًا متعددة وفقًا لمتطلباتك الخاصة. بدلاً من تمرير اسم حدث واحد كوسيطة ، قم بتمرير مصفوفة من السلاسل التي تحتوي على جميع الأحداث. على سبيل المثال ، monitorEvents ($ ('# firstName')، ['click'، 'focus']) سوف يسجل حدث النقر ويركز الأحداث المرتبطة بالعنصر مع المعرف "firstName".
  • unmonitorEvents ($ ('selector')): سيؤدي هذا إلى إيقاف مراقبة الأحداث وتسجيلها في وحدة التحكم.

5. أوجد وقت تنفيذ كتلة التعليمات البرمجية

تحتوي وحدة تحكم JavaScript على وظيفة أساسية تسمى console.time ('labelName') والتي تأخذ اسم التسمية كوسيطة ، ثم تبدأ المؤقت. هناك وظيفة أساسية أخرى تسمى console.timeEnd ('labelName') والتي تأخذ أيضًا اسم التسمية وتنهي المؤقت المرتبط بهذا الملصق المحدد.

فمثلا:

console.time('myTime'); //Starts the timer with label - myTimeconsole.timeEnd('myTime'); //Ends the timer with Label - myTime//Output: myTime:123.00 ms

يمنحنا سطرا الكود أعلاه الوقت المستغرق من بدء الموقت إلى إنهاء المؤقت.

يمكننا تحسين هذا لحساب الوقت المستغرق لتنفيذ كتلة من التعليمات البرمجية.

على سبيل المثال ، لنفترض أنني أريد العثور على الوقت المستغرق لتنفيذ حلقة. يمكنني أن أفعل مثل هذا:

console.time('myTime'); //Starts the timer with label - myTimefor(var i=0; i < 100000; i++){ 2+4+5;}console.timeEnd('mytime'); //Ends the timer with Label - myTime//Output - myTime:12345.00 ms

6. رتب قيم المتغير في جدول

لنفترض أن لدينا مجموعة من الكائنات تشبه ما يلي:

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

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

لكن هذا يصعب فهمه عندما تزداد الخصائص. لذلك ، للحصول على تمثيل واضح للمتغير ، يمكننا عرضها في جدول.

يمثل console.table (variableName) المتغير وجميع خصائصه في هيكل جدولي. إليك ما يبدو عليه هذا:

7. افحص عنصرًا في DOM

يمكنك فحص عنصر مباشرة من وحدة التحكم:

  • فحص ($ ('selector')) سيفحص العنصر الذي يتطابق مع المحدد وينقلك إلى علامة تبويب العناصر في Chrome Developer Tools. على سبيل المثال ، فحص ($ ('# firstName')) سيفحص العنصر بالمعرف "firstName" ويفحص ($ ('a') [3]) سيفحص عنصر الإرساء الرابع لديك في DOM الخاص بك.
  • يمكن أن يساعدك 0 دولار ، 1 دولار ، 2 دولار ، وما إلى ذلك في الحصول على العناصر التي تم فحصها مؤخرًا. على سبيل المثال ، يمنحك $ 0 آخر عنصر DOM تم فحصه ، بينما يمنحك $ 1 آخر عنصر DOM تم فحصه.

8. قائمة خصائص العنصر

إذا كنت تريد سرد جميع خصائص عنصر ما ، فيمكنك القيام بذلك مباشرة من وحدة التحكم.

يقوم dir ($ ('selector')) بإرجاع كائن بكل الخصائص المرتبطة بعنصر DOM الخاص به. يمكنك توسيع هذه لعرضها بمزيد من التفاصيل.

9. استرجع قيمة النتيجة الأخيرة

يمكنك استخدام وحدة التحكم كآلة حاسبة. وعند القيام بذلك ، قد تحتاج إلى متابعة عملية حسابية بأخرى. فيما يلي كيفية استرداد نتيجة عملية حسابية سابقة من الذاكرة:

$_ 

إليك ما يبدو عليه هذا:

2+3+49 //- The Answer of the SUM is 9$_9 // Gives the last Result$_ * $_81 // As the last Result was 9Math.sqrt($_)9 // As the last Result was 81$_9 // As the Last Result is 9

10. امسح وحدة التحكم والذاكرة

إذا كنت تريد مسح وحدة التحكم وذاكرتها ، فما عليك سوى كتابة:

clear()

ثم اضغط على إدخال. هذا كل ما في الامر.

هذه مجرد أمثلة قليلة لما يمكنك القيام به باستخدام وحدة تحكم JavaScript في Chrome. آمل أن تجعل هذه النصائح حياتك أسهل قليلاً.

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