تصحيح الواجهة الأمامية والخلفية

المقال الأصلي - " كيفية تصحيح جافا سكريبت في Chrome بسرعة وسهولة ."

نظرة عامة

في هذه المقالة ، ستتعلم كيفية تصحيح شفرة JavaScript في الواجهة الأمامية والخلفية باستخدام Chrome DevTools و VS Code.

الأهداف

1. تعلم تصحيح الواجهة الأمامية والزاوي
2. تحليل كيفية تصحيح Node.js

تصحيح الواجهة الأمامية (JavaScript ، Angular)

حاليًا ، تدعم الكثير من الأدوات مثل Chrome DevTools و Firefox Developer Tools تصحيح الأخطاء في الواجهة الأمامية. في حين أن هذين هما الأكثر شعبية ، إلا أن المتصفحات الأخرى لديها أدوات خاصة بها. دعونا ننظر في Chrome DevTools لمغامرتنا التي تقضي على الأخطاء.

تصحيح جافا سكريبت

لنكن صادقين ، قد يكون تصحيح الأخطاء مستهلكًا للوقت أحيانًا. خاصةً ، إذا كانت الأوامر البسيطة مثل console.log () أو window.alert ().

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

إليك عندما يأتي Chrome DevTools إلى المسرح بمهمة نبيلة لتصحيح الأخطاء البرمجية دون هذه الأدوات المملة. من بين مزاياها الأخرى ، CSS و HTML التحرير ، واختبار الشبكة وسرعة الموقع هي المفضلة لدينا.

لنقم بإنشاء صفحة ويب بسيطة باستخدام getData () طريقة JavaScript والتي تقوم ببساطة بجمع البيانات من حقل إدخال الاسم ، وإنشاء عقدة DOM بمعرف dataSpan ، ثم إضافة قيمة حقل الإدخال إلى عنصر DOM هذا.

إليك كيف ستبدو صفحتنا:

في HTML:



في JavaScript:



دعونا حفظه تحت اسم app.j.

هكذا ستظهر الصفحة في المتصفح:



للبحث عن كيفية عمل الطريقة قبل تخزينها في dataSpan ، يمكننا استخدام console.log (البيانات) القديمة أو window.alert (data) . إليك ما سنراه عند بدء تشغيل الملف في VS Code:



هذا هو ، مع ذلك ، النهج الأكثر بدائية.

لذا ، بدلاً من ذلك ، سنستخدم Chrome DevTools ونتحقق من أن كل شيء يعمل بينما نخطط لاستخدام نقاط التوقف.

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

مرة أخرى على المسار الصحيح ، دعونا نطلق الصفحة في Google Chrome و:

1. لفتح أدوات تطوير Chrome ، في الزاوية العلوية اليمنى من المتصفح ، انقر لفتح تخصيص والتحكم في قائمة Google Chrome.
2. من القائمة ، حدد المزيد من الأدوات ، ثم حدد أدوات المطور.

بدلاً من ذلك ، يمكننا استخدام اختصار لوحة المفاتيح Ctrl + Shift + I (نفضل هذا النهج ، ولكن الأمر متروك لك).



بعد دخولنا ، دعنا نتوقف عن الشفرة في نقطة توقف:

1. عند تشغيل Chrome DevTools ، حدد علامة تبويب المصادر.
2. من لوحة المصادر ، في عرض الصفحة ، حدد app.js (ملف JavaScript الذي أنشأناه سابقًا).
3. في "جزء المحرر" ، على يسار مربع البيانات "السماح" = document.getElementById ('name'). Value؛ سطر التعليمات البرمجية ، انقر فوق رقم السطر 3.

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

إدارة الزيادات التي تنفذ بها الوظيفة

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

في الجزء العلوي الأيسر من جزء تصحيح JavaScript ، توجد أوامر تشغيل نقطة توقف أساسية:



أولاً ، سيستمر زر تنفيذ استئناف البرنامج النصي في تنفيذ التعليمات البرمجية حتى ينتهي الرمز أو حتى نقطة التوقف التالية.

دعنا ندخل مرحبا العالم في مجال اسمنا. سيتم توسيع الخط مع البيانات = "hello world". الآن ، دعنا نقر على زر الخطوة "الخطوة التالية" .



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

إذا قمت بتحديث الصفحة ، سيتم تحديث قيمة متغير الخروج إلى عنصر DOM. على يسار المتغير ، يمكنك النقر فوق الرمز Expand () لعرض قيمته. إذا نقرت فوق الخطوة فوق استدعاء الوظيفة التالية ، في المتصفح ، سيتم إضافة نص "hello world" إلى dataSpan مرة أخرى.

تصحيح أكثر تعقيدا

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



لهذا الغرض ، سنقوم بتعديل app.js الخاص بنا لتبدو وكأنها لقطة الشاشة أعلاه. دعونا تحديث الصفحة والقيام ببعض التصحيح:

1. انقر فوق 3 ، رقم سطر اسمحوا البيانات = document.getElementById ('الاسم'). القيمة ؛ ، لتعيين نقطة توقف.
2. في المستعرض ، أدخل 23 24 e في حقل الإدخال. نضيف هنا عمدا كلا من الأرقام والحرف لإحداث خطأ - لا يمكن إضافتها أو ضربها.
3. انقر فوق الخطوة عبر استدعاء الوظيفة التالية.

في لقطة الشاشة ، يمكننا أن نرى أن لكلٍّ من المنتج والمنتج قيمة NaN (وليس رقمًا). يشير هذا إلى أنه يتعين علينا إصلاح التعليمات البرمجية الخاصة بنا على الفور.

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

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

لهذا الغرض ، يتميز DevTools بأداة ممتازة لتحديد نقاط التوقف في الأحداث التي تحدث عند التفاعل مع المستعرض. في جزء تصحيح JavaScript ، انقر فوق نقاط توقف مستمع الأحداث لتوسيعه باستخدام فئات الأحداث.



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



يؤدي النقر فوق الخطوة في استدعاء الوظيفة التالية إلى توجيهنا بالتتابع من خلال الرمز المستخدم لمعالجة إجراء النقر.

عبر Breakpoints Event Event ، يمكنك تعيين نقاط التوقف في مجموعة متنوعة من أنواع الأحداث مثل Keyboard و Touch و XHR.

الكلمة الأساسية "المصحح"

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



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

لتلخيصها

في البداية ، اعتبرنا console.log () و window.alert () ووجدنا أنهما غير مفيدين حقًا. كان من المفترض أن نستخدمها كثيرًا عبر الشفرة ، مما قد يجعل الشفرة أثقل وأبطأ إذا نسينا إزالة هذه الأوامر عند الالتزام.

مع نمو الشفرة ، يمكن أن تكون أدوات المطور في Chrome أكثر فاعلية للقبض على أي أخطاء وتقييم الأداء بشكل عام.

تصحيح الزاوي

أسهل طريقة لتصحيح الرمز الزاوي عبر رمز Visual Studio (رمز VS). لبدء تصحيح الأخطاء ، ستحتاج إلى تثبيت ملحق Debugger على متصفح Chrome:

1. قم بتشغيل VS Code مع مشروعك الحالي ، افتح علامة التبويب ملحقات. أو اضغط على Ctrl + Shift + X على لوحة المفاتيح.
2. أدخل Chrome في حقل البحث.
3. من نتائج البحث ، حدد Debugger for Chrome وانقر فوق تثبيت.
4. بعد تثبيت الامتداد ، سيظهر زر إعادة التحميل. انقر فوقه لإكمال التثبيت وتنشيط Debugger في المستعرض.

تحديد نقاط التوقف

تمامًا كما فعلنا من قبل ، في app.component.ts ، انقر فوق رقم السطر الموجود على يسار السطر. سيتم تعيين نقطة التوقف المحددة برمز دائرة حمراء.

تكوين المصحح

أولاً ، سنحتاج إلى تكوين مصحح الأخطاء:

1. من مستكشف الملفات ، انتقل إلى طريقة العرض Debug. يمكنك أيضًا استخدام اختصار Ctrl + Shift + D.
2. انقر على زر أيقونة الإعدادات لإنشاء launch.json. هذا هو ملف التكوين الذي سنستخدمه.
3. من القائمة المنسدلة "تحديد البيئة" ، حدد Chrome. سيؤدي ذلك إلى إنشاء مجلد .vscode جديد مع ملف launch.json في مشروعك.
4. قم بتشغيل الملف.
5. لتناسب الملف لغرضنا ، في طريقة عنوان url ، قم بتغيير منفذ المضيف المحلي من 8080 إلى 4200.
6. حفظ التغييرات. سيبدو الملف الخاص بك كما يلي:
   
   
7. اضغط F5 على لوحة المفاتيح أو انقر فوق الزر "بدء التصحيح" لبدء تشغيل "المصحح".
8. قم بتشغيل Chrome.
9. قم بتحديث الصفحة لإيقاف الكود مؤقتًا عند نقطة الإيقاف المحددة.

يمكنك تصفح الكود بالتسلسل باستخدام زر F10 لفحص المتغيرات وتغييرها.

التمهيدي

يحتوي ملحق Debugger for Chrome على الكثير من المعلومات حول التكوينات الإضافية ، والعمل مع خرائط المصدر ، وحل المشكلات المختلفة. يمكنك عرضها مباشرة في رمز VS بالنقر فوق الملحق وتحديد علامة تبويب "التفاصيل".

تصحيح النهاية الخلفية (Node.js)

ستجد هنا كيفية تصحيح كود Node.js. إليك الطرق الأكثر شيوعًا:

• باستخدام Chrome DevTools. حسنا ، هذا هو المفضل لدينا إلى حد بعيد.
• استخدام IDEs مثل Visual Studio Code و Visual Studio و WebStorm وما إلى ذلك.

سنستخدم VS Code و Chrome DevTools للتوضيح.

يستخدم Chrome و Node.js نفس محرك جافا سكريبت ، Google V8 ، مما يعني أنه يمكننا استخدام الأدوات التي استخدمناها لتصحيح الأخطاء في الواجهة الأمامية.

للقيام بذلك:

1. أطلق مشروعك في كود VS.
2. انتقل إلى علامة التبويب وحدة التحكم.
3. أدخل أو الصق npm start --inspect command واضغط على Enter.
4. تجاهل عنوان URL المقترح "chrome-devtools: // ..." (هناك طريقة أفضل).
   
5. قم بتشغيل Chrome وأدخل أو الصق "about: check". سيؤدي ذلك إلى إعادة توجيهك إلى صفحة الأجهزة في DevTools.
6. انقر فوق فتح DevTools مخصص للارتباط التشعبي للعقدة.

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

شكرا للقراءة وآمل أن تستمتع هذا المقال. اشترك في تحديثاتنا ، لدينا الكثير من الأشياء الرائعة في غلافنا :)