اذهب إلى المحتوى

كيف تستخدم أدوات المطوِّر DevTools في Chrome


محمد سلطان

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

الشيفرة المصدرية الخاصة بمثال الرزنامة


تفاعل الأعضاء

أفضل التعليقات

بتاريخ On 07/01/2021 at 19:17 قال عبدالله ابوالخير:

السلام عليكم شرح ممتاز لكن سؤال كيف بيتم حفظ هذه الاجراءت لان عندما يتم التعديل من هذه الاداه لا يتم الحفظ 

مرحباً @عبدالله ابوالخير 

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

هناك طرق ثانية يُتيحها المُتصفح ك workspaces و هذه الخاصية تسمح بإستخدام المُتصفح كIde أي سنتمكن من خلالها التعديل على الملفات مُباشرة في المتصفح لإستعمال هذه الخاصية نفتح أدوات المُطور ثم نتوجه إلى sources ثم Filesystem و بعدها نضغط بالزر الأيمن و نختار Add Folder to Workspace بعدها تختار مُجلد مشروعك بعدها ستظهر لك رسالة من المتصفح من خيارين للسماح او عدم السماح له للتعديل على الملفات بعد الضغط على زر السماح ستتمكن من التعديل على الملفات مُباشرةً :

workspace.thumb.png.b69cdd58c091232f2bd026fba93527fa.png

 هناك طريقة أخرى تُسمى Local Overrides و لإستعمالها تتبع الخطوات التالية:

  1. فتح أدوات المُطور
  2. إنتقل إلى Source
  3. إنتقل إلى تبويب Overrides
  4. إضغط على Select Folder For Overrides
  5. حدد مُجلد المشروع الذي تريد حفظ التغييرات فيه.
  6. في الأعلى سيطلب من المتصفح صلاحية قراءة و التعديل على الملفات إضغط على زر السماح
  7. قم بالتعديلات التي تريد

override.thumb.gif.df03b2f9c84c84d3ddcbfd52088200f3.gif

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ On 1/7/2021 at 10:17 قال عبدالله ابوالخير:

السلام عليكم شرح ممتاز لكن سؤال كيف بيتم حفظ هذه الاجراءت لان عندما يتم التعديل من هذه الاداه لا يتم الحفظ 

لحفظ التعديلات التي تقوم بها في أدوات المطورين يمكنك استخدام الخطوات التالية، حيث سيتم ربط ملفات المشروع الخاص بك بأدوات المطورين و يتم كتابة التعديلات في ملفات مشروعك بشكل تلقائي:

  1. اضغط على كلمة sources في DevTools
  2. ثم Filesystem بعد ذلك علامة + 
  3. سيظهر لك نافذة لاختيار المجلد / الملفات التي تحتوي المشروع 
  4. قم باختيار الملف و ابدأ بالعمل و سيتم نقل التغييرات في ملفات المشروع

5f16063d34df7_Annotation2020-07-20225804.thumb.jpg.0d2d9d93949bc1ddd074fff29912f23a.jpg.1c7b60526ba5427364967c3d4691e970.jpg

5f16079d2a6ca_Annotation2020-07-20230128.thumb.jpg.f1c30d97de257fd61507a6b529e22f7e.jpg.89d7e30bee789d267d3616ab4b852c6a.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...