كيفية استخدام أدوات مطوري Chrome لتحسين موقع WordPress الخاص بك

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

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

فتح الأدوات

هناك عدة طرق لفتح الأدوات:

1. حدد قائمة Chrome ، واختر أدوات ، ثم اختر أدوات المطور.
2. انقر بزر الماوس الأيمن فوق أي عنصر على الشاشة وحدد فحص العنصر (الطريقة المفضلة لدي).
3. Ctrl + Shift + I (للكمبيوتر الشخصي) | Cmd + Opt + I (لأجهزة Mac)

نافذة DevTools

تحتوي نافذة الأدوات على لوحين. كلاهما يحتوي على أدوات يمكن استخدامها معًا. إليك نظرة على الأدوات.

الأول يحتوي على 8 مجموعات من الأدوات. الأدوات تشمل:

• عناصر
• شبكة الاتصال
• مصادر
• الجدول الزمني
• مظهر
• موارد
• المراجعات
• وحدة التحكم

يحتوي القسم الثاني على:

• الأنماط
• محسوب
• المستمعين الحدث
• نقاط توقف DOM (نموذج كائن المستند)
• الخصائص

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

عناصر

تعرض لك هذه اللوحة شجرة DOM ، التي تمثل عناصر HTML لصفحتك ، وتتيح لك فحص أو تحرير أي عنصر. يمكنك رؤية تعديلات CSS في الوقت الفعلي.

يمكنك فتح أي من اللوحات وطيها لتسهيل رؤيتها والتنقل عبر النقر فوق العقد (تبدو مثل الأسهم أو المثلثات). يُظهر عرض شجرة DOM الحالة الحالية للشجرة بدلاً من HTML الأصلي (على سبيل المثال ، ربما تم تعديله بواسطة JavaScript).

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

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

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

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

تتغير الصورة على الفور إلى الحجم الجديد.

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

يمكنك أيضًا سحب العناصر وإفلاتها في مواقع جديدة لتغيير تنسيق صفحتك.

إنني أنقل التعليقات الأخيرة فوق المشاركات الأخيرة بمجرد سحب عنصر div.

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

لقد استخدمت هذه الأداة للعثور على أحجام الصور وفحص مقتطفات التعليمات البرمجية.

شبكة الاتصال

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

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

يمكنك عرض تفاصيل الموارد. التفاصيل تشمل:

• رؤوس طلب واستجابة HTTP - يعرض هذا عنوان URL للطلب وطريقة HTTP وأكواد حالة الاستجابة ويسرد استجابة HTTP ورؤوس الطلبات مع قيمها ومعلمات سلسلة الاستعلام.
• معاينة المورد - تعرض معاينة للصورة وموارد JSON.
• استجابة HTTP - يعرض هذا المحتوى غير المنسق للمورد.
• أسماء وقيم ملفات تعريف الارتباط - يُظهر هذا ملفات تعريف الارتباط التي يتم إرسالها في طلبات HTTP الخاصة بالمورد ورؤوس الاستجابة ، ومسح ملفات تعريف الارتباط.
• رسائل WebSocket - تعرض هذه الرسائل التي تم إرسالها أو استلامها عبر اتصال WebSocket.
• توقيت شبكة الموارد - يعرض هذا رسمًا بيانيًا للوقت المنقضي في مراحل الشبكة المتضمنة في تحميل المورد.

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

يمكنك حفظ بيانات الشبكة لتحليلها في المستقبل.

مصادر

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

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

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

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

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

مظهر

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

سوف يسجل ثلاثة أنواع من الملفات الشخصية:

• تجميع ملف تعريف JavaScript CPU - يعرض هذا وقت تنفيذ وظائف JavaScript الخاصة بك.
• خذ Heap Snapshot - وهذا يوضح استخدام الذاكرة وتوزيع كائنات JavaScript الخاصة بك.
• سجل تخصيصات الكومة - يسجل هذا تخصيصات الكائنات لإظهار تسريبات الذاكرة بمرور الوقت.

موارد

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

تتيح لك علامة التبويب IndexedDB فحص قواعد بيانات IndexedDB ومخازن العناصر ، وعرض السجلات وحذفها.

يمكنك تشغيل أوامر SQL وعرض النتائج بتنسيق جدولي. أثناء كتابة الأوامر ، ستعطيك تلميحات لأسماء الجداول والأوامر والجمل.

تعرض علامة التبويب ملفات تعريف الارتباط معلومات حول ملفات تعريف الارتباط التي تم إنشاؤها بواسطة HTTP أو JavaScript. يمكنك حذفها بشكل فردي أو في مجموعات.

Chrome يخزن موارد التطبيق مؤقتًا. تتيح لك علامة تبويب ذاكرة التخزين المؤقت للتطبيق عرض حالة هذه الموارد. سيُظهر لك أيضًا عنوان URL للمورد ونوع المورد وحجمه.

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

المراجعات

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

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

وحدة التحكم

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

وضع الجهاز

إحدى ميزاتي المفضلة هي وضع الجهاز. يمكنك الوصول إلى هذا الزر الصغير الموجود على يسار العناصر في القائمة. يتيح لك وضع الجهاز الاختيار من بين 23 جهازًا محمولًا شهيرًا مختلفًا (Kindle Fire والعديد من أجهزة iPhone والعديد من المجرات وأجهزة الكمبيوتر المحمولة وما إلى ذلك) ومعرفة كيف يبدو موقع الويب الخاص بك ويتفاعل على هذا الجهاز.

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

يمكنك أيضًا اختيار نوع الشبكة (3G ، 4G ، Wi-Fi ، وما إلى ذلك) حتى تتمكن من تحليل كيف يبدو الموقع ويتفاعل عبر الشبكات والسرعات المختلفة.

الدرج

ستجد الدرج في الجزء السفلي من الشاشة. يمكن تشغيل هذا أو إيقاف تشغيله باستخدام الزر> _ الموجود على الجانب الأيمن من شريط الأدوات. الدرج يحتوي على:

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

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

افكار اخيرة

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

أود أن أسمع منك. هل تستخدم Chrome Developer Tools؟ ما هي ميزاتك المفضلة؟ ماذا تستخدم أكثر؟ هل لديك أي نصائح حول استخدام الأدوات؟ أخبرنا عن ذلك في التعليقات.