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

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

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

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

جوجل كروم

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

1. انقر على زر القائمة الرئيسية في Chrome ، مع ثلاث خطوط أفقية وموجودة في الزاوية العلوية اليسرى من المتصفح.
2. عندما تظهر القائمة المنسدلة ، حرك مؤشر الماوس فوق المزيد من الأدوات اختيار.
3. يجب أن تظهر قائمة فرعية الآن. حدد الخيار المسمى ادوات المطورين . يمكنك أيضًا استخدام اختصار لوحة المفاتيح التالي بدلاً من عنصر القائمة هذا: Chrome OS / Windows ( CTRL + SHIFT + I ) ، Mac OS X ( ALT (OPTION) + COMMAND + I )
4. يجب الآن عرض واجهة أدوات مطوري Chrome ، كما هو موضح في لقطة الشاشة لهذا المثال. بناءً على إصدار Chrome ، قد يختلف التنسيق الأولي الذي تراه بشكل طفيف عن التنسيق المعروض هنا. يحتوي المحور الرئيسي لأدوات المطور ، التي توجد عادةً على الجانب السفلي أو الأيمن من الشاشة ، على علامات التبويب التالية.عناصر: يوفر القدرة على فحص شفرة HTML و CSS بالإضافة إلى تحرير CSS على الفور ، ومشاهدة تأثيرات التغييرات في الوقت الحقيقي.وحدة التحكم: تسمح وحدة تحكم جافا سكريبت من Chrome بإدخال الأوامر المباشرة بالإضافة إلى تصحيح الأخطاء التشخيصية.مصادر: يتيح لك تصحيح تعليمات JavaScript البرمجية عبر واجهة رسومية قوية.شبكة الاتصال: يصنف ويعرض معلومات تفصيلية حول كل عملية ذات صلة على التطبيق أو الصفحة النشطة ، بما في ذلك رؤوس الطلبات والاستجابة الكاملة بالإضافة إلى مقاييس التوقيت المتقدمة.الجدول الزمني: يسمح بإجراء تحليل متعمق لكل نشاط يحدث داخل المتصفح بمجرد بدء طلب تحميل صفحة أو تطبيق.
5. بالإضافة إلى هذه الأقسام ، يمكنك أيضًا الوصول إلى الأدوات التالية عبر >> أيقونة ، تقع على يمين الجدول الزمني التبويب.الملف الشخصي: تقسم الى منظار وحدة المعالجة المركزية و التعريف كومة المقاطع ، يوفر استخدام الذاكرة شامل ووقت التنفيذ العام للتطبيق النشط أو الصفحة.الأمان: تبرز مشاكل الشهادات والمشاكل الأخرى المتعلقة بالأمان مع الصفحة أو التطبيق النشط.مصادر: هذا هو المكان الذي يمكنك فيه فحص ملفات تعريف الارتباط ، والتخزين المحلي ، وذاكرة التخزين المؤقت للتطبيق ، ومصادر البيانات المحلية الأخرى التي تستخدمها صفحة الويب الحالية أو التطبيق.المراجعات: يقدم طرقًا لتحسين وقت تحميل الصفحة أو التطبيق والأداء العام.
6. وضع الجهاز يسمح لك بعرض الصفحة النشطة في محاكي مما يجعلها تقريبًا تمامًا كما تظهر على واحد من أكثر من اثني عشر جهازًا ، بما في ذلك العديد من طرز Android و iOS المعروفة مثل iPad و iPhone و Samsung Galaxy. يتم منحك أيضًا القدرة على محاكاة دقة الشاشة المخصصة لتناسب احتياجات التطوير أو الاختبار الخاصة بك. للتبديل وضع الجهاز داخل وخارج ، حدد رمز الهاتف المحمول الموجود مباشرة على يسار عناصر التبويب.
7. يمكنك أيضًا تخصيص شكل وأسلوب أدوات المطورين من خلال النقر أولاً على زر القائمة ممثلة بثلاث نقاط موضعية رأسياً وتقع على أقصى الجانب الأيسر من علامات التبويب المذكورة أعلاه. من خلال هذه القائمة المنسدلة ، يمكنك إعادة وضع المرسى أو إظهار أو إخفاء أدوات مختلفة بالإضافة إلى إطلاق عناصر أكثر تقدمًا مثل مفتش أجهزة. ستجد أن واجهة أدوات التطوير نفسها قابلة للتخصيص بدرجة كبيرة من خلال الإعدادات الموجودة في هذا القسم.

موزيلا فايرفوكس

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

Lifewire وأوصت القراءة:أفضل 25 مخطوطات مستخدم Greasemonkey و Tampermonkey

1. انقر على زر القائمة الرئيسية في فايرفوكس ، ممثلة بثلاثة خطوط أفقية وتقع في الزاوية العلوية اليمنى من نافذة المتصفح.
2. عندما تظهر القائمة المنسدلة ، حدد الرمز المسمى مطور . ال مطور ويب يجب أن يتم الآن عرض القائمة ، تحتوي على الخيارات التالية.ستلاحظ أن معظم عناصر القائمة بها اختصارات لوحة مفاتيح مقترنة بها.أدوات تبديل: عرض واجهة أدوات مطوري البرامج أو إخفائها ، وعادةً ما يتم وضعها في الجزء السفلي من نافذة المتصفح. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + I )، شبابيك ( CTRL + SHIFT + I )مفتش: يسمح لك بفحص و / أو تعديل شفرة CSS و HTML على الصفحة النشطة وكذلك على جهاز محمول عن طريق تصحيح الأخطاء عن بُعد. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + C )، شبابيك ( CTRL + SHIFT + C )وحدة تحكم الويب: يسمح لك بتنفيذ تعبيرات JavaScript في الصفحة النشطة بالإضافة إلى مراجعة مجموعة متنوعة من البيانات المسجلة بما في ذلك تحذيرات الأمان وطلبات الشبكة ورسائل CSS والمزيد. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + K )، شبابيك ( CTRL + SHIFT + K )مصحح: ال مصحح جافا سكريبت يتيح لك تحديد العيوب وإصلاحها من خلال تحديد نقاط التوقف ، وفحص عقد DOM ، ومصادر خارجية لملاكمة سوداء ، وغير ذلك الكثير. كما هو الحال مع مفتش ، هذه الميزة تدعم أيضا التصحيح عن بعد. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + S )، شبابيك ( CTRL + SHIFT + S) محرر النمط: يسمح لك بإنشاء أوراق أنماط جديدة ودمجها مع صفحة الويب النشطة ، أو تحرير الأوراق الموجودة واختبار كيفية عرض التغييرات في متصفح بنقرة واحدة فقط. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F7 )أداء: يقدم تفصيلاً مفصلاً لأداء شبكة الصفحة النشطة ، وبيانات معدل الإطار ، ووقت تنفيذ جافا سكريبت ، والولاية ، وطلاء الطلاء ، وأكثر من ذلك بكثير. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F5 )شبكة الاتصال: يسرد كل طلب شبكة يبدأ بواسطة المتصفح مع الطريقة المقابلة ، ونطاق المصدر ، والنوع ، والحجم ، والوقت المنقضي. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + Q )، شبابيك ( CTRL + SHIFT + Q )شريط أدوات المطور: يفتح مترجم سطر أوامر تفاعلي. أدخل مساعدة في المترجم للحصول على قائمة بجميع الأوامر المتاحة وبناء الجملة الصحيح. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F2 )WebIDE: يوفر القدرة على إنشاء تطبيقات الويب وتنفيذها من خلال جهاز فعلي يعمل بنظام التشغيل Firefox أو عبر Firefox OS Simulator. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F8 )وحدة تحكم المستعرض: يوفر نفس الوظائف مثل وحدة تحكم الويب (أنظر فوق). ومع ذلك ، فإن جميع البيانات التي يتم إرجاعها هي لتطبيق فايرفوكس بالكامل (بما في ذلك الملحقات ووظائف مستوى المتصفح) على عكس صفحة الويب النشطة فقط. اختصار لوحة المفاتيح: Mac OS X ( SHIFT + COMMAND + J )، شبابيك ( CTRL + SHIFT + J )عرض التصميم المتجاوب: يسمح لك بعرض صفحة الويب فورًا في درجات مختلفة من الدقة والتخطيطات وأحجام الشاشة لتقليد العديد من الأجهزة بما في ذلك الأجهزة اللوحية والهواتف الذكية. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + M )، شبابيك ( CTRL + SHIFT + M )الشافطة: يعرض رمز اللون ست عشري للبيكسل المحدد بشكل فردي.المسودة: يتيح لك كتابة مقتطفات من شفرة JavaScript وتحريرها ودمجها وتنفيذها من داخل نافذة فايرفوكس المنبثقة. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F4 )مصدر الصفحة: أداة المطور الأصلية القائمة على المتصفح ، يعرض هذا الخيار ببساطة شفرة المصدر المتوفرة للصفحة النشطة. اختصار لوحة المفاتيح: Mac OS X ( COMMAND + U )، شبابيك ( CTRL + U )احصل على المزيد من الأدوات: يفتح مربع أدوات المطور على الويب جمع على موقع إضافات الرسمية في موزيلا ، ويضم نحو عشرة ملحقات شعبية مثل Firebug و Greasemonkey.

مايكروسوفت ايدج / انترنت اكسبلورر

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

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

Apple Safari (OS X only)

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

1. انقر فوق رحلات السفاري في قائمة المتصفح ، الموجودة أعلى الشاشة. عندما تظهر القائمة المنسدلة ، حدد تفضيلات . يمكنك أيضًا استخدام اختصار لوحة المفاتيح التالي بدلاً من عنصر القائمة هذا: COMMAND + فاصلة (،)
2. سفاري تفضيلات يجب أن يتم الآن عرض الواجهة ، التي تطفو على نافذة المتصفح. اضغط على المتقدمة رمز ، الموجود في أقصى الجانب الأيسر من الرأس.
3. ال المتقدمة يجب أن تكون التفضيلات مرئية الآن. في أسفل هذه الشاشة هو خيار المسمى إظهار قائمة التطوير في شريط القوائم ، يرافقه مربع الاختيار. في حالة عدم ظهور علامة اختيار في المربع ، انقر فوقها مرة واحدة لوضع علامة هناك.
4. أقفل ال تفضيلات من خلال النقر على علامة "x" الحمراء الموجودة في الزاوية العلوية اليسرى.
5. يجب أن تلاحظ الآن خيارًا جديدًا في قائمة المتصفح المسماة طور ، تقع بين إرسال و نافذة او شباك . انقر فوق عنصر القائمة هذا. يجب الآن عرض قائمة منسدلة تحتوي على الخيارات التالية.فتح الصفحة مع: يسمح لك بفتح صفحة الويب النشطة في أحد المتصفحات الأخرى المثبتة حاليًا على جهاز Mac.وكيل المستخدم: يتيح لك الاختيار من بين أكثر من اثنتي عشرة من عوامل وكيل المستخدم المعرفة مسبقًا بما في ذلك العديد من إصدارات Chrome و Firefox و Internet Explorer ، بالإضافة إلى تحديد السلسلة المخصصة الخاصة بك.أدخل وضع التصميم السريع الاستجابة: يعرض الصفحة الحالية كما تظهر على أجهزة مختلفة وفي دقة شاشة مختلفة.عرض مفتش الويب: يُطلق الواجهة الرئيسية لأدوات التطوير الخاصة بـ Safari ، والتي يتم وضعها عادةً في الجزء السفلي من شاشة متصفحك وتحتوي على الأقسام التالية: عناصر , شبكة الاتصال , مصادر , الجداول الزمنية , المصحح , تخزين , وحدة التحكم .إظهار وحدة تحكم الأخطاء: كما تطلق واجهة أدوات ديف ، مباشرة إلى وحدة التحكم علامة التبويب التي تعرض الأخطاء والتحذيرات وبيانات السجل الأخرى القابلة للبحث.عرض مصدر الصفحة: يفتح مصادر علامة التبويب ، التي تعرض شفرة المصدر للصفحة النشطة المصنفة حسب المستند.عرض موارد الصفحة: ينفذ نفس الوظيفة عرض مصدر الصفحة اختيار.عرض محرر مقتطفات: يفتح نافذة جديدة حيث يمكنك إدخال شفرة CSS و HTML ، مع معاينة إخراجها على الفور.إظهار أداة إنشاء البنايات: يوفر القدرة على إنشاء أو تعديل إضافات Safari مع CSS و HTML و JavaScript.إظهار تسجيل المخطط الزمني: يفتح الجداول الزمنية وبدء عرض طلبات الشبكة ، وتخطيط وتقديم المعلومات وكذلك تنفيذ جافا سكريبت في الوقت الحقيقي.تخزين مؤقت فارغ: يحذف ذاكرة التخزين المؤقت التي يتم تخزينها حاليًا على محرك الأقراص الثابت.تعطيل ذاكرة التخزين المؤقت: توقف Safari من التخزين المؤقت بحيث يتم استرداد كل المحتويات من الخادم عند كل تحميل للصفحة.تعطيل الصور: يمنع الصور من تقديم جميع صفحات الويب.تعطيل الأنماط: يتجاهل خصائص CSS عند تحميل الصفحة.ألغ تفعيل الجافا سكربت: يقيد تنفيذ جافا سكريبت في جميع الصفحات.تعطيل الإضافات: يحظر جميع الملحقات المثبتة من التشغيل داخل المتصفح.تعطيل تعطيل موقع معين: إذا تم تعديل Safari للتعامل مع المشكلة (الإصدارات) الخاصة بصفحة الويب النشطة ، فسيقوم هذا الخيار بحظر هذه التغييرات بحيث يتم تحميل الصفحة كما كان من قبل أن يتم إدخال هذه التعديلات.تعطيل قيود الملفات المحلية: للسماح للمتصفح بالدخول إلى الملفات الموجودة على الأقراص المحلية ، وهو إجراء مقيد بشكل افتراضي لأسباب تتعلق بالأمان.تعطيل قيود عبر المنشأ: يتم وضع هذه القيود بشكل افتراضي لمنع XSS وغيرها من المخاطر المحتملة. ومع ذلك ، فإنهم غالباً ما يحتاجون إلى تعطيل مؤقت لأغراض التنمية.السماح بـ JavaScript من حقل البحث الذكي: عند التمكين ، يوفر القدرة على إدخال عناوين URL مع جافا سكريبت: دمجها مباشرة في شريط العنوان.تعامل شهادات SHA-1 باعتبارها غير آمنة: تعتبر شهادات SSL التي تستخدم خوارزمية SHA-1 قديمة وخالية من الضعف.