ما هو Chrome Developer Mode وما هي استخداماته؟

-هو-Chrome-Developer-Mode-وما-هي-استخداماته؟.png


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

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

إليك كل ما تحتاج لمعرفته حول وضع المطور في Google Chrome ، والأدوات الموجودة به ، وكيفية استخدامه بفعالية.

ما هو وضع مطور Chrome؟

عندما نتحدث عن وضع مطور Chrome ، فإننا لا نتحدث عن نفس وضع المطور الذي ستراه على أجهزة Chromebook. نحن نعني أدوات مطوري Chrome الواسعة (تسمى أدوات تطوير جوجل) المضمنة في المتصفح نفسه.

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

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

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

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

كيفية الوصول إلى قائمة أدوات مطوري Google Chrome

هناك عدة طرق للوصول إلى قائمة Google Chrome DevTools ، اعتمادًا على الأداة التي تريد استخدامها.

أسهل طريقة للقيام بذلك هي من خلال قائمة Google Chrome. للقيام بذلك ، انقر فوق رمز القائمة مع ثلاث نقاط في الزاوية اليمنى العليا. في القائمة التي تظهر ، انقر فوق المزيد من الأدوات> أدوات المطور.

سيؤدي هذا إلى فتح مجموعة DevTools في قائمة جديدة على يمين علامة تبويب أو نافذة Chrome المفتوحة.

يمكنك أيضًا القيام بذلك باستخدام اختصارات لوحة المفاتيح. على جهاز كمبيوتر يعمل بنظام Windows أو Linux ، افتح متصفح Chrome واضغط على F12 مفتاح. يمكنك أيضًا الضغط على Ctrl + Alt + J. أو Ctrl + Alt + I مفاتيح في علامة تبويب مفتوحة أو نافذة Chrome.

في macOS ، اضغط على F12 أو اضغط الاختيار + الأوامر + J. أو الاختيار + الأوامر + I مفاتيح لفتح قائمة Chrome DevTools بدلاً من ذلك. سيؤدي هذا إلى فتح وحدة تحكم Chrome مع خيارات للتبديل إلى أدوات Chrome الأخرى في أعلى قائمة DevTools.

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

باستخدام Chrome DevTools

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

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

يتيح لك وضع مطور Chrome تنزيل هذا المحتوى مباشرة أو إجراء تحليل أكثر تعقيدًا للمحتوى.

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

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

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

يتمتع Google Chrome بسمعة طيبة زيادة التحميل على ذاكرة الكمبيوتر، حتى تتمكن من اختبار استخدام ذاكرة JavaScript لموقعك ضمن ذاكرة حزام. يمكن استخدام ملفات تعريف اختبار Chrome المختلفة هنا ، ويتوفر مزيد من المعلومات حول هذا الاختبار على موقع الويب صفحة وثائق Chrome DevTools.

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

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

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

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

حيل جوجل كروم المتقدمة

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

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

scroll to top