كيفية استخدام أدوات مطور متصفح الويب

2024 مؤلف: Abigail Brown | [email protected]. آخر تعديل: 2023-12-17 06:38

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

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

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

ترشدك البرامج التعليمية أدناه إلى كيفية الوصول إلى أدوات المطور هذه في العديد من متصفحات الويب الشائعة.

جوجل كروم

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

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

2. عندما تظهر القائمة المنسدلة ، حرك مؤشر الماوس فوق الخيار المزيد من الأدوات.

   

3. يجب أن تظهر قائمة فرعية الآن. حدد الخيار المسمى Developer tools. يمكنك أيضًا استخدام اختصار لوحة المفاتيح التالي بدلاً من عنصر القائمة هذا: Chrome OS / Windows (CTRL + SHIFT + I) ، Mac OS X (ALT (OPTION) + الأمر + أنا)

   

4. يجب الآن عرض واجهة Chrome Developer Tools ، كما هو موضح في لقطة الشاشة هذه. اعتمادًا على إصدار Chrome الذي تستخدمه ، قد يكون التخطيط الأولي الذي تراه مختلفًا قليلاً عن ذلك المعروض هنا. يحتوي المحور الرئيسي لأدوات المطور ، الموجود عادةً على الجانب السفلي أو الأيمن من الشاشة ، على علامات التبويب التالية.

5. بالإضافة إلى هذه الأقسام ، يمكنك أيضًا الوصول إلى الأدوات التالية عبر الرمز >> ، الموجود على يمين Performanceعلامة التبويب

   • Memory: مراقبة وتسجيل استخدام الذاكرة على صفحة الويب. يمكنك معرفة مدى ثقل JavaScript على موقعك.
   • Security: يبرز مشاكل الشهادة وغيرها من المشكلات المتعلقة بالأمان مع الصفحة أو التطبيق النشط.
   • Application: افحص الموارد المستخدمة بواسطة تطبيق ويب. احصل على تفصيل كامل لما يتم استخدامه.
   • Audits: يقدم طرقًا لتحسين وقت تحميل الصفحة أو التطبيق والأداء العام.

   

6. يتيح لك

   وضع الجهازعرض الصفحة النشطة في جهاز محاكاة يجعلها تقريبًا كما تظهر على واحد من أكثر من عشرة أجهزة ، بما في ذلك العديد من أجهزة Android المعروفة ونماذج iOS مثل iPad و iPhone و Samsung Galaxy. يتم منحك أيضًا القدرة على محاكاة دقة الشاشة المخصصة لتناسب احتياجات التطوير أو الاختبار الخاصة بك.

   للتبديل بين وضع الجهاز تشغيل وإيقاف ، حدد رمز الهاتف المحمول الموجود مباشرة على يسار العناصرعلامة التبويب.

   

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

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

   

Mozilla Firefox

قسم مطوري الويب في Firefox يتضمن أدوات للمصممين والمطورين والمختبرين على حد سواء مثل محرر النمط وقطارة استهداف البكسل.

1. حدد قائمة Firefox الرئيسية ، ممثلة ب ثلاثة خطوط أفقيةوالموجودة في الركن الأيمن العلوي من نافذة المتصفح.

2. عندما تظهر القائمة المنسدلة ، حدد Web Developer.

   

3. يجب الآن عرض قائمة Web Developer، التي تحتوي على الخيارات التالية. ستلاحظ أن معظم عناصر القائمة لها اختصارات لوحة مفاتيح مرتبطة بها.

   • Toggle Tools: يعرض أو يخفي واجهة أدوات المطور ، وعادة ما يتم وضعه في الجزء السفلي من نافذة المتصفح. اختصار لوحة المفاتيح: Mac OS X (ALT (OPTION) + COMMAND + I) ، Windows (CTRL + SHIFT + I)
   • المفتش: يسمح لك بفحص و / أو تعديل كود CSS و HTML على الصفحة النشطة وكذلك على جهاز محمول عبر التصحيح عن بعد. اختصار لوحة المفاتيح: Mac OS X (ALT (OPTION) + COMMAND + C) ، Windows (CTRL + SHIFT + C)
   • Web Console: يسمح لك بتنفيذ تعبيرات JavaScript داخل الصفحة النشطة بالإضافة إلى مراجعة مجموعة متنوعة من البيانات المسجلة بما في ذلك تحذيرات الأمان وطلبات الشبكة ورسائل CSS والمزيد. اختصار لوحة المفاتيح: Mac OS X (ALT (OPTION) + COMMAND + K) ، Windows (CTRL + SHIFT + K)
   • Debugger: يتيح لك مصحح أخطاء JavaScript تحديد العيوب وإصلاحها عن طريق تعيين نقاط التوقف ، وفحص عُقد DOM ، والمصادر الخارجية للملاكمة السوداء ، وغير ذلك الكثير. كما هو الحال مع المفتش ، تدعم هذه الميزة أيضًا تصحيح الأخطاء عن بُعد. اختصار لوحة المفاتيح: Mac OS X (ALT (OPTION) + COMMAND + S) ، Windows (CTRL + SHIFT + S)
   • Style Editor: يسمح لك بإنشاء أوراق أنماط جديدة ودمجها في صفحة الويب النشطة ، أو تحرير الأوراق الموجودة واختبار كيفية عرض التغييرات في المتصفح بنقرة واحدة فقط. اختصار لوحة المفاتيح: Mac OS X و Windows (SHIFT + F7)
   • Performance: يوفر تفصيلاً مفصلاً لأداء شبكة الصفحة النشطة ، وبيانات معدل الإطارات ، ووقت تنفيذ JavaScript وحالته ، ووميض الطلاء ، وغير ذلك الكثير. اختصار لوحة المفاتيح: Mac OS X و Windows (SHIFT + F5)
   • Network: يسرد كل طلب شبكة بدأه المتصفح إلى جانب الطريقة المقابلة ونطاق الأصل والنوع والحجم والوقت المنقضي. اختصار لوحة المفاتيح: Mac OS X (ALT (OPTION) + COMMAND + Q) ، Windows (CTRL + SHIFT + Q)
   • فاحص التخزين: ألق نظرة على ذاكرة التخزين المؤقت وملفات تعريف الارتباط التي يتم تخزينها بواسطة موقع ويب. اختصار لوحة المفاتيح: (SHIFT + F9)
   • Developer Toolbar: يفتح مترجم سطر أوامر تفاعلي. أدخل help في المترجم للحصول على قائمة بجميع الأوامر المتاحة وصياغتها الصحيحة. اختصار لوحة المفاتيح: Mac OS X و Windows (SHIFT + F2)
   • WebIDE: يوفر القدرة على إنشاء تطبيقات الويب وتنفيذها من خلال جهاز فعلي يعمل بنظام Firefox OS أو عبر Firefox OS Simulator. اختصار لوحة المفاتيح: Mac OS X و Windows (SHIFT + F8)
   • Browser Console: توفر نفس وظائف وحدة تحكم الويب (انظر أعلاه).ومع ذلك ، فإن جميع البيانات التي يتم إرجاعها هي لتطبيق Firefox بأكمله (بما في ذلك الإضافات والوظائف على مستوى المتصفح) بدلاً من صفحة الويب النشطة فقط. اختصار لوحة المفاتيح: Mac OS X (SHIFT + COMMAND + J) ، Windows (CTRL + SHIFT + J)
   • عرض التصميم المتجاوب: يتيح لك عرض صفحة الويب على الفور بدقة وتخطيطات وأحجام شاشة مختلفة لتقليد أجهزة متعددة بما في ذلك الأجهزة اللوحية والهواتف الذكية. اختصار لوحة المفاتيح: Mac OS X (ALT (OPTION) + COMMAND + M) ، Windows (CTRL + SHIFT + M)
   • Eyedropper: يعرض رمز اللون السداسي للبكسل المحدد بشكل فردي.
   • Scratchpad: تتيح لك المسودة كتابة مقتطفات من تعليمات JavaScript البرمجية وتعديلها ودمجها وتنفيذها من داخل نافذة Firefox المنبثقة. افتح مستند JavaScript تفاعلي يتيح لك كتابة التعليمات البرمجية واختبارها على موقع ويب. اختصار لوحة المفاتيح: (SHIFT + F4)
   • Service Workers: عمال خدمة التصحيح تطبيق الويب الخاص بك. احصل على معلومات مفصلة عن أدائهم وأخطائهم.
   • Page Source: أداة المطور الأصلية المستندة إلى المستعرض ، يعرض هذا الخيار ببساطة رمز المصدر المتاح للصفحة النشطة. اختصار لوحة المفاتيح: Mac OS X (COMMAND + U) ، Windows (CTRL + U)
   • احصل على المزيد من الأدوات: يفتح مجموعة Web Developer Toolboxعلى موقع الوظائف الإضافية الرسمي من Mozilla ، والذي يضم حوالي عشرة ملحقات شهيرة مثل مثل Firebug و Greasemonkey.

   

Microsoft Edge / Internet Explorer

يشار إليها عمومًا باسم F12 Developer Tools، تكريمًا لاختصار لوحة المفاتيح الذي أطلق الواجهة منذ الإصدارات السابقة من Internet Explorer ، ومجموعة أدوات التطوير في IE11 و Microsoft Edge لقد قطعت شوطًا طويلاً منذ إنشائها من خلال تقديم مجموعة مفيدة جدًا من الشاشات ، والمصححات ، والمحاكيات ، والمترجمين الفوريين.

لم تعد Microsoft تدعم Internet Explorer وتوصي بالتحديث إلى متصفح Edge الأحدث. توجه إلى موقعهم لتنزيل أحدث إصدار.

1. حدد المزيد من الإجراءات ، ممثلة بـ ثلاث نقاطوالموجودة في الزاوية اليمنى العليا من نافذة المتصفح.

   

2. عندما تظهر القائمة المنسدلة ، حدد الخيار المسمى Developer Tools.

   

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

   

   • DOM Explorer: يسمح لك بتحرير أوراق الأنماط و HTML في الصفحة النشطة ، وتقديم النتائج المعدلة كما تذهب. يستخدم وظيفة IntelliSense لإكمال التعليمات البرمجية تلقائيًا عند الاقتضاء. اختصار لوحة المفاتيح: (CTRL + 1)
   • Console: يوفر القدرة على إرسال معلومات تصحيح الأخطاء بما في ذلك العدادات والمؤقتات والتتبعات والرسائل المخصصة عبر واجهة برمجة تطبيقات متكاملة. يتيح لك أيضًا إدخال التعليمات البرمجية في صفحة ويب نشطة وتعديل القيم المخصصة للمتغيرات الفردية في الوقت الفعلي. اختصار لوحة المفاتيح: (CTRL + 2)
   • Debugger: يتيح لك تعيين نقاط التوقف وتصحيح التعليمات البرمجية أثناء تنفيذها ، سطرًا بسطر إذا لزم الأمر. اختصار لوحة المفاتيح: (CTRL + 3)
   • Network: يسرد كل طلب شبكة بدأه المتصفح أثناء تحميل الصفحة وتنفيذها بما في ذلك تفاصيل البروتوكول ونوع المحتوى واستخدام النطاق الترددي وغير ذلك الكثير. اختصار لوحة المفاتيح: (CTRL + 4)
   • Performance: تفاصيل معدلات الإطارات واستخدام وحدة المعالجة المركزية والمقاييس الأخرى المتعلقة بالأداء لمساعدتك على تسريع أوقات تحميل الصفحة والأنشطة الأخرى. اختصار لوحة المفاتيح: (CTRL + 5)
   • Memory: يساعدك على عزل وتصحيح تسريبات الذاكرة المحتملة على صفحة الويب الحالية من خلال عرض مخطط زمني لاستخدام الذاكرة مع لقطات من فترات زمنية مختلفة. اختصار لوحة المفاتيح: (CTRL + 6)
   • Emulation: يوضح لك كيفية عرض الصفحة النشطة بدرجات دقة وأحجام شاشة مختلفة ، ومحاكاة الهواتف الذكية والأجهزة اللوحية والأجهزة الأخرى. كما يوفر أيضًا القدرة على تعديل وكيل المستخدم واتجاه الصفحة ، بالإضافة إلى محاكاة المواقع الجغرافية المختلفة عن طريق إدخال خطوط الطول والعرض. اختصار لوحة المفاتيح: (CTRL + 7)

4. لعرض وحدة التحكم أثناء استخدام أي من الأدوات الأخرى ، اضغط على الزر المربعمع القوس الأيمن بداخله ، الموجود في الزاوية اليمنى العلوية لواجهة أدوات التطوير

   

5. لإلغاء إرساء واجهة أدوات المطور بحيث تصبح نافذة منفصلة ، حدد مستطلين متتاليين أو استخدم اختصار لوحة المفاتيح التالي: CTRL + P. يمكنك إعادة الأدوات إلى موقعها الأصلي بالضغط على CTRL + P مرة ثانية.

   

Apple Safari (Mac فقط)

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

1. حدد Safari في قائمة المتصفح ، الموجودة في الجزء العلوي من شاشتك. عندما تظهر القائمة المنسدلة ، حدد Preferences. يمكنك أيضًا استخدام اختصار لوحة المفاتيح التالي بدلاً من عنصر القائمة هذا: COMMAND + COMMA(،)

   

2. يجب الآن عرض واجهة

   Safari's Preferences ، مع تراكب نافذة المتصفح. حدد رمز متقدم، الموجود في أقصى الجانب الأيمن من الرأس.

   

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

   

4. أغلق واجهة Preferences.

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

   • Open Page With: يسمح لك بفتح صفحة الويب النشطة في أحد المتصفحات الأخرى المثبتة حاليًا على جهاز Mac الخاص بك.
   • User Agent: يتيح لك الاختيار من بين أكثر من اثنتي عشرة قيمة محددة مسبقًا لوكيل المستخدم بما في ذلك العديد من إصدارات Chrome و Firefox و Internet Explorer ، بالإضافة إلى تحديد مخصصك الخاص سلسلة
   • أدخل وضع التصميم المتجاوب: يعرض الصفحة الحالية كما تظهر على الأجهزة المختلفة وبدرجات دقة شاشة مختلفة.
   • Show Web Inspector: يُطلق الواجهة الرئيسية لأدوات التطوير في Safari ، والتي يتم وضعها عادةً في الجزء السفلي من شاشة المتصفح وتحتوي على الأقسام التالية: العناصر ، والشبكة ، والموارد ، والمخططات الزمنية ، المصحح ، التخزين ، وحدة التحكم.
   • Show Error Console: يتم أيضًا تشغيل واجهة أدوات dev ، مباشرةً إلى علامة التبويب Consoleالتي تعرض الأخطاء والتحذيرات وغيرها من العناصر القابلة للبحث بيانات السجل.
   • Show Page Source: يفتح علامة التبويب Resources، التي تعرض شفرة المصدر للصفحة النشطة المصنفة حسب المستند.
   • Show Page Resources: يؤدي نفس الوظيفة كخيار إظهار مصدر الصفحة.
   • Show Snippet Editor: يفتح نافذة جديدة حيث يمكنك إدخال كود CSS و HTML ، مع معاينة مخرجاته على الفور.
   • Show Extension Builder: يوفر القدرة على إنشاء أو تعديل ملحقات Safari باستخدام CSS و HTML و JavaScript.
   • Show Timeline Recording: يفتح علامة التبويب Timelines ويبدأ في عرض طلبات الشبكة والتخطيط وتقديم المعلومات بالإضافة إلى تنفيذ JavaScript في الوقت الفعلي.
   • Empty Caches: يحذف ذاكرة التخزين المؤقت بالكامل المخزنة حاليًا على محرك الأقراص الثابتة.
   • Disable Caches: يوقف Safari من التخزين المؤقت بحيث يتم استرداد كل المحتوى من الخادم عند تحميل كل صفحة.
   • Disable Images: يمنع عرض الصور على جميع صفحات الويب.
   • Disable Styles: يتجاهل خصائص CSS عند تحميل الصفحة.
   • Disable JavaScript: يقيد تنفيذ JavaScript في كل الصفحات.
   • Disable Extensions: يحظر تشغيل جميع الملحقات المثبتة داخل المتصفح.
   • Disable Site-specific Hacks: إذا تم تعديل Safari للتعامل بشكل صريح مع المشكلات الخاصة بصفحة الويب النشطة ، فسيقوم هذا الخيار بحظر هذه التغييرات حتى تظهر الصفحة الأحمال كما كان سيحدث قبل إدخال هذه التعديلات.
   • Disable Local File Restrictions: للسماح للمستعرض بالوصول إلى الملفات الموجودة على الأقراص المحلية ، وهو إجراء مقيد افتراضيًا لأسباب أمنية.
   • Disable Cross-Origin Restrictions: يتم وضع هذه القيود بشكل افتراضي لمنع XSS والمخاطر المحتملة الأخرى. ومع ذلك ، غالبًا ما يحتاجون إلى تعطيل مؤقتًا لأغراض التطوير.
   • السماح لـ JavaScript من حقل البحث الذكي: عند التمكين ، فإنه يوفر القدرة على إدخال عناوين URL باستخدام javascript: مدمج مباشرةً في شريط العنوان.
   • تعامل شهادات SHA-1 على أنها غير آمنة: تعتبر شهادات SSL التي تستخدم خوارزمية SHA-1 على نطاق واسع قديمة وغير قابلة للهجوم.