في البداية: في الواقع ، كنت أفكر فيما إذا كنت سأكتب هذا الشيء من قبل ، لأنه ليس من الصعب ، ولكن لماذا يسأل الكثير من الناس ، لا يسألون عن كيفية استخدام وحدة التحكم ، لكنهم لا يعرفون ما يمكن أن تفعله وحدة التحكم. إنهم يعلمون أيضًا أن هناك وحدة تحكم وأشياء أخرى ، لكنهم لا يعرفون سبب استخدامهم لسلسلة طويلة بدلاً من التنبيه لإخراج المعلومات. في أعينهم ، في حالة تأهب كافية. حسنًا ، أعترف أنني قد اشتكيت قليلاً ، لكنني أخطط فقط لتقديم المعرفة الأساسية للتصحيح في هذه السلسلة ، ولن تتضمن عميقًا للغاية ، لأن الأمور المتعمقة يتم دمجها مع المعرفة JS. إذا لم تكن قد وصلت إلى نفس المستوى من JS ، حتى لو علمك كيفية تصحيح الأخطاء ، أو كسر بعض المكونات الإضافية ، وما إلى ذلك ، فأنت لا تعرف ما أفعله. هدفي هو إخبارك وحدة التحكم والبدء في تصحيح الأخطاء. عليك أن تمشي على الطريق إلى الأمام.
بالطبع ، يرجى التعويم أو الشكوى. .
دليل سلسلة Debug JS:
في الواقع ، يعرف الأشخاص الذين يعرفون الويب هذا ، سواء كان الواجهة الأمامية أو الخلفية ، لكن الكثير من الناس يركزون فقط على عرض HTML وتعديل CSS ، ولم يستخدموا وحدة التحكم على الإطلاق.
ربما لا يعرف بعض المبتدئين أن هناك هذا الشيء. .
هناك الكثير من المعلومات حول هذا الشيء عبر الإنترنت ، لكنه لا يتحدث عن تصحيح الأخطاء ، فهو يقدم فقط كيفية استخدامه. .
سواء كان ذلك هو Chrome Firefox IE (8 أو أعلى الإصدار) أو 360 متصفح Sogou Quick Browser ، وما إلى ذلك ، ما عليك سوى الضغط على F12 لفتح وحدة التحكم.
تستخدم مقالتنا Chrome كمثال لشرح ذلك ، ولكن ليس لأنني أحب Chrome. . كل شخص لديه تفضيلاتهم الخاصة. .
ملاحظة: FF في الماضي ، كان كل شيء Firebug ، لكنه الآن أصلي.
الآن نضغط F12 لفتح وحدة التحكم وانقر على عنصر وحدة التحكم.
يمكنك رؤية الصورة الرمزية الخاصة بي وبعض خطوط النص ، ولكن لا يزال هناك بضعة أسطر من الأشياء أدناه. سوف نتجاهل ذلك في الوقت الحالي وسنشرح ذلك لاحقًا.
في الواقع ، بالنسبة إلى F12 ، فإن الأسماء الأكثر دقة هو أدوات المطورين ، ووحدة التحكم هي وحدة التحكم.
ملاحظة: كبرنامج تعليمي أساسي ، سأقدم فقط تصحيح الأخطاء لمصادر ومصادر. يرجى فهم الوظائف الأخرى بنفسك. .
انقر بزر الماوس الأيمن فوق قائمة Clear Console أو أدخل Clear () واضغط على Enter لمسح محتوى وحدة التحكم.
لنأخذ الخطوة الأولى لإخراج المعلومات باستخدام console.log.
أدخل console.log ("Hehe ..") و Console.log ("Hehe .." ، "Haha ..") على التوالي واضغط على Enter لرؤية نتيجة الإخراج على وحدة التحكم.
في الواقع ، إنها مجرد إخراج المعلومات ، إنها بسيطة للغاية. استخدمه بدلاً من التنبيه والوثيقة. الكتابة للتصحيح ، وسيصبح عملك سهلًا للغاية.
على سبيل المثال ، تصحيح رمز الحلقة ، ولكن هناك العشرات أو حتى مئات العناصر في الصفيف. إذا كنت في حالة تأهب ، فسوف تشعر بالجنون.
document.write ليس سيئًا أيضًا ، ولكن لإخراج الكائنات ، يمكنك فقط رؤية أشياء مثل [Object Object].
هذه مشكلة حقيقية يواجهها العديد من الأصدقاء الجدد.
إذا كنت تستخدم console.log بدلاً من مستند ALERT.WRITE لإخراج معلومات الكائن ، يمكنك توسيع هذا الكائن في وحدة التحكم لعرض معلومات محددة.
على سبيل المثال:
var arr = [{name: "nima" ، العمر: 22} ، {name: "nima" ، العمر: 20}] ؛ لـ (var i = 0 ؛ i <arr.length ؛ i ++) {console.log (arr [i]) ؛يمكنك رؤية معلومات الكائن مباشرة دون عرض [كائن كائن] ، مما يجعلنا في حيرة من أمرنا.
هل تشعر فجأة أن Console.log تنفجر؟
في الواقع ، هذا هو مجرد غيض من جبل الجليد. سأبذل قصارى جهدي لأريك بعض مزاياه.
تابع الخطوات الآن ، الآن ندخل مباشرةً ثم اضغط على Enter.
هل هو أكثر غير مقيد؟ يمكنك الآن النقر مباشرة على كائن لتوسيع الكائنات في هذه المجموعة للعرض ، وحتى حفظ الإخراج الحلقة.
هذا هو سحر وحدة التحكم ، وهذه مجرد ميزة أساسية لها.
دعونا أولاً نفهم ما هي الأساليب الموجودة تحت كائن وحدة التحكم التي نستخدمها.
أدخل وحدة التحكم واضغط على إدخال لتوسيع الكائن.
يمكنك رؤية بعض الألوان المظلمة والخفيفة. الألوان الداكنة هي الطرق التي يمكننا الاتصال بها مباشرة. تمثل الألوان الفاتحة سمات أو طرق افتراضية ، وليس هناك حاجة للقلق بشأن الشاشة. سأتحدث عنها لاحقًا إذا كانت لديك الفرصة.
في الواقع ، فإن الشائعة الوحيدة هي سجل dir. نادراً ما يتم استخدام الآخرين ، وسيتم استخدامها فقط في تصحيح الأخطاء المتقدمة.
تتوفر الخصائص الإضافية مثل المجموعة والجدول أم لا ، اعتمادًا على تفضيلاتك. لا أحب استخدامه كثيرًا.
دعونا نلقي نظرة على ذلك خطوة بخطوة. على أي حال ، لنبدأ بـ Log Dir ، ويعتمد معظم تصحيح الأخطاء عليها.
ملاحظة: في الواقع ، كان ينبغي عليّ أن أعطيك الوثائق الرسمية ، لكن Google لم تتمكن من فتحها مؤخرًا ، حتى أتمكن من التحقق من وظائف كل طريقة على Baidu.
لقد وجدت نسخة صينية ، إنها ليست سيئة. يرجى قراءة "كائن وحدة التحكم" أولاً.
دعنا نأخذ بعض التمارين بعد الفصل: (افتح بايدو أولاً ، ثم افتح وحدة التحكم)
1 عرض معلومات العنصر مع ID KW1 في وحدة التحكم
2 ثم استخدم طريقة console.dir لعرض معلومات عنصر KW1