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

مجموعة أدوات متكاملة لمصممي الويب والمطورين والمختبرين

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

لقد ولت الأيام التي سمحت لك فيها فقط أدوات البرمجة والاختبار الموجودة في المتصفح بالاطلاع على شفرة مصدر الصفحة ولا شيء آخر. تتيح لك متصفحات اليوم إجراء عملية بحث أكثر عمقًا عن طريق تنفيذ أشياء مثل تنفيذ وتصحيح مقتطفات جافا سكريبت وفحص عناصر 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 بإدخال الأوامر المباشرة بالإضافة إلى تصحيح الأخطاء التشخيصية.
   المصادر: يتيح لك تصحيح رمز جافا سكريبت من خلال واجهة رسومية قوية.
   الشبكة: يصنف ويعرض معلومات تفصيلية حول كل عملية ذات صلة على التطبيق أو الصفحة النشطة ، بما في ذلك رؤوس الطلبات والاستجابة الكاملة بالإضافة إلى مقاييس التوقيت المتقدمة.
   التسلسل الزمني: يسمح بإجراء تحليل متعمق لكل نشاط يحدث داخل المتصفح بمجرد بدء طلب تحميل صفحة أو تطبيق.
5. بالإضافة إلى هذه الأقسام ، يمكنك أيضًا الوصول إلى الأدوات التالية عبر الرمز >> ، الموجود على يسار علامة التبويب "الفترة الزمنية" .
   الملف الشخصي: يتم تقسيمه إلى مُنظِّم وحدة المعالجة المركزية ومقاطع Profile Heap ، ويوفر استخدامًا شاملاً للذاكرة ووقت تنفيذ عام للتطبيق أو الصفحة النشطة.
   الأمان: تمييز مشاكل الشهادات والمشكلات الأخرى المتعلقة بالأمان مع الصفحة أو التطبيق النشط.
   الموارد: يمكنك هنا فحص ملفات تعريف الارتباط ، والتخزين المحلي ، وذاكرة التخزين المؤقت للتطبيق ، ومصادر البيانات المحلية الأخرى التي تستخدمها صفحة الويب الحالية أو التطبيق.
   عمليات التدقيق: توفر طرقًا لتحسين وقت تحميل الصفحة أو التطبيق والأداء العام.
6. يتيح لك Device Mode (وضع الجهاز) عرض الصفحة النشطة في محاكي مما يجعلها تقريبًا تمامًا كما تظهر على جهاز واحد من أكثر من اثني عشر جهازًا ، بما في ذلك العديد من طرازات Android و iOS المعروفة مثل iPad و iPhone و Samsung Galaxy. يتم منحك أيضًا القدرة على محاكاة دقة الشاشة المخصصة لتناسب احتياجات التطوير أو الاختبار الخاصة بك. لتبديل وضع الجهاز وإيقافه ، حدد رمز الهاتف المحمول الموجود مباشرة إلى يسار علامة التبويب عناصر .
7. يمكنك أيضًا تخصيص شكل وأسلوب أدوات المطورين من خلال النقر أولاً على زر القائمة ممثلة بثلاث نقاط موضعية رأسياً وتقع على أقصى الجانب الأيسر من علامات التبويب المذكورة أعلاه. من خلال هذه القائمة المنسدلة ، يمكنك إعادة وضع المرسى أو إظهار أو إخفاء أدوات مختلفة بالإضافة إلى إطلاق عناصر أكثر تقدمًا مثل مفتش أجهزة. ستجد أن واجهة أدوات التطوير نفسها قابلة للتخصيص بدرجة كبيرة من خلال الإعدادات الموجودة في هذا القسم.

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

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

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

1. انقر على زر القائمة الرئيسية في فايرفوكس ، ممثلة بثلاثة خطوط أفقية وتقع في الزاوية العلوية اليمنى من نافذة المتصفح.
2. عندما تظهر القائمة المنسدلة ، حدد الرمز المسمى المطور . يجب الآن عرض قائمة Web Developer ، التي تحتوي على الخيارات التالية. ستلاحظ أن معظم عناصر القائمة بها اختصارات لوحة مفاتيح مقترنة بها.
   أدوات التبديل: لعرض واجهة أدوات مطوري البرامج أو إخفائها ، وعادةً ما يتم وضعها في الجزء السفلي من نافذة المتصفح. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + I ) ، Windows ( CTRL + SHIFT + I )
   المفتش: يسمح لك بفحص و / أو تعديل كود CSS و HTML على الصفحة النشطة وكذلك على جهاز محمول عن طريق تصحيح الأخطاء عن بعد. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + C ) ، Windows ( CTRL + SHIFT + C )
   وحدة تحكم الويب: تتيح لك تنفيذ تعبيرات JavaScript في الصفحة النشطة بالإضافة إلى مراجعة مجموعة متنوعة من البيانات المسجلة بما في ذلك تحذيرات الأمان وطلبات الشبكة ورسائل CSS والمزيد. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + K ) ، Windows ( CTRL + SHIFT + K )
   مصحح الأخطاء: يتيح لك برنامج تصحيح أخطاء جافا سكريبت تحديد العيوب وإصلاحها عن طريق تعيين نقاط التوقف وفحص عُقد DOM والمصدر الخارجي للملاكمة السوداء وغير ذلك الكثير. كما هو الحال مع المفتش ، تدعم هذه الميزة أيضًا التصحيح عن بُعد. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + S ) ، Windows ( CTRL + SHIFT + S)
   محرر الأسلوب: يسمح لك بإنشاء أوراق أنماط جديدة ودمجها مع صفحة الويب النشطة ، أو تحرير الأوراق الموجودة واختبار كيفية عرض التغييرات في مستعرض بنقرة واحدة فقط. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F7 )
   الأداء: يوفر تحليلًا تفصيليًا لأداء شبكة الصفحات النشطة ، وبيانات معدل الإطارات ، ووقت تنفيذ جافا سكريبت ، والولاية ، وطلاء الطلاء ، وأكثر من ذلك بكثير. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F5 )
   الشبكة: يسرد كل طلب شبكة يبدأ بواسطة المتصفح مع الطريقة المقابلة ، ونطاق المصدر ، والنوع ، والحجم ، والوقت المنقضي. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + Q ) ، Windows ( 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 ) ، Windows ( CTRL + SHIFT + J )
   عرض التصميم المتجاوب: يتيح لك إمكانية عرض صفحة ويب فورًا بمختلف الدقة والتصميمات وأحجام الشاشة لتقليد العديد من الأجهزة بما في ذلك الأجهزة اللوحية والهواتف الذكية. اختصار لوحة المفاتيح: Mac OS X ( ALT (OPTION) + COMMAND + M ) ، Windows ( CTRL + SHIFT + M )
   Eyedropper: يعرض رمز اللون ست عشري للبيكسل المحدد بشكل فردي.
   Scratchpad : يتيح لك كتابة مقتطفات من شفرة JavaScript وتحريرها ودمجها وتنفيذها من داخل نافذة فايرفوكس المنبثقة. اختصار لوحة المفاتيح: Mac OS X ، Windows ( SHIFT + F4 )
   مصدر الصفحة: أداة المطور الأصلية القائمة على المتصفح ، يعرض هذا الخيار ببساطة شفرة المصدر المتوفرة للصفحة النشطة. اختصار لوحة المفاتيح: Mac OS X ( سطر + U ) ، Windows ( CTRL + U )
   الحصول على المزيد من الأدوات: يفتح مجموعة أدوات مطور برامج الويب على موقع إضافات Mozilla الرسمية ، ويضم حوالي 12 إضافة شائعة مثل Firebug و Greasemonkey.

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

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

1. انقر على قائمة إجراءات أخرى ، ممثلة بثلاث نقاط وتقع أعلى الجانب الأيسر من نافذة المتصفح. عندما تظهر القائمة المنسدلة ، حدد الخيار المسمى F12 Developer Tools . كما ذكرت من قبل ، يمكنك أيضًا الوصول إلى الأدوات عبر اختصار لوحة المفاتيح F12 .
2. يجب الآن عرض واجهة التطوير ، عادةً في الجزء السفلي من نافذة المستعرض. تتوفر الأدوات التالية ، يمكن الوصول إليها عن طريق النقر فوق عنوان علامة التبويب الخاصة بها أو استخدام اختصار لوحة المفاتيح المرفقة.
   DOM Explorer: يسمح لك بتحرير صفحات الأنماط و 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. انقر على Safari في قائمة المتصفح ، الموجودة أعلى الشاشة. عندما تظهر القائمة المنسدلة ، حدد التفضيلات . يمكنك أيضًا استخدام اختصار لوحة المفاتيح التالي بدلاً من عنصر القائمة هذا: COMMAND + COMMA (،)
2. يجب الآن عرض واجهة التفضيلات الخاصة بـ Safari ، مع تراكب نافذة المتصفح الخاص بك. انقر على الرمز متقدم ، الموجود في أقصى الجانب الأيسر من الرأس.
3. يجب أن تكون التفضيلات المتقدمة مرئية الآن. في أسفل هذه الشاشة يوجد خيار يسمى قائمة إظهار التطوير في شريط القوائم ، مصحوبة بمربع اختيار. في حالة عدم ظهور علامة اختيار في المربع ، انقر فوقها مرة واحدة لوضع علامة هناك.
4. أغلق واجهة التفضيلات عن طريق النقر على علامة "x" الحمراء الموجودة في الزاوية العلوية اليسرى.
5. يجب أن تلاحظ الآن خيارًا جديدًا في قائمة المتصفح باسم التطوير ، الموجود بين الإشارات المرجعية والإطار . انقر فوق عنصر القائمة هذا. يجب الآن عرض قائمة منسدلة تحتوي على الخيارات التالية.
   Open Page With: يتيح لك فتح صفحة الويب النشطة في أحد المتصفحات الأخرى المثبتة حاليًا على جهاز Mac.
   وكيل المستخدم: يتيح لك الاختيار من بين أكثر من اثنتي عشرة من عوامل وكيل المستخدم المعرفة مسبقًا بما في ذلك إصدارات متعددة من Chrome و Firefox و Internet Explorer ، بالإضافة إلى تحديد سلسلة مخصصة لك.
   أدخل وضع التصميم المتجاوب : يعرض الصفحة الحالية كما تظهر على أجهزة مختلفة وفي دقة شاشة مختلفة.
   إظهار Web Inspector: يقوم بتشغيل الواجهة الرئيسية لأدوات التطوير الخاصة بـ Safari ، والتي يتم وضعها عادةً في الجزء السفلي من شاشة المستعرض الخاص بك وتحتوي على الأقسام التالية: Elements ، Network ، Resources ، Timelines ، Debugger ، Storage ، Console .
   إظهار وحدة تحكم الأخطاء: يتم أيضًا تشغيل واجهة أدوات التطوير مباشرة إلى علامة التبويب " وحدة التحكم" التي تعرض الأخطاء والتحذيرات وبيانات السجل الأخرى القابلة للبحث.
   إظهار مصدر الصفحة: يفتح علامة التبويب الموارد ، التي تعرض شفرة المصدر للصفحة النشطة المصنفة حسب المستند.
   عرض موارد الصفحة: يقوم بتنفيذ نفس وظيفة خيار إظهار مصدر الصفحة .
   إظهار Snippet Editor: يفتح نافذة جديدة حيث يمكنك إدخال شفرة CSS و HTML ، مع معاينة إخراجها على الطاير.
   عرض أداة إنشاء الإعلانات: توفر إمكانية إنشاء أو تعديل إضافات Safari مع CSS و HTML و JavaScript.
   إظهار تسجيل المخطط الزمني: يفتح علامة التبويب " المخططات الزمنية" ويبدأ في عرض طلبات الشبكة والتخطيط ومعلومات التقديم بالإضافة إلى تنفيذ جافا سكريبت في الوقت الفعلي.
   Empty Caches: يحذف ذاكرة التخزين المؤقت بالكامل المخزنة حاليًا على محرك الأقراص الثابت.
   تعطيل Caches: توقف Safari من التخزين المؤقت بحيث يتم استرداد كافة المحتويات من الخادم عند كل تحميل للصفحة.
   تعطيل الصور: يمنع الصور من العرض على جميع صفحات الويب.
   Disable Styles: Ignores CSS properties عند تحميل الصفحة.
   تعطيل جافا سكريبت: يقيد تنفيذ جافا سكريبت في جميع الصفحات.
   تعطيل الإضافات: يحظر جميع الإضافات المثبتة من العمل داخل المتصفح.
   تعطيل عمليات الاختراق الخاصة بالموقع: إذا تم تعديل Safari للتعامل مع المشكلة (الإصدارات) الخاصة بصفحة الويب النشطة ، فسيقوم هذا الخيار بحظر هذه التغييرات بحيث يتم تحميل الصفحة بالشكل الذي كانت عليه قبل إجراء هذه التعديلات.
   تعطيل قيود الملفات المحلية: السماح للمتصفح بالوصول إلى الملفات الموجودة على الأقراص المحلية ، وهو إجراء مقيد بشكل افتراضي لأسباب تتعلق بالأمان.
   تعطيل قيود Cross-Origin: يتم وضع هذه القيود بشكل افتراضي لمنع XSS وغيرها من المخاطر المحتملة. ومع ذلك ، فإنهم غالباً ما يحتاجون إلى تعطيل مؤقت لأغراض التنمية.
   السماح بـ JavaScript من حقل البحث الذكي: عند التمكين ، يوفر القدرة على إدخال عناوين URL مع javascript: مضمنة مباشرة في شريط العناوين.
   معالجة شهادات SHA-1 باعتبارها غير آمنة : تعتبر شهادات SSL التي تستخدم خوارزمية SHA-1 قديمة وخاضعة للإصابة.