كيفية استخدام وحدة تحكم مطور JavaScript

الدروس التعليمية
JavaScript

المقدمة

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

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

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

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

العمل مع وحدة التحكم في المتصفح

معظم متصفحات الويب الحديثة التي تدعم HTML وXHTML القائمة على المعايير ستوفر لك الوصول إلى وحدة تحكم المطور حيث يمكنك العمل مع JavaScript في واجهة مشابهة للقشرة الطرفية. توضح هذه القسم كيفية الوصول إلى وحدة التحكم في Firefox و Chrome.

Firefox

لفتح وحدة التحكم على الويب في Firefox، انتقل إلى قائمة ☰ في الزاوية العلوية اليمنى بجوار شريط العنوان.

حدد أدوات أخرى. بعد ذلك، انقر فوق عنصر أدوات تطوير الويب.

بمجرد فعل ذلك، سيتم فتح علبة أدوات في الجزء السفلي من نافذة المتصفح الخاصة بك:

يمكنك أيضًا الوصول إلى وحدة التحكم على الويب باستخدام اختصار لوحة المفاتيح CTRL + SHIFT + K على نظامي التشغيل Linux و Windows، أو COMMAND + OPTION + K على نظام macOS.

الآن بعد أن قمت بالوصول إلى وحدة التحكم، يمكنك البدء في العمل بها باستخدام JavaScript.

Chrome

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

سيتم فتح لوحة حيث يمكنك النقر على وحدة التحكم في شريط القائمة العلوي لإظهار وحدة تحكم JavaScript إذا لم تكن مظللة بالفعل:

يمكنك أيضًا الدخول إلى وحدة التحكم في JavaScript باستخدام اختصار لوحة المفاتيح CTRL + SHIFT + J في Linux أو Windows، أو COMMAND + OPTION + J في macOS، والذي سيضيف التركيز مباشرة إلى وحدة التحكم.

الآن بعد دخولك إلى وحدة التحكم، يمكنك البدء في العمل داخلها باستخدام JavaScript.

العمل في وحدة التحكم

داخل وحدة التحكم، يمكنك كتابة وتنفيذ كود JavaScript.

ابدأ بتنبيه يقوم بطباعة سلسلة نصية Hello, World!:

  1. alert("Hello, World!");

بمجرد الضغط على مفتاح ENTER بعد سطر JavaScript الخاص بك، سيظهر نافذة تنبيه في متصفحك:

لاحظ أن وحدة التحكم ستقوم أيضًا بطباعة نتيجة تقييم التعبير، والتي ستقرأ على أنها undefined عندما لا يعيد التعبير شيئًا بشكل صريح.

بدلاً من وجود تنبيهات منبثقة تحتاج إلى النقر خارجها، يمكنك العمل مع جافا سكريبت عن طريق تسجيلها في وحدة التحكم باستخدام console.log.

لطباعة سلسلة Hello, World!، اكتب ما يلي في وحدة التحكم:

  1. console.log("Hello, World!");

في وحدة التحكم، ستحصل على النتيجة التالية:

Output
Hello, World!

يمكنك أيضًا إجراء عمليات حسابية في وحدة التحكم:

  1. console.log(2 + 6);



Output
8

يمكنك أيضًا تجربة بعض العمليات الحسابية الأكثر تعقيدًا:

  1. console.log(34348.2342343403285953845 * 4310.23409128534);



Output
148048930.17230788

بالإضافة إلى ذلك، يمكنك العمل على عدة أسطر مع المتغيرات:

  1. let today = new Date();

  2. console.log("Today's date is " + today);



Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

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

توفر وحدة التحكم في جافا سكريبت لك مساحة لتجربة كود جافا سكريبت في الوقت الحقيقي من خلال السماح لك باستخدام بيئة مشابهة لواجهة الطرفية الشلية.

العمل مع ملف HTML

يمكنك العمل ضمن سياق ملف HTML أو صفحة مقترحة ديناميكيًا في وحدة التحكم. يتيح لك ذلك فرصة تجربة كود جافا سكريبت ضمن سياق HTML و CSS و JavaScript الموجود.

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

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

index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

إذا قمت بحفظ الملف HTML أعلاه، وقمت بتحميله إلى متصفحك المفضل، سيتم عرض صفحة فارغة بعنوان تاريخ اليوم في المتصفح.

افتح وحدة التحكم وابدأ في العمل بواسطة JavaScript لتعديل الصفحة. ابدأ باستخدام JavaScript لإدراج عنوان في الHTML.

  1. let today = new Date();

  2. document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

ستتلقى الناتج التالي في وحدة التحكم:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

يجب أن تكون صفحتك مشابهة للتالي:

يمكنك تعديل نمط الصفحة، مثل لون الخلفية:

  1. document.body.style.backgroundColor = "lightblue";



Output
"lightblue"

وكذلك لون النص على الصفحة:

  1. document.body.style.color = "white";



Output
"white"

الآن يجب أن تكون صفحتك تظهر شيئًا مشابهًا لهذا:

من هنا، يمكنك إنشاء عنصر فقرة <p>:

  1. let p = document.createElement("P");

بعد إنشاء هذا العنصر، يمكنك المضي قدمًا لإنشاء عقد نص يمكن إضافته إلى الفقرة:

  1. let t = document.createTextNode("Paragraph text.");

أضف عقد النص بإلحاقه بالمتغير p:

  1. p.appendChild(t);

وأخيرًا، ألحق p بعنصر فقرته <p> وعقد النص الملحق به في المستند:

  1. document.body.appendChild(p);

بمجرد الانتهاء من هذه الخطوات، سيتضمن ملف HTML الخاص بك index.html العناصر التالية:

يوفر لك الوحدة المعالجة المركزية مساحة لتجربة تعديل صفحات HTML، ولكن من المهم أن تضع في اعتبارك أنك لا تقوم بتغيير مستند HTML نفسه عندما تقوم بالأمور على الوحدة المعالجة المركزية. بمجرد إعادة تحميل الصفحة، ستعود إلى مستند فارغ.

فهم أدوات التطوير الأخرى

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

DOM — نموذج الكائنات في المستند

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

DOM هو شجرة من الكائنات وتعرض عناصر HTML ضمن عرض تسلسلي. يمكن مشاهدة شجرة DOM ضمن اللوحة المفتش في Firefox أو اللوحة العناصر في Chrome.

هذه الأدوات تمكنك من فحص وتحرير عناصر DOM وتتيح لك أيضًا تحديد الـ HTML المتعلقة بجزء معين من صفحة معينة. يمكن لـ DOM أن يخبرك ما إذا كانت قطعة النص أو الصورة تحتوي على سمة ID ويمكن أن يساعدك في تحديد قيمة تلك السمة.

الصفحة التي قمت بتعديلها أعلاه ستظهر لك عرضًا للـ DOM مشابهًا لهذا قبل إعادة تحميل الصفحة:

بالإضافة إلى ذلك، سترى أنماط CSS في لوح جانبي أو أسفل لوحة DOM، مما يتيح لك رؤية الأنماط التي يتم استخدامها داخل مستند HTML أو عبر ورقة أنماط CSS. على سبيل المثال، لاحظ ما تتضمنه أنماط جسم الصفحة الخاصة بك في فاحص Firefox:

لتحرير عنصر DOM على الهواء مباشرة، انقر نقرًا مزدوجًا على العنصر المحدد وقم بإجراء التغييرات. على سبيل المثال، يمكنك تعديل علامة <h1> وجعلها علامة <h2>.

مثلما هو الحال مع الوحدة النمطية، إذا قمت بإعادة تحميل الصفحة ستعود إلى الحالة الأصلية المحفوظة لمستند HTML.

الشبكة

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

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

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

تصميم متجاوب

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

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

اطّلع على المزيد حول وضع التصميم الاستجابي في Firefox أو وضع الجهاز في Chrome لتعرف كيف يمكنك الاستفادة من هذه الأدوات لضمان وصول أكثر عدالة إلى تقنيات الويب.

الاستنتاج

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

للمزيد من المعلومات حول JavaScript، يمكنك قراءة حول أنواع البيانات، أو مكتبة jQuery أو D3.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console