كيف تصحح برامج جافا سكريبت؟ الطريقة الأكثر بدائية هي استخدام ALERT () لطباعة المحتوى على الصفحة ، والطريقة المحسّنة قليلاً هي استخدام Console.log () لإخراج المحتوى على وحدة التحكم JavaScript. حسنًا ، لقد قام استخدام هاتين الطريقتين بالفعل بحل العديد من مشكلات تصحيح الأخطاء في البرامج النصية الصغيرة JavaScript. ومع ذلك ، سيكون من المؤسف عدم استخدام أدوات المطورين التي أصبحت أكثر قوة في Chrome. تقدم هذه المقالة بشكل أساسي إعدادات نقطة توقف JavaScript وتصحيح الأخطاء ، أي لوحة المصادر (التي كانت تسمى سابقًا البرامج النصية). إذا كنت بارعًا في العديد من تقنيات تصحيح الأخطاء في Java في Eclipse ، فإن المفاهيم هنا متشابهة. نسخة الكروم المستخدمة عند كتابة هذه المقالة هي 25.0.1364.172.
البيئة الأساسية
على يسار المصادر هو مصدر المحتوى ، بما في ذلك الموارد المختلفة في الصفحة. من بينها ، ينقسم إلى مصادر ونصوص محتوى. المصادر هي موارد مختلفة واردة في الصفحة نفسها. يتم تنظيمها وفقًا للمجالات التي تظهر على الصفحة ، وهو ما نحتاج إلى الانتباه إليه. ستظهر ملفات JS التي تم تحميلها بشكل غير متزامن هنا أيضًا بعد التحميل. البرامج النصية للمحتوى هي امتداد كروم يتم تنظيمه وفقًا لمعرف التمديد. هذا النوع من التمديد هو في الواقع مورد مضمن في الصفحة ، ويمكنهم أيضًا قراءة وكتابة DOM. فقط المطورين الذين يكتبون وتصحيح ملحقات مثل هذا يجب أن يهتموا بهم. إذا لم يكن للمتصفح أي ملحقات مثبتة ، فلن ترى نصوص المحتوى أي شيء.
تُستخدم المنطقة الرئيسية الرئيسية للوحة المصادر لعرض محتويات ملف المورد على اليسار.
على الجانب الأيمن من لوحة المصادر ، هناك منطقة وظيفية تصحيح الأخطاء. الصف العلوي من الأزرار هو توقف/متابعة ، خطوة بخطوة ، قفزة خطوة بخطوة ، والقفز خطوة بخطوة ، وتعطيل/تمكين جميع نقاط التوقف. فيما يلي مختلف المجالات الوظيفية المحددة. سيتم تقديم هذا لاحقًا.
لاحظ أن المناطق الموجودة على كلا الجانبين قد تتقلص افتراضيًا وعدم عرضها على كلا الجانبين. انقر فوق الأزرار التلسكوبية على كلا الجانبين لعرضها. عندما يتم عرض المنطقة اليسرى ، يكون الافتراضي هو التقلص تلقائيًا. انقر فوق الزر PIN المجاور له ولن يتراجع.
هناك أيضًا بعض أزرار الميزات في الأسفل والتي تكون مفيدة للغاية.
اضبط نقاط التوقف على رمز المصدر
من خلال مصدر المحتوى الموجود على اليسار ، افتح ملف JavaScript المقابل ، انقر فوق رقم سطر الملف وقم بتعيين وحذف نقاط التوقف. ستظهر كل نقطة توقف في قائمة نقاط التوقف في منطقة التصحيح على اليمين. سيؤدي النقر فوق نقطة توقف القائمة إلى تحديد موقع نقطة الإيقاف في منطقة المحتوى. إذا كان لديك العديد من الملفات ونقاط التوقف المتعددة ، فمن المريح للغاية تحديد موقع نقاط التوقف بسرعة في قائمة نقاط التوقف.
هناك حالتان لكل نقطة توقف إضافية: تنشيط وتعطيل. إن نقاط التوقف التي تمت إضافتها للتو هي الحالات التي تم تنشيطها ، والدولة المعوقة هي الاحتفاظ بنقطة التوقف ولكنها تلغي مؤقتًا وظيفة نقطة التوقف. يوجد خانة اختيار قبل كل نقطة توقف في قائمة نقاط التوقف ، وسيقوم Unchecking بتعطيل نقطة التوقف. يمكن أيضًا تعطيل نقاط التوقف في قائمة النقر بزر الماوس الأيمن لموضع نقطة التوقف. يمكنك أيضًا تعطيل جميع نقاط التوقف المضافة مؤقتًا على الزر الموجود على الشريط الأيمن ، والنقر فوقه لاستعادة الحالة الأصلية.
نقطة الإيقاف الشرطية : حدد "تحرير نقطة الإيقاف ..." في قائمة النقر بزر الماوس الأيمن لموضع نقطة الإيقاف لتعيين الشرط لتحريك نقطة التوقف ، أي ، اكتب تعبيرًا ، وسيتم تشغيل نقطة التوقف فقط عندما يكون التعبير صحيحًا. تحقق من مكدس استدعاء البيئة من نقاط التوقف (مكدس الاتصال): عندما تتوقف نقطة الإيقاف ، ستعرض مكدس الاتصال في منطقة تصحيح الأخطاء على اليمين مكدس استدعاء الطريقة حيث تكون نقطة الإيقاف الحالية. على سبيل المثال ، هناك دالة G () التي تسمى الوظيفة F () ، وقمت بتعيين نقطة توقف في F (). ثم عندما أقوم بتنفيذ الوظيفة G () في وحدة التحكم ، سيتم تشغيل نقطة الإيقاف ، وسيتم عرض مكدس الاتصال على النحو التالي:
الجزء العلوي هو f () ، ثم g (). تسمى كل طبقة في مكدس المكالمات إطارًا. يمكن للنقر على كل إطار الانتقال إلى نقطة استدعاء هذا الإطار.
بالإضافة إلى ذلك ، يمكنك إعادة تشغيل تنفيذ الإطار الحالي على الإطار باستخدام قائمة النقر بزر الماوس الأيمن ، أي من بداية الإطار. على سبيل المثال ، على إطار الوظيفة f () ، ستقفز نقطة التوقف إلى بداية F () وإعادة تنفيذ ، وسيتم أيضًا استعادة القيمة المتغيرة في السياق. وبهذه الطريقة ، الجمع بين وظائف مثل التعديل المتغير وتحرير التعليمات البرمجية ، يمكنك تصحيحها مرارًا وتكرارًا في الإطار الحالي دون تحديث الصفحة وتشغيل نقطة الإيقاف مرة أخرى. عرض المتغيرات
يوجد أسفل قائمة مكدس المكالمات قائمة متغيرات SCOPE ، حيث يمكنك عرض قيم المتغيرات المحلية والعالمية في هذا الوقت. تنفيذ الرمز المحدد
أثناء تصحيح أخطاء نقطة الإيقاف ، يمكنك استخدام الماوس لتحديد المتغير أو التعبير الذي تريد عرضه ، ثم انقر بزر الماوس الأيمن على القائمة لتنفيذ "التقييم في وحدة التحكم" لرؤية القيمة الحالية للتعبير. زر "المقاطعة/المتابعة" في الجزء العلوي من منطقة تصحيح الأخطاء على الجانب الأيمن من بيان JavaScript الذي سيتم تنفيذه في المرة القادمة لديه وظيفة. عندما لا يكون هناك نقطة توقف ، فإن النقر فوق هذا الزر سيدخل حالة المقاطعة "التحضير". في المرة التالية التي تقوم فيها الصفحة بتنفيذ عبارة JavaScript ، ستقطع تلقائيًا ، مثل الرمز الذي سيتم تنفيذه عند تشغيل إجراء النقر. تعديل رمز JavaScript مؤقتًا. عادةً ما نعتاد على هذه الحلقة عند تصحيح رمز التصحيح: قم بتعديل الكود → تحديث الصفحة → إعادة فحص. ولكن في الواقع ، يمكن تعديل المحتوى في ملف JS مؤقتًا في Chrome. يمكن أن يصدر Save (Ctrl+S) ساري المفعول على الفور ، ويعيد إدخاله على الفور باستخدام وحدة التحكم والوظائف الأخرى. ولكن يرجى ملاحظة أن هذا التعديل مؤقت ، وسيختفي تعديل صفحة التحديث.
نقطة الاستراحة في استثناء
يمكنك رؤية الزر أسفل الواجهة. إنه مفتاح يحدد ما إذا كان البرنامج قد توقف عندما يواجه استثناءًا عند تشغيله. سيتم تبديل النقر فوق هذا الزر بين 3 حالات:
بشكل افتراضي ، لن يتم مواجهة أي انقطاع
سيتم مقاطعة جميع الاستثناءات ، بما في ذلك المواقف التي تم التقاطها
فقط المقاطعة في حالة حدوث استثناء غير معطل
اشرح بشكل أساسي الفرق بين الحالة 2 والدولة 3
يحاول{
رمي "استثناء" ؛
} catch (e) {
console.log (e) ؛
}
سيواجه الكود في المحاولة أعلاه استثناءً ، لكن رمز الصيد وراءه يمكن أن يلتقط الاستثناء. إذا تمت مقاطعة جميع الاستثناءات ، فسيقاطع الكود تلقائيًا عند تنفيذها على بيان الرمي الذي سيؤدي إلى استثناء ؛ وإذا تم مقاطعة ذلك فقط عندما يواجه استثناءًا غير معطل ، فلن يقطع هنا. بشكل عام ، سنكون أكثر قلقًا بشأن مواجهة استثناءات غير معلوم.
تعيين نقاط التوقف على عناصر DOM
في بعض الأحيان ، نحتاج إلى الاستماع إلى DOM معين يتم تعديله دون الاهتمام بأي سطر الكود يتم تعديله (أو قد يكون هناك العديد من الأماكن التي سيتم تعديلها). ثم يمكننا ضبط نقاط التوقف مباشرة على DOM.
كما هو موضح في الشكل ، في لوحة Elements of Elements Review ، يمكنك تعيين ثلاث نقاط توقف في قائمة النقر بزر الماوس الأيمن على عنصر: بعد أن تعدل العقدة الفرعية سماتها الخاصة ويتم حذف عقدةها الخاصة ، ستظهر نقطة توقف DOM في قائمة نقاط DOM على الجانب الأيمن من لوحة المصادر. بمجرد تنفيذها لإجراء التعديلات المقابلة إلى DOM ، سيتوقف الكود هناك ، كما هو موضح في الشكل أدناه.
XHR Break Point
هناك نقاط توقف XHR في منطقة تصحيح الأخطاء على اليمين. انقر فوق + وأدخل السلسلة الموجودة في عنوان URL للاستماع إلى طلب AJAX لعنوان URL. محتوى الإدخال يعادل مرشح عنوان URL. إذا لم يتم شغل أي شيء ، استمع إلى جميع طلبات XHR. بمجرد تشغيل مكالمة XHR ، ستفقد المكان الذي يتم فيه طلب request.send ().
تشغيل نقطة التوقف حسب نوع الحدث
قائمة مستمع الحدث في منطقة التصحيح على اليمين ، حيث يتم سرد أنواع الأحداث المحتملة المختلفة. تحقق من نوع الحدث المقابل ، وسوف يقطع تلقائيًا عندما يؤدي رمز JavaScript الذي يؤدي إلى الحدث من هذا النوع.
تصحيح مفاتيح اختصار
يمكن العثور على مفاتيح الاختصار في جميع أدوات التطوير في الإعدادات في الزاوية اليمنى السفلى من الواجهة. يتم استخدام F8 أو F10 أو F11 أو SHITF+F11 بشكل عام عند نقاط توقف التصحيح ، ولكن قد تتعارض مفاتيح الوظائف مثل F10 مع مفاتيح الاختصار الافتراضية للنظام. لا يهم ، يمكن استبدالها بـ CMD+/، CMD+'، CMD+؛ ، Shift+cmd+؛ على التوالى. //@ sourceurl اسم الرمز المنتج بواسطة eval. في بعض الأحيان يتم إنشاء بعض التعليمات البرمجية الديناميكية للغاية في سياق JavaScript الحالي في شكل سلسلة من خلال وظيفة eval () ، بدلاً من التحميل كملف JS منفصل. وبهذه الطريقة ، لن تجد الملف الموجود في منطقة المحتوى على اليسار ، لذلك من الصعب تصحيح. في الواقع ، نحن فقط نضيف سطر "//@ sourceurl = name" في نهاية الكود الذي تم إنشاؤه بواسطة eval to deal to that code (سيعامل المتصفح هذا النموذج الخاص من التعليقات على وجه التحديد) ، بحيث يظهر في منطقة المحتوى على اليسار ، تمامًا مثل تحميل ملف JS باسم محدد ، يمكنك تعيين نقاط التوقف والتصحيح. في الشكل أدناه ، نقوم بتنفيذ قطعة من الكود من خلال Eval واستخدام SourceUrl لتسمية Dynamicscript.js. بعد التنفيذ ، يظهر هذا "الملف" في منطقة المحتوى الموجودة على اليسار ، ومحتوىه هو المحتوى في EVAL. يمكنك أيضًا إلقاء نظرة على هذا المثال لتسمية رمز Coffescript المترجم ديناميكيًا:
var coffee = coffescript.compile (code.value) + "//@ sourceurl =" + (evalname.value || "coffeeeeee!") ؛
eval (القهوة) ؛
في الواقع ، لا يمكن استخدام //@ sourceurl فقط في رمز EVAL ، ولكن يمكن استخدام أي ملف JS أو حتى الرمز الذي تم إدخاله بواسطة وحدة التحكم JavaScript ، بنفس التأثير! يتم استخدام زر رمز التنسيق (طباعة جميلة) لإعادة تنسيق الكود الفوضوي في رمز جميل ، مثل بعض ملفات JS المضغوطة التي لا يمكن قراءة أو تصحيح الأخطاء بشكل أساسي. انقر فوق التنسيق ثم قم بإلغاء تثبيته. قبل التجميل
مرجع تجميل: أدوات مطور Chrome الوثائق الرسمية