Google Chrome DevTools لغير المطورين

نشرت: 2020-12-16

يعد Google Chrome من بين المتصفحات الأكثر استخدامًا على مستوى العالم حيث يقارب 65٪ من المستخدمين على مستوى العالم وهناك سبب وجيه لذلك ، فهو يعمل بشكل جيد ، فهو يدعم الكثير من ميزات الويب ، ويتكامل أصلاً مع كل ما توفره Google وهو سهل الاستخدام.

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

ما المقصود بـ Chrome DevTools؟

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

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

ما هو Chrome DevTools

أدوات التطوير هي ما تراه في لقطة الشاشة أعلاه مع الرمز على اليسار وخصائص مختلفة على اليمين. هذا هو العرض الافتراضي الذي ستراه إذا ضغطت على Command + Option + C (Mac) أو Control + Shift + C (Windows ، Linux ، Chrome OS).

توفر DevTools الكثير من الإمكانات ، ولكن أبرزها:

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

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

ذات صلة : كيفية إنشاء أول ملحق كروم

لماذا تحتاج DevTools ، ما هي وقائع الاستخدام؟

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

تطبيق كود CSS

الاستخدام الأول والأكثر شيوعًا لـ DevTools هو تعديل CSS وتطبيقه. CSS هو ما يحدد كيف تبدو الصفحة ، إنها جماليات. للقيام بذلك ، عليك ببساطة الإشارة إلى العنصر الذي تريد تصميمه ، والنقر بزر الماوس الأيمن واختيار "فحص"

تطبيق كود CSS

الأمر نفسه ينطبق على معظم المتصفحات الأخرى ، على الرغم من أن نص عنصر القائمة قد يختلف قليلاً. بمجرد القيام بذلك ، سترى DevTools مفتوحًا وتحديد العنصر الذي تحتاجه مباشرةً. هناك ، سترى الجزأين الرئيسيين لأدوات التطوير. جوانب HTML و CSS (يسار ويمين):

قم بتطبيق كود CSS 2

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

تطبيق كود CSS 3

على الفور أثناء الكتابة ، سيتم تحديث الأنماط في الصفحة. يمكنك كتابة أي CSS هنا وسيتم تطبيقه تمامًا مثل الأنماط الموجودة بالفعل على الصفحة. إذا ضغطت بالقرب من نهاية القواعد (تحت "العرض") ، فستبدأ في إضافة أنماط جديدة. أو يمكنك كتابتها في الأعلى حيث تقول "element.style". ثم إذا كنت ترغب في مشاركة هذا مع مطوريك ، يمكنك فقط تحديد الكود ونسخه ولصقه. نصيحة للمحترفين ، يمكنك أيضًا الاستيلاء على "المحدد" للأنماط. هذا هو ".RNNXgb" في لقطة الشاشة أعلاه. سيخبر هذا المطورين عن العنصر الذي تضيف الأنماط إليه.

ذات صلة : WordPress CSS: الدليل الأساسي للمبتدئين

اختر لونا

شيء رائع آخر يمكنك القيام به هو معرفة اللون المستخدم بالضبط بالإضافة إلى استخدام منتقي الألوان مباشرة من DevTools لرؤية الألوان الأخرى. ما عليك سوى النقر فوق المربع المجاور لكود اللون (حيث يشير السهم فوق النقاط) وسيفتح منتقي الألوان.

اختر لونا

ابحث عن الخط المستخدم

يحدد مطورو CSS أيضًا الخطوط المستخدمة وحجم الخط وارتفاع الخط واللون ووزن الخط وخصائص أخرى متعلقة بالطباعة. سيتم عرض كل منهم على الجانب الأيمن. طالما لم يتم تقاطعها ، يتم تطبيق النمط الذي تراه. دعنا نتعرف على الخط المستخدم للبحث في نموذج Google. انقر بزر الماوس الأيمن وفحصه وانتقل لأسفل حتى ترى الخط أو ابحث فقط في حقل "تصفية" أعلاه في الجزء العلوي من القسم الأيمن:

ابحث عن الخط المستخدم 1

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

ابحث عن الخط المستخدم 2

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

ذات صلة : كيفية اختيار أفضل الخطوط لموقعك على الويب

مخبأ وخنق وسرعة

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

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

افتح أدوات التطوير وانتقل إلى علامة التبويب "الشبكة". ثم انقر فوق "تعطيل ذاكرة التخزين المؤقت" وقم بإجراء "تحديث قوي":

مخبأ خنق وسرعة

الآن ، أثناء تصفح الصفحات مع فتح DevTools ، لن تكون هناك موارد مخزنة مؤقتًا من متصفحك. سيتم تحميل الصفحات بشكل أبطأ حيث يتم تحميل الموارد في كل مرة ، ولكن سترى التغييرات. بشكل عام ، يحتفظ المطورون بـ "Disable Cache" في وضع التشغيل افتراضيًا ولا يعطّلونه إلا عند اختبار تفاعلات المستخدم الحقيقية عندما تكون أوقات التحميل مهمة.

الكاش ، الخانق والسرعة 1

في نفس علامة التبويب بعد التحديث ، سترى أيضًا قياسات على سرعة الصفحة ووزنها. كم من الوقت حتى يتم تشغيل "التحميل" (حدث عند إرفاق نصوص أخرى للقيام بمزيد من العمل) ، وكم عدد الملفات المطلوبة (31 طلبًا أعلاه ، وكمية جيدة إلى حد ما) ، وكم تم تنزيله وما إلى ذلك. الأمر بسيط ، وكلما انخفض كان ذلك أفضل لكل قيمة. أي شيء يزيد عن 100-150 طلبًا وستبدأ في رؤية مشكلات السرعة الكبيرة.

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

مخبأ خنق وسرعة 2

شاهد الفرق في السرعة عندما نختار "Slow 3G" وقم بالتحديث مقارنة بالمثال الأول الذي يستخدم سرعة الاتصال الحقيقية. هنا يمكنك أيضًا اختبار "غير متصل" - كيف سيعمل الموقع بدون أي اتصال بالإنترنت. إذا كان هذا يبدو غريبًا ، فهو ليس كذلك ، تسمح تطبيقات الويب التقدمية بالفعل للمواقع بالعمل حتى بدون اتصال بالإنترنت إذا تم الوصول إليها مرة واحدة على الأقل من قبل الزوار.

تعد عمليات التدقيق ميزة رائعة أخرى توفر تحليلًا سهل الاستخدام لسرعة الصفحة. يمكنك ببساطة تشغيله بالانتقال إلى علامات التبويب "عمليات التدقيق" والضغط على "إنشاء تقرير":

الكاش ، الخانق والسرعة 3
إلى اليمين ، لديك بعض الخيارات لتحديد ما يجب اختباره حيث قد تستغرق الاختبارات بعض الوقت أحيانًا (دقيقة أو دقيقتين) ، لذلك إذا قمت بتشغيلها عدة مرات ، يمكنك اختيار ما هو مطلوب للاختبار الحالي . إليك عينة من النتائج مع الخيارات أعلاه لشاشة Google الرئيسية:

ذاكرة التخزين المؤقت والخانق والسرعة 4

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

الموضوعات ذات الصلة : ماذا يعني "تسريع موقعك" حقًا وكيف يتم تحقيقه؟

وحدة تحكم DevTools

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

وحدة تحكم DevTools

ولكن ، إذا توقف أحد المكونات التفاعلية (مثل القائمة المنسدلة أو القائمة أو الخريطة أو النموذج) عن العمل لسبب ما بعد التحديث الأخير على موقعك ، فيمكنك دائمًا إلقاء نظرة على وحدة التحكم. قد تحتوي على أخطاء توضح السبب.

فيما يلي مثال على شكل هذا الخطأ:

وحدة تحكم DevTools 2

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

الموضوعات ذات الصلة : الطريق إلى أن تصبح مصمم ويب جيداً

إشعار الأمان : ليس من الجيد نسخ الرمز ولصقه إلى وحدة التحكم دون فهم ما يفعله. خاصة إذا كانت من مصدر غير موثوق به وتم استخدامها في التطبيقات / المواقع الداخلية لشركتك. نشر Facebook تحذيرًا بسبب ذلك على وحدة التحكم الخاصة بهم:

وحدة تحكم DevTools 3

ملخص

DevTools هي أداة رائعة تساعد المطورين وأصحاب المواقع. يمنحك كل ما تحتاجه لتعديل الصفحة وتعديلها. من خلاله يمكنك تغيير CSS وتعديل HTML وحذف العناصر وإعادة ترتيبها على الصفحة والاطلاع على تقارير السرعة والأخطاء المبلغ عنها.

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

هناك الكثير من الميزات الأخرى التي تنتظر استخدامها ، فلا تخف من استكشافها!

خوادم تطوير DevriX WordPress

تطوير ودعم وابتكار على المدى الطويل لمنصة WordPress الخاصة بك. توفر DevriX شراكة تقنية للشركات الصغيرة والمتوسطة والشركات الناشئة سريعة الخطى. نحن نبني حلول WordPress وأنظمة أساسية تولد ما يصل إلى 20.000.000 مشاهدة للصفحة شهريًا.

لنعمل.