مقدمة: رمز التصحيح لا غنى عنه لأي مبرمج. سواء كنت سيدًا أو مبتدئًا ، فإن برامج تصحيح الأخطاء مهمة لا غنى عنها. بشكل عام ، يتم تنفيذ برامج تصحيح الأخطاء بعد كتابة التعليمات البرمجية أو عند تعديل الأخطاء أثناء الاختبار. غالبًا ما يكون من الأفضل أن تعكس مستوى المبرمج ودقة تحليل المشكلات أثناء رمز تصحيح الأخطاء. لا يدرك العديد من المبتدئين دائمًا المشكلة عند البحث عن سبب الخطأ ، وقضاء الكثير من الوقت ولكنهم غير قادرين على حل بعض الأخطاء التي تثبت في النهاية أنها بسيطة للغاية. سيؤدي إتقان مختلف مهارات التصحيح إلى تحقيق ضعف النتيجة مع نصف الجهد في العمل. على سبيل المثال ، حدد موقع المشكلات بسرعة ، وتقليل احتمال الفشل ، والمساعدة في تحليل الأخطاء المنطقية ، وما إلى ذلك. في اليوم اليوم عندما تصبح التطوير الأمامي للإنترنت أكثر أهمية ، من المهم بشكل خاص تقليل تكاليف التطوير ، وتحسين كفاءة العمل ومهارات التنمية الأمامية الأمامية في الواجهة الأمامية في التنمية الأمامية.
سوف تشرح هذه المقالة العديد من تقنيات تصحيح الأخطاء في الواجهة الأمامية واحدة تلو الأخرى. ربما كنت تتقنهم ، لذلك دعونا نراجعهم معًا. ربما هناك طرق لم ترها من قبل. قد تتعلمهم معًا. ربما لا تعرف كيف تصحح. اغتنم هذه الفرصة لملء الفجوة.
1. في حالة تأهب ، ماجستير في AROUT
كان ذلك عندما كان الإنترنت قد بدأ للتو ، وكان الواجهة الأمامية من صفحة الويب حول عرض المحتوى بشكل أساسي ، ويمكن أن توفر البرامج النصية للمتصفح وظائف مساعدة بسيطة للغاية للصفحة. في ذلك الوقت ، تم تشغيل صفحات الويب بشكل أساسي في المتصفحات التي تهيمن عليها IE6 ، وكانت وظيفة تصحيح الأخطاء في JS لا تزال ضعيفة للغاية ، لذلك لا يمكن تصحيحها إلا من خلال طريقة التنبيه المدمجة في كائن النافذة. في ذلك الوقت ، كان ينبغي أن يبدو هكذا:
تجدر الإشارة إلى أن التأثير الذي شوهد هنا ليس التأثير الذي شوهد في متصفح IE في ذلك الوقت ، ولكن التأثير في الإصدار الأعلى من IE. بالإضافة إلى ذلك ، يبدو أنه لا يوجد مثل هذه وحدة التحكم المتقدمة في ذلك الوقت ، وكان استخدام التنبيه أيضًا في رمز JS الحقيقي. على الرغم من أن طريقة تصحيح التنبيه بدائية للغاية ، إلا أنها كانت لها قيمتها التي لا تمحى في ذلك الوقت ، وحتى اليوم لها مكانها لاستخدامها.
2. الجيل الجديد من وحدة تحكم الملك الأخطاء
نظرًا لأن JS يمكن أن تفعل المزيد والمزيد من الأشياء في الواجهة الأمامية على شبكة الإنترنت ، فإن المسؤولية أصبحت أكبر وأكبر ، والوضع تزداد أهمية. لقد فشلت طريقة تصحيح التصحيح التقليدية في التنبيه تدريجياً في تلبية السيناريوهات المختلفة للتنمية الأمامية. علاوة على ذلك ، فإن معلومات التصحيح التي ظهرت عليها طريقة تصحيح التنبيه ليست جميلة حقًا وستمنع بعض محتوى الصفحة ، وهو أمر غير ودود حقًا.
من ناحية أخرى ، يجب إضافة معلومات تصحيح التصحيح عن التنبيه إلى منطق البرنامج مثل "Alert (xxxxx)" للعمل بشكل طبيعي ، وسيعيق التنبيه التقديم المستمر للصفحة. هذا يعني أنه بعد الانتهاء من تصحيح الأخطاء ، يجب عليه مسح رموز تصحيح الأخطاء يدويًا ، وهو أمر مزعج حقًا.
لذلك ، قام الجيل الجديد من المتصفحات Firefox و Chrome و IE بإطلاق لوحات تحكم تصحيح أخطاء JS على التوالي ، مما يدعم استخدام نموذج مشابه لـ "Console.log (xxxx)" لطباعة معلومات تصحيح الأخطاء على وحدة التحكم دون التأثير بشكل مباشر على عرض الصفحة. خذ IE كمثال ، يبدو أن هذا:
حسنًا ، وداعًا لصندوق التنبيه القبيح. قام النجم الصاعد ، بقيادة Chrome ، بتوسيع ميزات أكثر ثراءً إلى وحدة التحكم:
هل تعتقد أن هذا مرضي؟ خيال فريق تطوير الكروم أمر مثير للإعجاب حقًا:
حسنًا ، لقد قلت أكثر قليلاً خارج الموضوع. باختصار ، جلب ظهور كائنات وحدة تحكم مدمجة على وحدة التحكم والمتصفح راحة كبيرة للتنمية الأمامية وتصحيح الأخطاء.
قد يسأل بعض الأشخاص ، هل يجب تنظيف رمز التصحيح هذا بعد اكتمال تصحيح الأخطاء؟
فيما يتعلق بهذه المشكلة ، إذا كان لديك التحقق المتقدم من الوجود قبل استخدام كائن وحدة التحكم ، فلن يتسبب ذلك في تلف منطق العمل دون حذف. بالطبع ، من أجل ضمان رمز أنيق ، بعد اكتمال تصحيح الأخطاء ، يجب حذف رموز التصحيح التي لا ترتبط بمنطق العمل قدر الإمكان.
3.
تسمح Breakpoint ، إحدى وظائف مصحح الأخطاء ، بمتابعة المقاطعات للبرنامج عند الحاجة ، وبالتالي تسهيل تحليله. يمكنك أيضًا تعيين نقاط التوقف في تصحيح أخطاء واحد. في المرة القادمة ، تحتاج فقط إلى السماح للبرنامج بالتشغيل تلقائيًا إلى موضع نقطة التوقف ، ويمكنك مقاطعته في موضع نقطة التوقف الأخير ، والذي يسهل تشغيله بشكل كبير ويوفر الوقت. -Baidu موسوعة
يعني تصحيح تصحيح JS Breakpoint إضافة نقاط التوقف إلى رمز JS في أدوات مطور المتصفح ، مما يسمح بتنفيذ JS بالتوقف عند موقع معين ، مما يسهل المطورين إلى تحليل ومعالجة قطاعات التعليمات البرمجية هناك. من أجل مراقبة تأثير تصحيح أخطاء نقطة الإيقاف ، نقوم بإعداد جزء من رمز JS مقدمًا:
الكود بسيط للغاية ، هو تحديد وظيفة ، مرور في رقمين ، إضافة عدد صحيح عشوائي فوضوي ، ثم إرجاع مجموع الرقمين. أخذ أدوات مطور Chrome كمثال ، دعونا نلقي نظرة على الأساليب الأساسية لتصحيح تصحيح JS Breakpoint.
3.1. مصادر نقطة التوقف
بادئ ذي بدء ، في رمز الاختبار ، يمكننا أن نرى أن الكود يجب أن يعمل بشكل طبيعي من خلال نتائج إخراج وحدة التحكم في الشكل أعلاه ، ولكن لماذا يجب أن يكون؟ لأنه يتم إضافة رقم عشوائي إلى الوظيفة ، هل النتيجة النهائية صحيحة حقًا؟ هذا تخمين لا معنى له ، لكن لنفترض أنني سأتحقق الآن: تم تمرير الرقمين في الوظيفة ، والرقم العشوائي المضافة ، والمبلغ النهائي. فكيف تعمل؟
الطريقة 1 ، الأكثر شيوعًا المذكورة أعلاه ، سواء باستخدام تنبيه أو وحدة تحكم ، يمكننا التحقق من ذلك بهذه الطريقة:
من الشكل أعلاه ، أضفنا ثلاثة أسطر من رمز وحدة التحكم إلى الكود لطباعة متغيرات البيانات التي نهتم بها. في النهاية ، يمكننا التحقق بوضوح مما إذا كانت عملية الحساب بأكملها طبيعية ، ثم تلبية متطلبات التحقق التي حددها سؤالنا.
الطريقة 2 والطريقة 1 لها عيوب واضحة في عملية التحقق ، وهي أنه يتم إضافة الكثير من التعليمات البرمجية الزائدة. بعد ذلك ، دعونا نلقي نظرة على ما إذا كان استخدام نقاط التوقف للتحقق أكثر ملاءمة. أولاً ، راجع كيفية إضافة نقاط التوقف وما هو التأثير بعد نقطة التوقف:
كما هو موضح في الشكل ، فإن عملية إضافة نقاط التوقف إلى قطعة من الكود هي "F12 (CTRL + Shift + I) فتح أدوات التطوير" - "انقر فوق قائمة مصادر" - "ابحث عن الملف المقابل في الشجرة اليسرى" - "انقر فوق عمود رقم الصف" لإكمال إضافة/حذف نقاط التوقف في الصف الحالي. عند إضافة نقطة الإيقاف ، قم بتحديث تنفيذ الصفحة JS يتوقف عند موضع نقطة التوقف. في واجهة المصادر ، سترى جميع المتغيرات والقيم في النطاق الحالي. فقط تحقق من كل قيمة لإكمال متطلبات التحقق الخاصة بنا.
المشكلة هنا. إذا كنت حريصًا ، فستجد أنه عندما يصل الكود الخاص بي إلى نقطة توقف ، تمت إضافة قيم المتغيرات A و B المعروضة. لا يمكننا رؤية 10 و 20 الأولي التي تم تمريرها عند استدعاء وظيفة المجموع. إذن ماذا علي أن أفعل؟ هذا يتطلب منك العودة وتعلم بعض المعرفة الأساسية بتصحيح تصحيح نقطة التوقف. بعد فتح لوحة المصادر ، سنرى بالفعل المحتوى التالي في الواجهة. نتبع مسار الماوس لنرى ما يعنيه:
من اليسار إلى اليمين ، الوظائف التي يمثلها كل رمز هي:
وقفة/استئناف تنفيذ البرنامج النصي: تنفيذ برنامج التوقف/السيرة الذاتية (يتوقف تنفيذ البرنامج عند نقطة الإيقاف التالية).
خطوة فوق استدعاء الوظيفة التالية: قم بتنفيذ استدعاء الوظيفة إلى الخطوة التالية (القفز إلى السطر التالي).
خطوة إلى استدعاء الوظيفة التالية: أدخل الوظيفة الحالية.
خطوة من الوظيفة الحالية: الخروج من وظيفة التنفيذ الحالية.
إلهي/نشط جميع نقاط التوقف: قم بإيقاف تشغيل/على جميع نقاط التوقف (لم يتم إلغاؤها).
وقفة على الاستثناءات: إعداد نقطة التوقف التلقائي للاستثناءات.
في هذه المرحلة ، تم تقديم مفاتيح الوظائف لتصحيح تصحيح نقطة التوقف تقريبًا. بعد ذلك ، يمكننا أن ننظر إلى سطر رمز البرنامج الخاص بنا حسب السطر لمعرفة التغييرات في كل متغير بعد تنفيذ كل سطر ، كما هو موضح في الشكل أدناه:
كما ذكر أعلاه ، يمكننا أن نرى عملية المتغيرات الكاملة A و B من القيمة الأولية ، إلى إضافة قيمة عشوائية في الوسط ، ثم حساب المبلغ وإخراج النتيجة النهائية. لا توجد مشكلة لإكمال متطلبات التحقق من إعداد الأسئلة.
بالنسبة لمفاتيح الوظائف المتبقية ، نقوم بتغيير رمز الاختبار الخاص بنا قليلاً ونستخدم مخطط GIF لإظهار استخدامهم:
شيء واحد يجب ملاحظته هنا هو أن وظيفة طباعة القيم المتغيرة مباشرة في منطقة الكود هي ميزة جديدة تم إضافتها في الإصدار الأحدث من Chrome. إذا كنت لا تزال تستخدم إصدارًا أقدم من Chrome ، فقد لا تتمكن من عرض المعلومات المتغيرة مباشرة تحت نقاط التوقف. في هذا الوقت ، يمكنك نقل الماوس إلى الاسم المتغير والتوقف لفترة قصيرة ، وستظهر القيمة المتغيرة. يمكنك أيضًا تحديد الاسم المتغير مع الماوس ، والنقر بزر الماوس الأيمن على "إضافة إلى مراقبة" لعرضه في لوحة الساعة. تنطبق هذه الطريقة أيضًا على التعبيرات. بالإضافة إلى ذلك ، يمكنك أيضًا التبديل إلى لوحة وحدة التحكم عند نقاط التوقف ، وإدخال الاسم المتغير مباشرة في وحدة التحكم ، وإدخال المعلومات المتغيرة. هذا الجزء بسيط نسبيًا ، مع الأخذ في الاعتبار طول المقالة ، وعدم صنع الصور والمظاهرات.
3.2. نقطة توقف التصحيح
تتم تسمية نقطة توقف التصحيح المزعومة من قبلي ، ولا أعرف كيف أقول المصطلحات المهنية. على وجه التحديد ، بإضافة "تصحيح الأخطاء" ؛ بيان إلى الرمز ، ستقوم تلقائيًا باكتساب النقاط عندما يقوم الرمز بتنفيذ البيان. العملية التالية هي نفسها تمامًا مثل إضافة تصحيح أخطاء نقطة الإيقاف في لوحة المصادر. الفرق الوحيد هو أن البيان يجب حذفه بعد تصحيح الأخطاء.
نظرًا لأن نفس طريقة إعداد نقاط التوقف مختلفة ، فإن الوظيفة هي نفسها إضافة نقاط التوقف إلى لوحة المصادر ، لماذا لا تزال هذه الطريقة موجودة؟ أعتقد أن السبب يجب أن يكون هذا: نواجه أحيانًا تحميل غير متزامن لشظايا HTML (بما في ذلك رمز JS المضمن) في التطوير ، ولا يمكن العثور على هذا الجزء من رمز JS في أنواع الأشجار المصادر ، لذلك لا يمكننا إضافة نقاط التوقف مباشرة في أداة التطوير. ثم إذا أردنا إضافة نقاط توقف إلى البرنامج النصي الذي تم تحميله بشكل غير متزامن ، "Debugger ؛" سيعمل في هذا الوقت. دعونا نرى تأثيره مباشرة من خلال مخطط GIF:
4. DOM Breakpoint تصحيح الأخطاء
DOM Breakpoint ، كما يوحي الاسم ، هو إضافة نقاط توقف إلى عنصر DOM لتحقيق الغرض من تصحيح الأخطاء. يتم تنفيذ تأثير استخدام نقاط التوقف في الاستخدام الفعلي في نهاية المطاف في منطق JS. دعونا نلقي نظرة على التأثيرات المحددة لكل نقطة توقف دوم بدورها.
4.1. اقتحام تعديلات الشجرة الفرعية عندما تتغير العقد الفرعية داخل العقدة (كسر تعديلات الشجرة الفرعية)
اليوم ، عندما يصبح التطوير الأمامي أكثر تعقيدًا ، أصبح رمز JS في الواجهة الأمامية أكثر تعقيدًا ، وعادةً ما تكون صفحة ويب بسيطة على ما يبدو مصحوبة بقطاعات كبيرة من رمز JS ، والتي تتضمن العديد من عمليات إضافة وحذف وتعديل العقد DOM. من المحتم أن يكون من الصعب تحديد موقع شرائح التعليمات البرمجية مباشرة من خلال رمز JS ، ولكن يمكننا تحديد موقع العقد DOM ذات الصلة بسرعة من خلال لوحة عناصر أداة المطور. في هذا الوقت ، من المهم بشكل خاص تحديد موقع البرامج النصية من خلال نقاط توقف DOM. لنلقي نظرة على مظاهرة GIF:
يوضح الشكل أعلاه آثار إضافة وحذف وتبادل عمليات الطلب التي تؤدي إلى نقاط التوقف لعقد الأطفال UL (LI). ولكن تجدر الإشارة إلى أن تعديل السمات ومحتويات العقد الفرعية لن تؤدي إلى نقاط توقف.
4.2. كسر التعديلات على السمات
من ناحية أخرى ، نظرًا لأن منطق العمل للمعالجة الأمامية يصبح أكثر تعقيدًا ، فإن الاعتماد على التخزين على بعض البيانات أصبح أقوى وأقوى. يعد تخزين البيانات المؤقتة في الخصائص (المخصصة) لعقدة DOM طريقة مفضلة للمطورين في كثير من الحالات. خاصة بعد قياسي HTML5 يعزز دعم السمات المخصصة (على سبيل المثال: مجموعة البيانات ، البيانات-*، وما إلى ذلك) ، يتم تطبيق المزيد والمزيد من إعدادات السمات ، لذلك توفر أدوات مطور Chrome أيضًا دعم نقطة التوقف عن تغيير السمات ، وتكون التأثيرات تقريبًا على النحو التالي:
يجب الإشارة إلى هذه الطريقة أيضًا أن أي عملية على خصائص العقدة الفرعية لن تؤدي إلى نقطة انقطاع العقدة نفسها.
4.3. كسر على إزالة العقدة
يعد إعداد نقطة توقف DOM بسيطًا للغاية ، وطريقة التشغيل واضحة جدًا - عند حذف العقدة. لذلك عادة ما تكون الحالة عند تنفيذ عبارة "parentnode.removechild (childNode)". هذه الطريقة لا تستخدم كثيرا.
ما قدمناه سابقًا هو أساليب التصحيح التي نستخدمها غالبًا في التنمية اليومية. يمكنهم التعامل مع جميع المشكلات تقريبًا في تطورنا اليومي عند استخدامها بشكل صحيح. ومع ذلك ، تأخذ أدوات المطور أيضًا في الاعتبار المزيد من المواقف وتوفر المزيد من الطرق لنقطة الإيقاف ، كما هو موضح في الشكل:
5
لقد خضع التطوير الأمامي لتغييرات في تهديد الأرض في السنوات الأخيرة ، من سمعتها غير المعروفة إلى ازدهارها الحالي ، فإن Ajax يقود تطبيقات الويب الغنية ، وتطبيقات WebApp للصفحة الواحدة. كل هذا لا ينفصل عن كائن XMLHTTPREQUEST ، و "نقاط التوقف XHR" هي ميزة تصحيح أخطاء نقطة التوقف مصممة لأغراض غير متزامنة.
يمكننا إضافة حالة نقطة توقف إلى نقطة التوقف غير المتزامنة من خلال علامة "+" على يمين "نقاط التوقف XHR". عندما يتم تشغيل عنوان URL عند تشغيل الطلب غير المتزامن ، سيقوم منطق JS تلقائيًا بإنشاء نقطة توقف. لم يتم توضيح موضع نقطة التوقف في الرسوم المتحركة التجريبية ، لأن العرض التوضيحي يستخدم طريقة AJAX مغلفة بواسطة jQuery. تم ضغط الرمز وليس هناك أي تأثير. في الواقع ، يتم إنشاء نقطة توقف XHR بواسطة عبارة "XHR.Send ()".
يتمثل قوة نقاط التوقف في XHR في أنه يمكننا تخصيص قواعد نقطة التوقف ، مما يعني أنه يمكننا تعيين نقاط التوقف لدُفعات معينة ، ومرجع معين ، وحتى جميع الطلبات غير المتزامنة ، وهي قوية للغاية. ومع ذلك ، يبدو أن هذه الوظيفة لا تستخدم كثيرًا في التطوير اليومي ، على الأقل لا أستخدمها كثيرًا. فكر في الأمر ، هناك سببان تقريبًا: أولاً ، لا يشارك هذا النوع من متطلبات تصحيح أخطاء نقطة التوقف كثيرًا في الأعمال اليومية ؛ ثانياً ، يعتمد معظم التطورات الأمامية في هذه المرحلة على إطار JS ، كما أن jQuery الأساسي قد غاز AJAX جيدًا أيضًا. قليل من الناس يغلفون أساليب أياكس بأنفسهم. من أجل تقليل حجم الرمز ، يختار المشروع عادة قواعد التعليمات البرمجية المضغوطة ، مما يجعل تتبع نقطة توقف XHR أقل سهولة نسبيًا.
6.
نقطة توقف مستمع الحدث ، أي أن إعداد نقطة الإيقاف يتم تنفيذه وفقًا لاسم الحدث. عندما يتم تشغيل الحدث ، تكون نقطة الإيقاف إلى الموقع الذي يتم فيه ربط الحدث. تدرج نقاط توقف المستمعين جميع أحداث الصفحات والبرنامج النصي ، بما في ذلك: الماوس ، لوحة المفاتيح ، الرسوم المتحركة ، المؤقت ، XHR ، إلخ. إنه يقلل بشكل كبير من صعوبة تصحيح أحداث أعمال الأخطاء في الأحداث.
يوضح المثال التجريبي تأثير نقطة التوقف عند إطلاق حدث النقر وعندما يتم تعيين SetTimeOut. يوضح المثال أنه بعد تحديد نقطة توقف الحدث ، يتم تشغيل نقطة الإيقاف عند النقر على كلا الأزرار ، وعندما يتم تعيين SetTimeOut ، يتم تشغيل نقطة التوقف "Set Timer".
التصحيح هو جزء مهم للغاية من تطوير المشروع. لا يمكن أن تساعدنا فقط في تحديد موقع المشكلات بسرعة ، ولكن أيضًا إنقاذ وقت التطوير. إن كفاءة في مختلف أساليب تصحيح الأخطاء ستجلب بالتأكيد العديد من الفوائد لتطوير حياتك المهنية. ومع ذلك ، مع وجود العديد من أساليب التصحيح ، فإن كيفية اختيار طريقة مناسبة لسيناريو التطبيق الحالي تتطلب خبرة ومحاولات مستمرة للتراكم.
بعد أن كتب هذا ، يمكن القول بشكل أساسي أنه خرج على قدم وساق. آمل أن يجذب انتباهك ، وآمل أن يجعلك تشعر باللمس قليلاً وتشعر بالفاعلية. أهم شيء هو أنني آمل أن تتمكن من تحسين مهاراتك بسرعة وأن تصبح شخصًا ماهرًا!