كيفية تصحيح الواجهة الأمامية والخلفية: إرشادات خطوة بخطوة

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

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

الأهداف:

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

اصطياد الأخطاء على الواجهة الأمامية (JavaScript ، Angular)

تسمح الكثير من الخدمات الآن برمز الخصم على الواجهة الأمامية. يعد Chrome DevTools و Firefox Developer Tools الأكثر شيوعًا بينها ، ولكن المتصفحات الأخرى لديها أيضًا أدواتها الخاصة. سنستخدم Chrome DevTools للحصول على أمثلة.

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

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

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

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

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

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

في HTML:


في JavaScript:



احفظه كـ app.js.

إليك كيفية ظهور صفحتنا في المتصفح:



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



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

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

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

بالعودة إلى المثال ، دعنا نطلق الصفحة في Google Chrome وننفذ ما يلي:

1. لفتح أدوات مطوّري برامج Chrome ، في الزاوية العلوية اليمنى من المتصفح ، انقر لفتح قائمة الإعدادات.
2. في هذه القائمة ، حدد أدوات إضافية (في القائمة الإنجليزية - أدوات إضافية) ، ثم أدوات المطور (أدوات المطور).

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



مع فتح شريط أدوات المطور ، فلنوقف رمز نقطة الإيقاف مؤقتًا:

1. حدد علامة تبويب المصادر.
2. في Sources ، في لوحة الصفحة ، حدد app.js (الذي أنشأناه سابقًا).
3. في محرر الشفرة ، انقر فوق رقم السطر let data =document.getElementById('name').value;

وبالتالي ، قمنا بتعيين نقطة توقف (للراحة ، يخصص البرنامج مكانًا به نقطة توقف بعلم أزرق). لاحظ أيضًا أن المتغير caved يضاف تلقائيًا إلى Breakpoints> Local section (في لوحة JavaScript Debugging).

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

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



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

دعنا ندخل مرحبا العالم في مجال الإدخال. سيتم إضافة البيانات = "مرحبا العالم" إلى السطر. الآن ، دعونا نضغط على زر الخطوة على وظيفة call () التالية.



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

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

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

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



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

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

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

كيف يمكن وضع نقاط التوقف

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

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



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



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

باستخدام Event Breakener Breakpoints ، يمكنك وضع نقاط التوقف على مجموعة من أنواع مختلفة من الأحداث ، مثل لوحة المفاتيح و Touch و XHR.

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

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



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

ضغط

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

نظرًا لتزايد عدد الخطوط ، تصبح أدوات المطور في Chrome أكثر فاعلية في اكتشاف الأخطاء وتقييم الأداء العام.

الزاوي المدين

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

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

كيفية تعيين نقطة توقف؟

مثلما هو الحال في DevTools ، انقر فوق رقم السطر في app.component.ts. يتم تمييز خط مع نقطة توقف في دائرة حمراء (على يسار رقم السطر).

تكوين المصحح

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

1. من مستكشف الملفات ، انتقل إلى علامة التبويب تصحيح.
يمكنك أيضًا استخدام Ctrl + Shift + D لهذا الغرض.

2. انقر على أيقونة الإعدادات لإنشاء launch.json.
هذا هو ملف الإعدادات الذي سنستخدمه.

3. من القائمة المنبثقة Select Environment ، حدد Chrome.
سيؤدي ذلك إلى إنشاء مجلد .vscode وملف launch.json جديد لمشروعك.

4. قم بتشغيل هذا الملف.

5. لاستخدام هذا الملف لأغراضنا ، في طريقة عنوان url ، استبدل منفذ المضيف المحلي من 8080 إلى 4200.

6. حفظ التغييرات.

إليك ما يجب أن يبدو عليه الملف:



7. اضغط F5 أو انقر فوق الزر "بدء التصحيح" لبدء تشغيل "المصحح".

8. قم بتشغيل Chrome.

9. لإيقاف تنفيذ الكود عند نقطة توقف ، قم بتحديث الصفحة.



لعرض تنفيذ التعليمات البرمجية بالتتابع وكيفية تغير المتغيرات ، استخدم المفتاح F10.

التمهيدي

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

Backend Debugging (Node.js)

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

• استخدام Chrome DevTools
في الوقت الحالي ، هذا هو النهج المفضل لدينا.

• استخدام IDE shki مثل Visual Studio Code و Visual Studio و WebStorm ، إلخ.

على سبيل المثال ، سوف نستخدم VS Code و Chrome DevTools.

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

للقيام بذلك:

1. قم بتشغيل مشروعك في كود VS.

2. انقر فوق علامة التبويب وحدة التحكم.

3. اكتب npm start - انظر ثم اضغط على Enter.

4. تجاهل عنوان URL المقترح لـ "chrome-devtools: // ..." (هناك طريقة أفضل).



5. قم بتشغيل Chrome وأدخل "about: inspect".

سيؤدي ذلك إلى إعادة توجيهك إلى علامة تبويب "الأجهزة" في DevTools.

6. انقر على الرابط فتح DevTools مخصصة للعقدة.



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

شكرا للقراءة وآمل أن تستمتع هذا المنصب. اشترك في التحديثات - لا يزال لدينا الكثير من الأشياء المفيدة في جعبتنا :-)