لماذا يجب أن تبدأ في استخدام أدوات مطوري Chrome الآن

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

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

إنه في متصفحك

من السهل الوصول إلى الأدوات نفسها. فيما يلي ثلاث طرق لفتحها:

1. في متصفح Chrome - حدد قائمة Chrome (الأشرطة الأفقية الثلاثة في الزاوية اليمنى العليا) ، وحدد المزيد من الأدوات ، ثم حدد أدوات المطور.
2. انقر بزر الماوس الأيمن على عنصر في أي صفحة وحدد فحص العنصر.
3. على لوحة المفاتيح في نظام التشغيل Windows ، حدد ctrl + shift + i. في نظام Mac ، حدد cmnd + opt + i.

سيفتح أي منها نافذة DevTools أسفل متصفحك.

النافذة الأساسية

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

الأدوات مجمعة في مهام. هناك 8 مجموعات تتضمن العناصر والشبكة والمصادر والجدول الزمني والملفات الشخصية والموارد والتدقيق ووحدة التحكم.

عناصر

هنا يمكنك رؤية هيكل HTML لصفحتك. يوجد تبديل في الجزء السفلي لـ HTML والجسم. يمكنك تمرير الماوس فوق أي عنصر للاطلاع على معلومات مفصلة حول كل عنصر.

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

شبكة الاتصال

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

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

مصادر

يعرض هذا البرامج النصية والمقتطفات التي سيتم تحميلها ومن أين أتوا.

الجدول الزمني

يوضح لك هذا الوقت لكل مورد يتم تحميله. يمكنك معرفة ما يستغرق معظم الوقت ، مما يساعد في تقليل تحميل الصفحة.

مظهر

يوضح هذا استخدام الذاكرة لكل عنصر. يعد هذا أمرًا رائعًا لإظهار الرمز الذي يجب تحسينه.

موارد

هنا يمكنك فحص الموارد التي تم تحميلها. يمكنك إلقاء نظرة على ملفات تعريف الارتباط وذاكرة التخزين المؤقت للتطبيق وقواعد بيانات HTML5 وما إلى ذلك.

المراجعات

هذا يسمح لك بتحليل الصفحة. يمكنك التدقيق بعد تحميله أو عند تحميله.

تدقيق الحالة الحالية

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

تعطيني قائمة بالعناصر ، وتلوينها حسب أهميتها ، وتوضح عدد القضايا. أستطيع أن أرى المزيد من التفاصيل من خلال النقر عليها.

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

أعد تحميل الصفحة وتأكد من حسابك في الإعادة

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

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

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

وحدة التحكم

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

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

هذه أداة قوية ، ولكن هناك الكثير لاستخدامها. لحسن الحظ ، يتم توفير مواد مرجعية جيدة مع أمثلة حول كيفية استخدامها.

التصحيح

سيؤدي تحديد ctrl + p في نظام التشغيل Windows ، أو cmd + p في نظام التشغيل Mac ، إلى فتح شاشة تصحيح الأخطاء حيث يمكنك تحديد البرامج النصية لتصحيح أخطائها. تمنحك هذه الأداة ميزات تصحيح الأخطاء التي تتوقع رؤيتها في أي بيئة برمجة: إيقاف مؤقت ، متابعة ، خطوة إلى الأمام ، خطوة إلى الأمام ، نقاط توقف ، تعليمات برمجية منسقة ، إلخ.

يتم توفير ملفات تعليمات مفصلة لتوجيهك خلال استخدام وضع التصحيح.

نافذة أنماط CSS

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

الأنماط

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

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

سيؤدي تحديد لون الخط إلى فتح منتقي الألوان. حدد اللون الذي تريده واضغط على Enter. سترى الخط الذي حددته يتغير إلى اللون الجديد. هذه طريقة رائعة لتجربة أنماط وأحجام وألوان جديدة للخطوط.

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

محسوب

يُظهر هذا حجم الصندوق بالبكسل. تحتوي على مساحة متروكة وحدود وهامش.

وضع الجهاز

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

جهاز

والأكثر روعة من كونه مجرد جهاز محمول هو أنه يمكنك اختيار أي جهاز محمول هو ومن ثم يمكنك رؤية موقع الويب كما لو كنت تنظر إليه على هذا الجهاز. الآن ، هذا رائع!

لقد اخترت Amazon Kindle Fire HDX 7 "وقامت الشاشة بمحاكاة هذا الجهاز حتى أتمكن من رؤية الشكل الذي سيبدو عليه الموقع على شاشته وكيف ستعمل اللمسة.

يمكنك تغيير اتجاه الشاشة بالضغط على زر Swap Dimensions.

هذه طريقة رائعة لمعرفة كيف يبدو موقع WordPress الخاص بك على شاشة الهاتف المحمول الأصغر. اخترت iPhone 6 وتغير حجم الشاشة لتتناسب مع حجم الشاشة الجديد ودقة الوضوح. هناك العديد من الأجهزة لعرضها. يمكنك أيضًا رؤية حجم مخصص عن طريق سحب الجوانب لزيادة الحجم أو تقليله.

شبكة الاتصال

هناك أيضًا مجموعة مختارة لاختيار نوع الشبكة التي تصل إلى الموقع من خلالها. يسمح لك هذا بمشاهدة أداء موقع الويب الخاص بك من خلال أنواع وسرعات الاتصال المختلفة. يمكنك اختبار سرعات متعددة من 50 كيلوبت في الثانية GPRS إلى 30 ميغابت في الثانية WiFi ، والعديد من سرعات اتصال 2G و 3G و 4G. هذه طريقة ممتازة لاختبار سرعة موقع الويب الخاص بك من خلال الشبكات المحتالة والحصول على رؤى حول ما يجب تحسينه.

تساؤلات الإعلام

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

• استعلامات تستهدف أقصى عرض
• عروض داخل نطاق
• استعلامات تستهدف الحد الأدنى للعرض

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

الدرج

يوجد قسم آخر من الأدوات أسفل الشاشة الرئيسية يسمى الدرج. هذا يضيف:

وحدة التحكم - هذه هي نفس وحدة التحكم الموجودة في النافذة الأساسية. بوضعه هنا يمكنك استخدامه مع أي من الأدوات الموجودة في النافذة الأساسية.

بحث - يسمح لك بالبحث عن مصادر.

المحاكاة - يمكنك اختيار الجهاز (هنا يمكنك اختيار الطراز ، والدقة ، والشبكة ، وما إلى ذلك) ، والوسائط ، والشبكة (الإنتاجية ووكيل المستخدم) ، وأجهزة الاستشعار (شاشة تعمل باللمس ، ومقاييس التسارع ، وما إلى ذلك).

التقديم - إظهار مستطيلات الطلاء وحدود الطبقة المركبة ومقياس FPS وإعادة رسم الصفحات المستمرة واختناقات التمرير المحتملة.

الإعدادات والمزيد

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

هناك قدر هائل من الإعدادات التي يمكنك ضبطها حتى تتمكن من تعديل الأدوات لتعمل بالطريقة التي تريدها.

كروم كناري

إذا كنت تريد حقًا أن تكون على حافة نزيف Chrome DevTools من Google ، فجرّب Chrome Canary. رمزها أصفر. احصل عليه؟ يحتاج إلى رداء. إنه الأحدث والأفضل من Google. إنه مصمم للمطورين ولديه أحدث إصدار من DevTools. إنه ليس مستقرًا بدرجة كافية للاستخدام العام حتى الآن ، لذلك من المحتمل أن يؤدي إلى تعطل نظامك.

إذا كنت عرضة لإلحاق أضرار جسيمة ببيئتك عند تعطل نظامك ، فابحث عن رمز Chrome Canary في الصورة أعلاه ولا تومض لمدة خمس ثوانٍ.

الآن يمكنك الانتقال إلى النهاية. لن تتذكر هذا الجزء.

تغليف

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

دورك! هل تستخدم Chrome Developer Tools؟ هل تركت الميزة المفضلة لديك؟ هل لديك ما تضيفه؟ أود أن أسمع عنها في التعليقات أدناه!

الصورة المصغرة للمادة Anikei / shutterstock.com