ما هي أدوات Chrome DevTools؟

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

من الممكن الوصول إلى أدوات Chrome للمطورين عن طريق الضغط على مجموعة المفاتيح Ctrl + Shift + I ، أيضًا عن طريق التمرير فوق عنصر والنقر بزر الماوس الأيمن فوق فحص.

مكونات

عندما نفتح Chrome DevTools ، نرى أنك تظهرلوحة n على يمين الصفحة التي نتصفحها. من جانبها ، هذه اللوحة eوهي مقسمة إلى علامات تبويب تتوافق مع كل أداة من الأدوات. في المقابل ، يتم تقسيم الأدوات إلى أقسام.
الأقسام هي:

• العناصر: تُظهر المكونات المختلفة للصفحة.
• وحدة التحكم: تتيح لك تشغيل التشخيص أثناء التطوير أو التفاعل مع كود Javascript كما تفعل مع Linux Terminal.
• المصادر: تجعل من السهل تصحيح أخطاء كود Javascript والعمل مع الملفات المحلية.
• الشبكة: تساعد في مراقبة أداء الصفحة وتحسينه.
• المخطط الزمني: يسمح بتسجيل واستكشاف الأحداث المختلفة التي تحدث أثناء زيارة الموقع.
• التطبيق: يتحقق من جميع الموارد التي تم تحميلها ؛ من بين أمور أخرى ، قواعد بيانات IndexedDB أو Web SQL والتخزين المحلي وتخزين الجلسة وملفات تعريف الارتباط وذاكرة التخزين المؤقت للتطبيق والصور والخطوط وأوراق الأنماط.
• الأمان: يكتشف مشاكل الأمان في الكود.

دعونا نرى ما يمكننا استخدام Chrome DevTools من أجله

أصلح ما لا يعمل

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

تقليل وقت التحميل

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

قم بتعديل الكود

في علامة التبويب "العناصر" نستطيع انظر عناصر الصفحة ، وشفرة html ذات الصلة وخصائص css. يمكننا أيضا تغييرها.

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

document.designMode = 'on';

جرب أحجام مختلفة للشاشة

الأجهزة اللوحية والهواتف الذكية وأجهزة التلفزيون الذكية وأجهزة الكمبيوتر المكتبية. قائمة الأجهزة التي نتصفح بها الإنترنت آخذة في الازدياد. مع Chrome DevTools يمكننا ذلك اختبار ما إذا كانت الصفحة تبدو جيدة بأحجام مختلفة.

المقارنة

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

الحصول على Chrome DevTools

Chrome DevTools متاح في متصفحي Google Chrome و Chromium. الكروم في مستودعات التوزيعات الرئيسية. يمكن أيضًا تثبيته من المتاجر فرقعة. أما بالنسبة لجوجل كروم فيمكنك ذلك تعال هنا. بتنسيق DEB و RPM