🐄 👩🏼‍🚒 🧞 ميزات وحدة تحكم Chrome التي ربما لم تستخدمها من قبل 🧓🏽 🤷🏻 ⚱️

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

وظيفة المراقبة

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

function traceFunc (arg) { }
monitor(traceFunc)

يتم traceFuncتمرير الدالة monitorإلى الدالة كوسيطة. الآن ، عندما traceFuncيتم استدعاء الوظيفة ، سوف نتلقى إشعارًا بذلك (مرة أخرى ، في وحدة التحكم):

traceFunc(90)
function traceFunc was called with arguments: 90

استخدام وظيفة الشاشة

وظيفة غير مراقب

unmonitorتسمح لك الوظيفة بتعطيل مراقبة وظيفة سبق مراقبتها باستخدام الوظيفة monitor. من أجل التوقف عن مراقبة الوظيفة traceFunc، نستخدم البناء التالي:

unmonitor(traceFunc)

إذا اتصلت بعد ذلك traceFunc، فلن يتم عرض أي إشعارات في وحدة التحكم.

traceFunc(90)

لا يؤدي استدعاء وظيفة تم تعطيل مراقبتها إلى إخراج معلومات حول هذا الاستدعاء إلى وحدة التحكم

وظيفة MonitorEvents

يبدو مخطط استخدام الوظيفة monitorEventsكما يلي:

monitorEvents(object,[,events])

تتيح لك هذه الوظيفة تتبع حدوث أحداث الكائن وعرض معلومات حول هذه الأحداث في وحدة التحكم.

لنفترض أن هناك زرًا على الصفحة وصفه بالرمز التالي:

<button id="button">Button</button>

لنبدأ في تتبع حدث clickهذا الزر:

monitorEvents(button, "click")

إذا بعد بدء مراقبة حدث ما ، clickانقر فوق الزر - سيتم عرض معلومات حول الحدث في وحدة التحكم.

الزر والبدء في مراقبة الأحداث الخاصة به انقر فوق يمكنك

مراقبة العديد من الأحداث بتمريرmonitorEventsمصفوفة كوظائف للوسيطة الثانية:

monitorEvents(button, ["click", "mouseover"])

الآن تحت الملاحظة الأحداث clickو mouseover. ونتيجة لذلك ، تتلقى وحدة التحكم رسائل حول النقر على الزر ، وأنه تم وضعها فوق الماوس.

مراقبة أحداث أزرار النقر والتمرير بالماوس

يمكنك تنظيم مراقبة مجموعات الأحداث:

monitorEvents(button, ["click", "mouse"])

السلسلة mouseهي معرف عالمي لمجموعة من الأحداث المتعلقة بالماوس. على سبيل المثال - mouseover، mousemove، mouseout. كما في حالة الاشتراك في أحداث معينة ، سيؤدي الاشتراك في معرف حدث عالمي إلى إصدار إشعارات عند حدوث مثل هذه الأحداث.

مراقبة زر الأحداث المتعلقة بالضغط عليها وبالماوس

بالطبع ، الوظيفةmonitorEventsقابلة للتطبيق على الكائنات الأخرى ، وليس فقط الأزرار. وينطبق الشيء نفسه على الأحداث التي يمكن مشاهدتها معها. هذه ليستclickأحداث الماوسفقط.

دالة UnmonitorEvents

unmonitorEventsتسمح لك الوظيفة بإلغاء مراقبة أحداث الكائن التي بدأتها الوظيفة monitorEvents.

لنفترض أننا قررنا تتبع نقرات الأزرار:

monitorEvents(button, "click")

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

unmonitorEvents(button, "click")

الآن توقف النظام عن مراقبة حدث clickالزر.

بعد رفض مراقبة أحداث النقرات ، تتوقف التقارير حول النقرات على زر للوصول إلى وحدة التحكم

$ _ البناء

$_يسمح لك التصميم بالوصول إلى نتيجة التعبير الأخير الذي تم تنفيذه في وحدة التحكم.

افترض أننا أدخلنا تعبيرًا في وحدة التحكم 2 + 2ونفذناه. لقد أعطتنا 4.

ثم دخلنا ونفذنا التعبير 3*2. لقد أعطتنا 6.

اتضح أننا قمنا بعمل تعبيرين ، أحدثها 3*2. إذا دخلت الآن في وحدة التحكم $_وانقر فوق Enter- يتم عرض نتيجة التعبير 3*2، أي - 6.

باستخدام البناء $ _

وظيفة النسخ

copyتسمح لك الوظيفة بنسخ البيانات المنقولة إليها إلى الحافظة.

لننفذ ، على سبيل المثال ، الأمر التالي:

copy("nnamdi")

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

برنامج نسخ البيانات إلى الحافظة

وظيفة واضحة

clearتسمح لك الوظيفة بمسح محفوظات تنفيذ الأوامر في وحدة التحكم. هذه الوظيفة مفيدة في الحالات التي تكون فيها وحدة التحكم ممتلئة بالمواد المختلفة المعروضة فيها ، وترغب في إزالة كل شيء معروض فيها.

وظيفة المفاتيح

تقوم الدالة keys(object)، مثل الطريقة Object.keys، بإرجاع صفيف من مفاتيح خصائص الكائن:

const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)

استخدام وظيفة المفاتيح

دالة القيم

الوظيفة valuesمشابهة للطريقة Object.values. تقوم بإرجاع صفيف من قيم خاصية الكائن.

const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)

استخدام دالة القيم

دالة GetEventListeners

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

افترض أن الصفحة تحتوي على هذا الرمز:

<button id="button" 
    onclick="clickHandler()" 
    onmousedown="mousedownHandler()" 
    onmouseover="mouseoverHandler()">
        Button
</button>
<script>
    function clickHandler() {
    }
    function mousedownHandler() {
    }
    function mouseoverHandler() {
    }
</script>

يصف هذا الرمز على الزر وثلاثة أحداث: click، onmousedownو onmouseover. الأحداث معالجات المحال clickHandler، mousedownHandlerو mouseoverHandler.

اتصل بالأمر التالي في وحدة التحكم:

getEventListeners(button)

للحصول على معلومات حول زر معالجات الأحداث

كائن، صدر بعد الأمرgetEventListeners(button)، الخصائص المتوفرةclick،mousedownوmouseoverالتي تتطابق مع أسماء معالجات الأحداث التي تعيين زر الأسماء. تحتوي الخصائص على صفائف من الكائنات تحتوي على معلومات تفصيلية حول الأحداث.

الدالة $

تقوم الدالة $بإرجاع أول عناصر DOM التي تطابق المحدد الذي تم تمريره إليها. يبدو مخطط استدعاء الوظيفة على النحو التالي:

$(elementName, [,node])

افترض أن الصفحة بها الكود التالي:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

يصف هذا الرمز أربعة أزرار.

دعنا ننفذ الأمر التالي:

$("button")

يوضح ما يلي ما يدخل إلى وحدة التحكم بعد تنفيذها.

نتيجة الأمر $ ("button") .

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

على سبيل المثال ، من أجل معرفة معرف الزر ، يمكنك استخدام هذا البناء:

$("button").id

توضيح معرف الزر

باستخدام الوظيفة$، يمكنك تحديد عقدة DOM ، العنصر الأول الذي نهتم به.

افترض الأزرارButton2،Button3ومنButton4المثال السابق يتم وضعها في عنصر<div>:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
    <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
    <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
    <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

لتحديد الزر الأول من الأزرار المتداخلة <div>، يمكنك استخدام الأمر التالي:

$("button", document.querySelector("div"))

الوصول إلى عنصر متداخل في عنصر آخر

كما ترى ، فإنه يقوم الآن$بإرجاع زرButton2، لأن هذا هو العنصر الأولbuttonالمتداخل في العنصر<div>

الدالة $$

$$تعمل الوظيفة بنفس الوظيفة المذكورة أعلاه $. لكنها تُرجع جميع العناصر المطابقة. يطلق عليه مثل هذا:

$$(element, [,node])

افترض أن هناك أربعة أزرار على الصفحة ، كما في الأمثلة السابقة.

اتصل بالأمر التالي:

$$("button")

استخدام الدالة $$

بعد المكالمة$$، كما هو موضح في الشكل السابق ، لدينا مجموعة من العناصر تحت تصرفناbutton.

يمكن أيضًا تحديد العناصر من العنصر المحدد عند استدعاء$$عقدة DOM. على سبيل المثال ، إذا كانت الصفحة تحتوي على عدة أزرار مضمنة<div>، فيمكننا تحديد كل هذه الأزرار ، استخدم هذا التصميم:

$$("button", document.querySelector("div"))

استخدام الدالة $$ لتحديد العناصر المتداخلة في عنصر آخر

ملخص

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

القراء الأعزاء! ما أدوات وحدة تحكم Chrome التي تستخدمها كثيرًا؟

ميزات وحدة تحكم Chrome التي ربما لم تستخدمها من قبل