مشاركة الخبرة في جافا سكريبت باقت أخطاء

1. ما هو تصحيح أخطاء نقطة التوقف؟ هل هو صعب؟

تصحيح الأخطاء في نقطة الانقطاع ليس شيئًا معقدًا. هناك فهم بسيط لعدم المكالمات الصادرة هو فتح المتصفح ، وفتح المصادر ، والعثور على ملف JS ، والنقر على رقم السطر. يبدو من السهل جدًا العمل ، ولكن ما يربك الكثير من الناس في الواقع هو المكان الذي يكسرون هذه النقطة؟ (دعنا نلقي نظرة أولاً على لقطة شاشة نقطة توقف ، مع أخذ نقطة توقف متصفح Chrome كمثال)

تذكر الخطوات؟

افتح الصفحة مع متصفح Chrome → اضغط على F12 لفتح أدوات المطور → فتح المصادر → افتح ملف رمز JS الذي تريد تصحيحه → انقر فوق رقم السطر ، حسنًا! تهانينا لنقطة التوقف البكر الخاصة بك على الضرب ، هاها ~~

2. كيف تصل إلى نقاط التوقف بشكل مناسب؟

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

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

أول ما يتبادر إلى ذهني هو ما إذا كانت نقريتي كانت ناجحة؟ هل الطريقة في حدث النقر؟ حسنًا ، إذا كنت تريد معرفة إجابة هذا السؤال ، فلنحاول ضرب نقطة توقف على الفور. أين نقطة الإيقاف؟ فكر في الأمر أولاً.

الصورة التالية:

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

تابع الصورة أعلاه:

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

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

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

للإضافة:

ماذا لو لم يحدث الموقف أعلاه؟ هل هذا يعني أن حدث النقر لم يسري؟ ما الذي تسبب في عدم سريان حدث النقر؟ الجميع يفكر في ذلك بأنفسهم ~

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

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

أخطاء بناء الجملة ، تحقق بعناية. يمكنك مقارنة القواعد غير المألوفة على بايدو.

يتم إنشاء العنصر المحدد لاحقًا. أسهل طريقة للتعامل معها هي استخدام طريقة .on (). تتم معالجة هذا الشيء مع تفويض الأحداث. يمكنك استخدام Baidu للحصول على التفاصيل.

إذن أين سيتم قفل هوية "المشتبه به الجنائي" بعد ذلك؟

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

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

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

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

حسنًا ، من أجل مزيد من القفل في "المشتبه به الجنائي" ، سأقدم لك أداة ، والتي تعد أيضًا أحد الرموز التي تظهر في الصورة أعلاه ، انظر الصورة أدناه:

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

لقد نقرت على هذا الزر مرتين (أو استخدمت مفتاح اختصار F10) ، وتم تنفيذ رمز JS من السطر 227 إلى السطر 229 ، لذلك أسميته "عبارة عن خطوة" أو "خطوة خطوة بخطوة". هذه الوظيفة عملية للغاية وسيتم استخدامها لمعظم تصحيح الأخطاء.

لقد فات الأوان ، سأستمر في الكتابة غدًا ، لا يزال العرض الجيد قادمًا ~

― - ― - ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― -

حسنًا ، استمر في الكتابة!

تُظهر المقدمة أعلاه أنني نقرت على زر "تنفيذ الجملة على حدة" مرتين ، وتم تشغيل الكود من السطر 227 إلى السطر 229. ماذا تعتقد أن هذا يعني؟ هل هذا يعني أنه من وجهة نظر نحوية ، فإن الجملتين الأوليين ليست مشكلة ، فهل هذا يعني أيضًا أن الجملتين الأولين يلغيان الشك؟ أنا لا أراه.

كما نعلم جميعًا ، يعد تحميل المزيد وظيفة من الصفحة التالية ، والأكثر أهمية هي قيمة رقم الصفحة التي تم تمريرها إلى الخلفية. عندما أنقر فوق الزر المزيد من التحميل مرة واحدة ، يجب زيادة قيمة رقم الصفحة بمقدار 1. لذا ، إذا لم تخرج البيانات الواردة في الصفحة التالية ، فهل من الممكن أن تكون هناك مشكلة في قيمة رقم الصفحة ، أي [أنا متغير] (ما يلي هو الاسم الموحد I)؟ إذن ، كيف يتم استكشاف ما إذا كانت هناك أي مشاكل في رقم الصفحة؟ الجميع يفكر أولاً.

فيما يلي طريقتان لعرض قيمة الإخراج الفعلية لرقم الصفحة I] ، الشكل أعلاه:

النوع الأول:

خطوات التشغيل كما يلي:

1. لا يزال يضغط على نقطة توقف في السطر 227 → 2. انقر فوق الزر المزيد من التحميل → 3. انقر فوق "تنفيذ عبارة" عن طريق الجملة "مرة واحدة ، وسيتم تنفيذ رمز JS إلى السطر 228 → 4. يؤدي إلى الصورة أعلاه.

النوع الثاني:

تشبه هذه الطريقة في الواقع الطريقة الأولى ، باستثناء أن قيمة I هي الإخراج على وحدة التحكم. تحتاج فقط إلى اتباع الطريقة الأولى للتنفيذ إلى الخطوة 3 → 4. افتح وحدة التحكم بنفس مستوى المصادر → 5. أدخل I → 6. اضغط على Enter Enter Key.

في الطريقة الثانية أعلاه ، تم ذكر وحدة التحكم. يمكننا أن نسميها وحدة التحكم أو أي شيء آخر. هذا ليس مهمًا. وحدة التحكم لديها وظيفة قوية جدا. أثناء عملية التصحيح ، غالبًا ما نحتاج إلى معرفة ما هي قيم بعض المتغيرات المخرجات ، أو ما إذا كنا نستخدم المحدد [$ ". div") لتحديد العناصر التي نريدها ، وما إلى ذلك ، يمكن طباعتها على وحدة التحكم. بالطبع ، من الممكن أيضًا استخدام الطريقة الأولى مباشرة.

اسمحوا لي أن أظهر لك العناصر التي نريد تحديدها في وحدة التحكم. الصورة أعلاه ~

أدخل $ (هذا) في وحدة التحكم للحصول على العنصر المحدد. نعم ، هذا هو الكائن الذي نقرناه - قم بتحميل المزيد من عناصر الزر.

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

الخلط 1: عندما لا تكون هناك نقطة استراحة ، أدخل I في وحدة التحكم ، وتقوم وحدة التحكم بالإبلاغ عن خطأ.

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

الارتباك 2: لماذا يمكنني طباعة شيء ما مباشرة إلى $ (". xxx") في وحدة التحكم؟

الأمر بسيط للغاية. وحدة التحكم نفسها هي محلل JS ، و $ (". xxx") عبارة عن عبارة JS ، لذلك يمكن أن تتحمل وحدة التحكم بشكل طبيعي هذا البيان وإخراج النتيجة.

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

أسمي هذا الزر زر "تنفيذ العملية" ، وهو يختلف عن زر "تنفيذ العبارة". غالبًا ما يتم استخدام زر "تنفيذ العملية" عند استدعاء طريقة ملفات JS متعددة. رمز JS المعني طويل نسبيًا ، لذلك سيتم استخدام هذا الزر.

فوق:

لنفترض في الصورة أعلاه ، لقد قمت فقط بإنشاء نقطة توقف على السطر 227 ، ثم استمرت في النقر فوق زر "تنفيذ عبارة عن طريق الجملة" إلى السطر 229 ، ماذا لو قمت بالنقر فوق زر "تنفيذ عبارة عن طريق الجملة" مرة أخرى؟ سوف يدخل JS في الصورة التالية:

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

فوق:

بالإضافة إلى تعيين نقطة توقف على السطر 227 ، قمت أيضًا بضرب نقطة توقف في السطر 237. عندما نركض إلى السطر 229 ، انقر مباشرة على زر "تنفيذ العملية بعملية". ستجد أن JS تخطيت ملف المكتبة مباشرة وركضت إلى السطر 237. يمكنك استخدامه لنفسك لتجربة ذلك.

الملخص النهائي:

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

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

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

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