كيفية إعداد مصحح أخطاء ملحق Chrome في Visual Studio Code

تصحيح تطبيقات الويب الخاصة بك باستخدام Visual Studio Code يجعلك أكثر فاعلية. يساعدك على توفير الكثير من الوقت ويحافظ على نظافة الكود. هذا لأنه لا يتعين عليك كتابة مجموعة من console.logs ويمكنك الذهاب من خلال خط تنفيذ التعليمات البرمجية الخاصة بك. ولكن إذا كنت هنا ، فربما تعرف فوائد تصحيح تطبيقات الويب. لذلك دعونا نبدأ ...

الحصول على اقامة

أول شيء عليك القيام به هو تثبيت ملحق Debugger for Chrome. بعد تثبيته ، أصبحت جاهزًا تقريبًا للذهاب. الشيء التالي الذي عليك القيام به هو إنشاء ملف تشغيل لـ Visual Studio Code Debugger. يحتوي هذا الملف على تكوينات مختلفة من مصحح الأخطاء لمشروعك.

يمكنك إنشاء ملف التشغيل من خلال الانتقال إلى قسم التصحيح في شريط النشاط والنقر على أيقونة الترس.

هذا رمز الترس.

ستطالبك قائمة بالخيارات بتحديد الخيار "Chrome".

مثله.

بعد القيام بذلك ، سيكون لديك دليل .vscode مع ملف launch.json.

تكوينات

هناك نوعان من تكوينات تصحيح أخطاء Chrome: التشغيل والإرفاق. يمكنك تعيين هذا في خيار الطلب داخل كل كائن التكوين.

إطلاق

يُطلق تكوين التشغيل مثيل Chrome يشغل ملفًا محددًا أو عنوان URL محددًا. إذا حددت عنوان URL ، فيجب عليك ضبط webRoot على الدليل الذي يتم تقديم الملفات منه. يمكن أن يكون هذا إما مسارًا مطلقًا أو مسارًا باستخدام محلل $ {workspaceFolder}. هذا هو المجلد الذي تم فتحه في مساحة عمل Visual Studio Code.

ملاحظة: كن حذرًا أثناء إعداد webRoot ، يُستخدم في حل عناوين URL إلى ملف على جهاز الكمبيوتر الخاص بك.

يمكنك الاطلاع على مثال لتكويني التشغيل: أحدهما يتم تشغيله مقابل خادم محلي والآخر يشبه ملفًا محليًا.

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

ملاحظة: عند إيقاف تشغيل مصحح الأخطاء ، سيؤدي ذلك إلى إغلاق نافذة Chrome.

يربط

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

شبابيك

هناك طريقتان لتشغيل Chrome مع تصحيح الأخطاء عن بُعد في Windows. أبسط واحد هو النقر بزر الماوس الأيمن فوق اختصار Google Chrome. حدد خيار الخصائص وإلحاق الأمر التالي في الحقل الهدف.

--remote-التصحيح-ميناء = 9222

ملاحظة: سيؤدي هذا إلى تشغيل Chrome مع تمكين تصحيح الأخطاء عن بُعد في كل مرة تقوم فيها بالنقر فوق الاختصار.

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

 \ chrome.exe - منفذ تصحيح الأخطاء = 9222

ماك

افتح الجهاز وقم بتنفيذ الأمر التالي:

/ Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222

لينكس

ابدأ تشغيل الجهاز وقم بتشغيل هذا الأمر:

google-chrome --remote-debugging-port = 9222

ما يفعله هذا - بغض النظر عن نظام التشغيل - هو فتح Chrome مع العلم ، وفي هذه الحالة: --emote-debugging-port ، وتعيينه على 9222. يمكنك قراءة المزيد حول هذا هنا.

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

إليك نموذج إرفاق نموذج.

ملاحظة: إذا لم تقم بتعيين خيار "url" ، فستتم مطالبتك بقائمة بعلامات التبويب المفتوحة.

يحتوي هذا الملحق على الكثير من الخيارات المفيدة التي يمكنك استخدامها لتكييف التكوينات مع مشروعك. يمكنك قراءة وثائق بعض منهم هنا.

ملخص

تهانينا! لقد تعلمت كيفية تثبيت مصحح أخطاء Chrome وإعداده في Visual Studio Code. لقد تعلمت أيضًا كيفية تشغيل Google Chrome مع تمكين تصحيح الأخطاء عن بُعد. لقد حان الوقت الآن لاستكشاف معرفتك الجديدة وتوسيعها ... أوصي بشدة بإلقاء نظرة على مستودع الملحق.

اتمنى أنك استمتعت بهذا المنشور. يمكنك أن تجدني على Twitter_svictoreq.