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

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

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

الخطوة الأولى: إنشاء BUG

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

الرجوع إلى العملية التالية لإنتاج هذه المادة سوف إصلاح الخلل:

• نحن هنا تريد استخدامه لديك صفحة على شبكة الإنترنت. فتح في علامة تبويب جديدة: فتح حساب تجريبي

• رقم 1 في مدخلات مربع الإدخال 5

• مربع إدخال رقم في مدخلات 12

• انقر على زر إضافة عدد (1) وعدد 2

• أدناه الناتج الإرادة 5 + 1 = 51

يجب أن يكون 6 الإخراج، بدلا من 51.

الخطوة 2: استخدام نقاط التوقف إلى وقفة بتنفيذ التعليمات البرمجية

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

• الصفحة الاخيرة تجريبي لفتح أدوات المطور (ماك: القيادة + خيار + I، نافذة، لينكس: التحكم + مفتاح Shift + I).

• انقر فوق علامة التبويب المصدر

• انقر الحدث المستمع نقاط التوقف، وتوسيع محتويات الداخل. أدوات المطور توسع ويحتوي على الرسوم المتحركة، الحافظة

• تحريك الماوس فوق الماوس السابقة، انقر فوق المثلث لتوسيع محتويات داخل

• حدد نقرة

• الرجوع الى التجريبي، انقر فوق إضافة رقم 1 و رقم 2. وعرض أدوات المطور وقف التنفيذ، والتعليمات البرمجية التالية في قسم يسلط الضوء على المصدر:

1function عند _ النقر () {

لماذا؟

عند تحديد النقر بالماوس على الحدث المستمع نقاط التوقف، ثم كل الأحداث نقرة يتم تعيين نقاط التوقف. لذلك، يتم النقر أي عقدة، وانقر فوق العقدة وأحداث محددة، أدوات المطور (DevTools) إيقاف مؤقت تلقائيا في السطر الأول من الحدث Click معالج.

الخطوة الثالثة: خطوة واحدة كود تصحيح الأخطاء

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

• المصدر وحة أدوات مطوري البرامج، انقر فوق الثالثة (الخطوة إلى استدعاء دالة التالية)،

الخطوة إلى استدعاء دالة القادمة

دليل الحدث انقر على زر يمكنك التنقل خلال الجدول الزمني المحدد. بعد النقر، رمز الضوء، خط 15:

• الآن انقر على الثانية (الخطوة عبر استدعاء دالة التالية) زر

الخطوة عبر استدعاء دالة القادمة

هذا الزر سيتم تخطي inutsAreEmpty وظيفة الحالية التي يتعين القيام بها، بدلا من إدخال الدالة. القفز في الوقت نفسه مباشرة إلى خط 19، لأن حقل الإدخال الحالي ليس فارغا.

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

الخطوة الرابعة: تعيين نقطة أخرى

إذا كنت ترغب في تعيين نقطة توقف في صف واحد، يمكنك استخدام كسر خط (خط من رمز نقطة).

• UpdateLabel العثور على السطر الأخير من وظيفة،

1label.textContent = addend1 + '+' + addend2 + '=' + مبلغ.

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

• انقر على تنفيذ البرنامج النصي استئناف الزر الأول

استئناف زر تنفيذ البرنامج النصي

يستمر تنفيذ التعليمات البرمجية في السطر 32.

• على الجانب الأيسر، الجزء المحلي لديها addend1، ويتم عرض addend2 قيمة المبلغ.

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

خطوة 5: تحقق من قيمة المتغير

الوضع شائع آخر هو متغير أو قيمة الإرجاع للدالة والتوقعات ليست هي نفسها. العديد من المطورين استخدام console.log لمعرفة التغير في القيمة، ولكن استخدام console.log مرهقة وغير فعالة للغاية. أولا، تحتاج إلى إضافة الكثير دليل console.log، وثانيا، قبل كنت لا تعرف أي متغير من شأنه أن يؤدي الخلل، تحتاج إلى طباعة قيمة العديد من المتغيرات.

Google أدوات المطور وهناك ميزة جميلة هي لمراقبة تعبيرات (ووتش التعبير)، يمكنك مراقبة دائما التغيرات في قيم المتغيرات. تعبيرات المراقبة يمكن استخدامها لمراقبة ليس فقط قيمة متغير، يمكنك استخدامها لمراقبة أي تعبير. دعونا محاولة إعطائها:

• لوحة مصدر في لوحة المطور، انقر فوق ووتش، وتوسيع محتويات داخل (التوسع الأولي فارغ).

• انقر على الجانب الأيمن من + (إضافة التعبير)

الزر إضافة التعبير

• أدخل المبلغ تشير typeof

• ضرب ENTER. المطورين يعرض لوحة تشير typeof تلخيص: "السلسلة".

ونحن تكهنت: مبلغ من نوع السلسلة.

ثمة بديل آخر هو الاستخدام المباشر console.log وحدة التحكم. ما يمكنني تنفيذ تعبيرات جافا سكريبت التعسفية باستخدام وحدة التحكم. مطوري عادة استخدام وحدة التحكم لإعادة كتابة قيمة المتغير التصحيح. يمكننا استخدام وحدة التحكم للتحقق من الحلول الممكنة.

• إذا لم تظهر وحدة التحكم، وضرب المفتاح ESC لفتح. فإنه سيتم فتح في اللوحة السفلية من المطور.

• مساهمة في وحدة التحكم parseInt (addend1) + parseInt (addend2)

• الضغط على مفتاح العودة، وإخراج 6.

الخطوة السادسة: فيكس BUG

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

• في أدوات المطورين لوحة المصدر، وشفرة المصدر فار مبلغ = addend1 + addend2 استبدال فار مبلغ = parseInt (addend1) + parseInt (addend2)؛

• حفظ التغييرات (ماك: القيادة + S، نافذة، لينكس: التحكم + S).

• انقر فوق الزر الخامس نقاط إلغاء تنشيط

زر نقاط تعطيل

زر لإلغاء كافة نقاط التوقف مجموعة.

• انقر على تنفيذ البرنامج النصي استئناف الزر الأول

استئناف زر تنفيذ البرنامج النصي

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