تعد وحدة تحكم كروم واحدة من أقوى الأدوات لمطوري مواقع الويب. وهو جزء من أدوات المفتش الويب جوجل كروم التي تسمح لك لتحليل وتصحيح رمز بنية وأنماط صفحة ويب.
في هذه المقالة ، سوف ننظر في كيفية استخدام وحدة تحكم كروم لقراءة وتعديل هتمل ، كس ، وجافا سكريبت. سوف نتعلم كيفية حساب قيم خصائص كس ، وتغيير الأنماط في الوقت الحقيقي ، والتقاط أخطاء جافا سكريبت.
توفر وحدة التحكم كروم العديد من الوظائف ، مثل البحث عن العناصر ، وعرض شجرة دوم ، وتحليل الأنماط المعروضة ، وأكثر من ذلك بكثير. كما يسمح لك لتنفيذ شفرة جافا سكريبت مباشرة في المتصفح ورؤية النتائج في الوقت الحقيقي.
يمكن استخدام وحدة التحكم كروم تبسيط كبير في تطوير وتصحيح المواقع ، كما أنه يوفر أدوات وقدرات قوية للعمل مع التعليمات البرمجية.
في الأقسام التالية ، سوف نلقي نظرة مفصلة على كل وظيفة وميزة من وحدة التحكم كروم بحيث يمكنك استخدامها بشكل كامل في عملك وتحسين أداء وجودة تطبيقات الويب الخاصة بك.
- ما هي وحدة التحكم كروم?
- لماذا أحتاج إلى وحدة تحكم كروم?
- كيفية قراءة وحدة التحكم كروم
- أنواع الرسائل في وحدة التحكم
- تطبيق المرشحات في وحدة التحكم
- كيفية استخدام وحدة تحكم كروم
- 1. فتح وحدة تحكم كروم
- 2. إخراج الرسالة
- 3. استخدام أوامر وحدة التحكم
- 4. باستخدام لوحة الشبكة
- 5. تصحيح جافا سكريبت
- تصحيح شفرة جافا سكريبت
- قياس وقت التنفيذ
- كيفية التصحيح باستخدام وحدة تحكم كروم
- تحديد نقاط التوقف
- سؤال وجواب
- لماذا أحتاج إلى وحدة تحكم كروم?
- كيف أقرأ الرسائل في وحدة التحكم كروم?
- كيف يمكنني استخدام وحدة التحكم كروم لتصحيح شفرة جافا سكريبت?
- كيف يمكنني تغيير عناصر الصفحة باستخدام وحدة التحكم كروم?
ما هي وحدة التحكم كروم?
وحدة التحكم كروم هو أداة المطور لمتصفح الويب جوجل كروم الذي يسمح للمطورين لتصحيح واختبار رمز صفحة ويب. ويوفر قدرات للعمل مع جافا سكريبت ، كس ، هتمل وغيرها من التقنيات المستخدمة من قبل تطوير الشبكة.
وحدة التحكم كروم هو نافذة تفاعلية حيث يمكنك تنفيذ شفرة جافا سكريبت ، فضلا عن نتائج الإخراج والأخطاء. يمكن استخدامه للتحقق من بناء جملة الكود وتصحيح الأخطاء وإصلاحها ، وكذلك لتحليل تشغيل صفحة الويب.
وحدة التحكم كروم يسمح للمطورين لأداء المهام المختلفة. على سبيل المثال ، يمكنك استخدام وحدة التحكم لعرض رسائل التشخيص أو بيانات السجل ، وكذلك تقديم طلبات إلى الخادم وعرض النتيجة. بالإضافة إلى ذلك ، توفر وحدة التحكم طرقا مختلفة لتحليل ومعالجة شجرة دوم للصفحة.
وحدة التحكم كروم يمكن أن تكون مفيدة لكل من المطورين المحترفين والمبتدئين. يوفر العديد من الأدوات المفيدة التي ستساعد في تحسين كفاءة التطوير وتحسين جودة صفحات الويب.
لماذا أحتاج إلى وحدة تحكم كروم?
وحدة التحكم كروم هي واحدة من أدوات المطور الرئيسية التي يقدمها متصفح جوجل كروم. إنها أداة قوية تسمح للمطورين بتصحيح واختبار تطبيقات الويب الخاصة بهم ، وكذلك تحليل تشغيل صفحة الويب.
المزايا الرئيسية لوحدة التحكم كروم:
جافا سكريبت التصحيح: تسمح وحدة التحكم للمطورين بتنفيذ شفرة جافا سكريبت على الصفحة ، بالإضافة إلى تتبع الأخطاء وإصلاحها. يسمح لك بإخراج المتغيرات ، وظائف الاتصال ، تحليل المجموعات ، إلخ. توفر وحدة التحكم أيضا القدرة على تتبع الأخطاء وعرض معلومات الخطأ ذات الصلة ، مما يجعل تصحيح شفرة جافا سكريبت أكثر كفاءة.
هتمل و كس تحليل الهيكل: وحدة التحكم كروم يسمح لك لعرض مريح وتحليل هيكل هتمل و كس من صفحة ويب. انها تسمح لك لأداء عمليات مختلفة مع شجرة دوم ، وتغيير أنماط العناصر ، والتحقق من قواعد كس تنطبق على العناصر المحددة.
تحسين الأداء: توفر وحدة التحكم أدوات متنوعة لتحليل تشغيل صفحة الويب ، مثل تحديد ملامح الأداء وتحليل استخدام الذاكرة وعرض الأحداث وتحميل الموارد وما إلى ذلك. تساعد هذه الأدوات على تحسين وتحسين أداء تطبيقات الويب.
وحدة التحكم كروم هو أداة المطور القوية التي تساعد على تبسيط وتحسين عملية تطوير وتصحيح الأخطاء ، وتحليل تطبيقات الويب.
كيفية قراءة وحدة التحكم كروم
وحدة التحكم كروم هو أداة المطور القوية التي تسمح لك لعرض رسائل الخطأ والتحذيرات والسجلات وغيرها من المعلومات المفيدة حول تشغيل صفحة ويب أو تطبيق. قراءة وحدة التحكم كروم يمكن أن تساعدك في عملية التصحيح وتحسين التعليمات البرمجية الخاصة بك. في هذا القسم ، سنلقي نظرة على بعض الطرق الأساسية لقراءة وحدة تحكم كروم.
1. فتح وحدة تحكم كروم
لفتح وحدة التحكم كروم ، انقر بزر الماوس الأيمن على أي جزء من الصفحة وحدد استكشاف البند. ثم انتقل إلى علامة التبويب وحدة التحكم. يمكنك أيضا فتح وحدة التحكم عن طريق الضغط على اختصار لوحة المفاتيح "السيطرة+ التحول + ي" (ويندوز) أو "كمد + الخيار + ي" (ماك).
2. أنواع الرسائل في وحدة التحكم
في وحدة التحكم كروم ، يمكنك ان ترى عدة أنواع من الرسائل:
- .
- يسمح لك بإخراج التحذيرات إلى وحدة التحكم.
- يسمح لك بإخراج الأخطاء إلى وحدة التحكم.
3. قراءة الرسائل في وحدة التحكم
لقراءة الرسائل في وحدة التحكم ، ما عليك سوى التمرير لأسفل الشاشة لمشاهدة أحدث الإدخالات. يمكن أن تحتوي الرسائل على معلومات حول الملف وسطر التعليمات البرمجية حيث تم استدعاء وظيفة إخراج الرسالة.
4. تصفية الرسائل
يمكنك أيضا تصفية الرسائل في وحدة التحكم كروم لتبسيط عملية القراءة والبحث عن إدخالات محددة. انقر فوق رمز التصفية بجوار حقل الإدخال في وحدة التحكم وحدد نوع الرسائل التي تريد عرضها.
5. تجميع الرسائل
. سيتم عرض جميع الرسائل بين المكالمات إلى هذه الوظائف في مجموعة ذات مسافة بادئة.
6. الجداول في وحدة التحكم
. فإنه يأخذ مجموعة من الكائنات أو مجموعة من المصفوفات وإخراجها كجدول.
7. باستخدام التسميات
لإنشاء وعرض التسميات.
في الختام ، تعد قراءة وحدة تحكم كروم مهارة مهمة للمطور. يسمح لك بالعثور بسرعة على الأخطاء وتحليل عمل الكود الخاص بك وتحسين عملية التطوير. استخدام الأساليب المذكورة أعلاه لجعل استخدام أكثر كفاءة من وحدة التحكم كروم.
أنواع الرسائل في وحدة التحكم
وحدة تحكم المطور في متصفح كروم يوفر القدرة على عرض أنواع مختلفة من الرسائل. يساعد هذا المطورين على تتبع الأخطاء وتصحيح التعليمات البرمجية والحصول على معلومات حول تقدم تطبيقاتهم. في هذه المقالة ، سنلقي نظرة على الأنواع الرئيسية للرسائل التي يمكن عرضها في وحدة تحكم كروم.
- وحدة التحكم.سجل ('هذه رسالة إعلامية');
- الأخطاء:
وحدة التحكم.استثناء ('استثناء: القسمة على صفر');
رسائل من الشبكة:
- توفر الرسائل الواردة من الشبكة معلومات حول تنزيلات الموارد والطلبات واستجابات الخادم. يمكن أن تكون مفيدة لتتبع مشاكل الشبكة أو تحسين الأداء.
- وحدة التحكم.سجل ('طلب الخادم اكتمل بنجاح');
- هنا قمنا بمراجعة الأنواع الرئيسية للرسائل التي يمكن عرضها في وحدة تحكم كروم. يمكن أن تكون مفيدة لتصحيح التعليمات البرمجية والعثور على الأخطاء وتحليل أداء التطبيق. تعرف على كيفية استخدام هذه الأنواع من الرسائل بشكل صحيح وستساعدك في تطوير تطبيقات الويب.
- تطبيق المرشحات في وحدة التحكم
- وحدة تحكم المطور في متصفح جوجل كروم يوفر القدرة على تطبيق مرشحات مختلفة ، مما يجعل من الاسهل للعمل مع التصحيح وتحليل البيانات. تتيح لك الفلاتر في وحدة التحكم العثور بسرعة على السجلات أو الأخطاء أو الكائنات الضرورية على الصفحة.
- يمكن أن يكون تطبيق المرشحات في وحدة تحكم كروم مفيدا في العديد من السيناريوهات ، على سبيل المثال:
ابحث عن الأخطاء والاستثناءات في السجلات;
تحليل عملية شفرة جافا سكريبت;
عرض نوع معين من السجلات (وحدة التحكم.سجل ، وحدة التحكم.خطأ ، إلخ.);
تصحيح أحداث صفحة الويب.
لتطبيق عامل التصفية في وحدة التحكم ، يجب عليك إدخال كلمة رئيسية في شريط البحث أو استخدام أوامر خاصة. فيما يلي بعض الأمثلة:
وحدة التحكم.سجل ('نص الرسالة') - تصفية حسب وحدة التحكم.سجل الرسائل;
وحدة التحكم.خطأ ('خطأ') — تصفية الخطأ;
- وحدة التحكم.تحذير ('تحذير') - تصفية حسب التحذيرات;
- وحدة التحكم.مسح () - مسح وحدة التحكم;
- filter ('محدد') — تصفية حسب العناصر باستخدام مسج.
يمكنك أيضا دمج عدة عوامل تصفية باستخدام رموز العملية " / "(أو) ، " ، " (و)،"!"(لا). على سبيل المثال ، مرشح "وحدة التحكم.سجل,!وحدة التحكم.خطأ " سيسمح لك بإخراج وحدة التحكم فقط.تسجيل الرسائل واستبعاد وحدة التحكم.أخطاء خطأ.
ميزة أخرى مفيدة هي استخدام مرشح الحدث-" - مراقب-الأحداث". يسمح لك بتتبع جميع الأحداث على الصفحة ، مما يبسط تصحيح الأخطاء وتحليل تطبيق الويب. لتنشيطه ، أدخل الأمر " مونيتوريفنتس (نافذة ، 'نوع الحدث')". على سبيل المثال ، " مونيتوريفنتس(نافذة ، 'انقر') " سوف تسمح لك لتتبع جميع النقرات على الصفحة.
- كيفية استخدام وحدة تحكم كروم
- 1. فتح وحدة تحكم كروم
- انقر بزر الماوس الأيمن على صفحة الويب.
حدد خيار" استكشاف العنصر".
تفتح علامة تبويب المستكشف وحدة التحكم الموجودة في الجزء السفلي من الشاشة.
- توفر وحدة التحكم كروم القدرة على عرض الرسائل المختلفة ، وهو أمر مفيد لتصحيح الأخطاء وتحليل التعليمات البرمجية. يتم استخدام الطرق التالية لهذا الغرض:
- : إخراج رسالة إلى وحدة التحكم.
- : إخراج رسالة خطأ إلى وحدة التحكم.
وحدة التحكم.تحذير()
: إخراج تحذير إلى وحدة التحكم.
3. استخدام أوامر وحدة التحكم
- وحدة التحكم كروم كما يسمح لك لتنفيذ الأوامر المختلفة مباشرة في وحدة التحكم. تتضمن بعض الأوامر المفيدة ما يلي:
- $()
- : تحديد العناصر على الصفحة باستخدام محدد كس.
$$()
: تحديد جميع العناصر الموجودة على الصفحة التي تطابق محدد كس.
وحدة التحكم.واضح()
- : مسح وحدة التحكم.
- 4. باستخدام لوحة الشبكة
- توفر وحدة التحكم كروم أيضا لوحة معلومات الشبكة التي تسمح لك لمراقبة طلبات الشبكة ، وتحميل الملفات ، وتحليل مرات تحميل الصفحة.
- لفتح لوحة الشبكة ، تحتاج إلى القيام بما يلي:
افتح وحدة تحكم كروم.
انتقل إلى علامة التبويب" الشبكة".
أعد تحميل الصفحة لعرض جميع طلبات الشبكة.
5. تصحيح جافا سكريبت
وحدة التحكم كروم كما يسمح لك لتصحيح شفرة جافا سكريبت ، الذي يبسط عملية تصحيح الخطأ. للقيام بذلك ، استخدم علامة التبويب "المصادر" في وحدة تحكم كروم.
لفتح علامة التبويب "المصادر" ، تحتاج إلى القيام بما يلي:
افتح وحدة تحكم كروم.
انتقل إلى علامة التبويب" المصادر".
حدد ملف جافا سكريبت الذي تريد تصحيحه.
تعيين نقطة توقف على السطر المطلوب من التعليمات البرمجية وتنفيذ التعليمات البرمجية.
توفر وحدة التحكم كروم قدرات واسعة لتحليل ، وتصحيح الأخطاء ، واختبار صفحات الويب. استخدم هذه النصائح والميزات لتبسيط عملية التطوير وجعل عملك أكثر كفاءة وإنتاجية.
تصحيح شفرة جافا سكريبت
يعد تصحيح شفرة جافا سكريبت خطوة مهمة في تطوير تطبيقات الويب. يسمح لك باكتشاف الأخطاء وإصلاحها في الكود ، وكذلك تحليل تشغيله لتحسين الأداء.
واحدة من أدوات التصحيح جافا سكريبت الأكثر شعبية هي وحدة تحكم المطور في جوجل كروم. باستخدامه ، يمكنك إخراج الرسائل وعرض محتويات المتغيرات وتحليل مكدس الاستدعاءات وغير ذلك الكثير.
وحدة التحكم.يتم استخدام وظيفة السجل () لعرض الرسائل في وحدة التحكم. يمكنك تمرير أي القيم التي تريد عرضها عليه. على سبيل المثال:
وحدة التحكم.سجل ('مرحبا ، العالم!');
وحدة التحكم.سجل (42);
وحدة التحكم.سجل([1 ، 2 ، 3]);
وظيفة مفيدة للغاية هي وحدة التحكم.خطأ () ، والذي يسمح لك بإخراج رسائل الخطأ. مثال الاستخدام:
وحدة التحكم.خطأ (حدث خطأ!');
وحدة التحكم.خطأ ('فشل تحميل البيانات');
يمكنك استخدام وحدة التحكم.دير () لتحليل حالة المتغيرات. تعرض هذه الوظيفة الكائنات وخصائصها كقائمة تفاعلية. مثال:
كونست شخص = {
الاسم:'جون',
العمر: 30,
المدينة: 'نيويورك'
};
وحدة التحكم.دير (شخص);
بالإضافة إلى ذلك ، تسمح لك وحدة التحكم بتحليل مكدس الاستدعاءات — تسلسل الوظائف التي أدت إلى الخطأ. للقيام بذلك ، استخدم وحدة التحكم.تتبع () وظيفة. مثال الاستخدام:
وظيفة فو () {
بار();
}
شريط الوظائف () {
وحدة التحكم.تتبع();
}
فو();
يمكنك أيضا تشغيل شفرة جافا سكريبت في وحدة التحكم مباشرة أثناء تصحيح الأخطاء. للقيام بذلك ، استخدم وحدة التحكم.تقييم () وظيفة. يسمح لك بالتحقق من تشغيل الأجزاء الفردية من الكود أو إجراء التجارب في الوقت الفعلي. مثال:
وحدة التحكم.تقييم('2 + 2'); // سيعود 4
وحدة التحكم.تقييم ('الرياضيات.عشوائي ()') ؛ / / إرجاع رقم عشوائي من 0 إلى 1
وحدة تحكم المطور في جوجل كروم يقدم العديد من الميزات الأخرى لتصحيح جافا سكريبت ، مثل وضع نقاط التوقف ، وتتبع الحدث ، وتحليل الأداء ، وأكثر من ذلك. استخدم إمكانيات وحدة التحكم لتطوير تطبيقات الويب الخاصة بك بشكل أكثر كفاءة.
قياس وقت التنفيذ
وحدة التحكم في متصفح كروم يوفر وسيلة مريحة لقياس وقت تنفيذ رمز معين أو وظيفة. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، لتحسين الأداء أو لمقارنة فعالية الأساليب المختلفة لحل مشكلة ما.
لقياس وقت تنفيذ التعليمات البرمجية في وحدة التحكم كروم ، يمكنك استخدام وحدة التحكم.الوقت () ووحدة التحكم.نهاية الوقت () وظائف. أنها تعمل معا وتسمح لك لقياس الوقت بين نقطتين رمز. للقيام بذلك ، استخدم وحدة التحكم.الوقت () وظيفة قبل استدعاء قسم من التعليمات البرمجية التي تحتاج إلى قياس ، وبعد تنفيذ التعليمات البرمجية كاملة ، استخدم وظيفة وحدة التحكم.نهاية الوقت ().
مثال الاستخدام:
وحدة التحكم.الوقت ("قياس وقت التنفيذ");
- بعد استدعاء وحدة التحكم.تايم إند () وظيفة ، وحدة التحكم سيتم عرض وقت تنفيذ التعليمات البرمجية في ميلي ثانية. يتيح لك ذلك تقييم مدى فعالية هذا الجزء من الكود وتحديد الأماكن الممكنة للتحسين.
- مثال الاستخدام:
- فيما يلي بعض الطرق المفيدة لاستخدام وحدة تحكم كروم لتصحيح الأخطاء:
- إخراج الرسالة: باستخدام
- تحليل القيم المتغيرة: يمكنك استخدام الوظيفة
وحدة التحكم.سجل()
للتحقق من قيم المتغيرات في مراحل مختلفة من تنفيذ التعليمات البرمجية. على سبيل المثال:
وحدة التحكم.سجل (متغير);
سيساعدك هذا على فهم القيم التي يأخذها المتغير وتحت أي ظروف.
تنفيذ التعليمات البرمجية: في وحدة التحكم كروم ، يمكنك تنفيذ شفرة جافا سكريبت مباشرة على صفحة ويب. فقط أدخل الرمز في وحدة التحكم واضغط على إدخال. هذا مفيد بشكل خاص عندما تريد اختبار جزء من التعليمات البرمجية بسرعة دون الحاجة إلى تضمينه في الكود المصدري للصفحة.
قياس الأداء: وحدة تحكم كروم يوفر أدوات مختلفة لقياس أداء صفحة ويب. على سبيل المثال ، يمكنك استخدام الوظيفة
وحدة التحكم.الوقت()
و
وحدة التحكم.نهاية الوقت()
لقياس وقت تنفيذ أقسام معينة من التعليمات البرمجية وتحسين الأداء.
وحدة تحكم كروم هي أداة تصحيح أخطاء قوية يمكنها تبسيط تطوير صفحات الويب بشكل كبير. يوفر للمطور القدرة على التحكم في الكود وتتبع الأخطاء وتحسين الأداء.
تحديد نقاط التوقف
نقطة التوقف هي آلية تصحيح أخطاء خاصة تسمح لك بإيقاف تنفيذ البرنامج مؤقتا في موقع معين. لديه وحدة التحكم كروم أيضا القدرة على تعيين نقاط التوقف لتصحيح شفرة جافا سكريبت.
يتيح لك تحديد نقاط التوقف مراقبة تنفيذ الكود والتحقق من قيم المتغيرات في مراحل مختلفة من البرنامج. هذا هو أداة مفيدة جدا لإيجاد وتصحيح الأخطاء في شفرة جافا سكريبت.
في وحدة تحكم كروم ، يمكن تعيين نقاط التوقف في النص المصدر لملف جافا سكريبت ، وكذلك في علامة التبويب "المصادر" في أي سطر من التعليمات البرمجية. عند الوصول إلى نقطة التوقف ، يتم تعليق البرنامج تلقائيا.
لتعيين نقطة توقف في النص المصدر لملف جافا سكريبت ، افتح الملف المطلوب في علامة التبويب "المصادر" وانقر على العلامة الرقمية الموجودة على يسار السطر حيث تريد تعيين نقطة التوقف. بعد ذلك ، ستظهر نقطة حمراء تشير إلى نقطة التوقف المحددة.
إذا كنت ترغب في تعيين نقطة توقف أثناء تنفيذ البرنامج ، فافتح علامة التبويب "المصادر" ، وابحث عن ملف جافا سكريبت المطلوب وانقر على سطر التعليمات البرمجية المقابل. ستظهر نقطة حمراء تشير إلى نقطة التوقف المحددة.
بعد تعيين نقطة توقف وتنفيذ البرنامج إلى تلك النقطة ، يتم تعليق تنفيذ البرنامج ، ويمكنك تحليل الحالة الحالية للبرنامج ، وعرض قيم المتغيرات وتنفيذ إجراءات تصحيح الأخطاء الأخرى.
عند الوصول إلى نقطة التوقف ، يمكنك متابعة تشغيل البرنامج بالنقر فوق الزر" تشغيل " في الجزء السفلي من شريط الأدوات الأيمن ، أو تنفيذ خطوة تصحيح الأخطاء (خطوة ، خطوة إلى ، خطوة للخروج) للتنقل عبر الكود.