"أدوات مطوري البرامج في Chrome" هي مجموعة من أدوات المطوّرين على الويب المُدمَجة مباشرةً في متصفّح Google Chrome. يمكن أن تساعدك "أدوات مطوري البرامج" في تعديل الصفحات بشكل فوري وتشخيص المشاكل بسرعة، ما يساعدك في إنشاء مواقع إلكترونية أفضل بشكل أسرع.
شاهِد هذا الفيديو للحصول على عروض توضيحية مباشرة لسير العمل الأساسي في "أدوات مطوري البرامج"، بما في ذلك تصحيح أخطاء CSS ونماذج CSS الأوّلية وتصحيح أخطاء JavaScript وتحليل أداء التحميل.
فتح "أدوات مطوري البرامج"
هناك العديد من الطرق لفتح "أدوات مطوري البرامج"، لأنّ المستخدمين المختلفين يريدون الوصول السريع إلى أجزاء مختلفة من واجهة مستخدم "أدوات مطوري البرامج".
- للعمل مع DOM أو CSS، انقر بزر الماوس الأيمن على عنصر في الصفحة واختَر فحص للانتقال إلى لوحة العناصر. أو اضغط على Command+Option+C (Mac) أو Control+Shift+C (Windows وLinux وChromeOS).
- للاطّلاع على الرسائل التي تم تسجيلها أو تشغيل JavaScript، اضغط على Command+Option+J (Mac) أو Control+Shift+J (في أنظمة التشغيل Windows وLinux وChromeOS) للانتقال مباشرةً إلى لوحة وحدة التحكم.
يُرجى الاطّلاع على فتح "أدوات مطوري البرامج في Chrome" لمزيد من التفاصيل وسير العمل.
بدء
إذا كنت مطوّر برامج على الويب أكثر خبرة، إليك نقاط البدء المقترَحة للتعرّف على كيفية تحسين أدوات مطوّري البرامج إنتاجيتك:
- الاطّلاع على نموذج DOM وتغييره
- عرض خدمة مقارنة الأسعار (CSS) وتغييرها
- تصحيح أخطاء JavaScript
- عرض الرسائل وتشغيل JavaScript في وحدة التحكّم
- تحسين سرعة الموقع الإلكتروني
- فحص نشاط الشبكة
الاطّلاع على أدوات مطوري البرامج
قد تكون واجهة المستخدم في أدوات مطوّري البرامج مربكة بعض الشيء، فهناك العديد من علامات التبويب. وإذا خصّصت بعض الوقت للاعتياد على كل علامة تبويب للتعرّف على الإمكانات المتاحة، قد تكتشف أنّ "أدوات مطوري البرامج" يمكنها أن تعزّز إنتاجيتك بشكلٍ جدي.
مجموعة محاكاة الأجهزة الجوّالة
محاكاة الأجهزة الجوّالة.
لوحة العناصر
عرض DOM وCSS وتغييرهما
- بدء الاطّلاع على نموذج العناصر في المستند (DOM) وتغييره
- بدء عرض محتوى CSS وتغييره
- تعديل خدمة مقارنة الأسعار (CSS)
- تعديل نموذج العناصر في المستند (DOM)
- العثور على خدمات مقارنة الأسعار غير الصالحة والملغاة وغير النشطة وغيرها
- تحديد التحسينات المحتملة في خدمة مقارنة الأسعار (CSS)
- محاكاة المظاهر الفاتحة/الداكنة والتباين وميزات وسائط CSS الأخرى
- العثور على خدمة مقارنة الأسعار (CSS) غير المستخدَمة
- فحص الصور المتحركة
لوحة وحدة التحكّم
يمكنك عرض الرسائل وتشغيل JavaScript من وحدة التحكّم.
- بدء استخدام وحدة التحكم
- مرجع واجهة برمجة التطبيقات Console Uileities API
- مرجع واجهة برمجة تطبيقات Console
لوحة المصادر
يمكنك تصحيح أخطاء JavaScript، ومواصلة التغييرات التي تم إجراؤها في "أدوات مطوري البرامج" في عمليات إعادة تحميل الصفحات، وحفظ مقتطفات من JavaScript وتشغيلها، وحفظ التغييرات التي تجريها في "أدوات مطوري البرامج" في مصادر محلية.
- بدء تصحيح أخطاء JavaScript
- إيقاف الرمز مؤقتًا باستخدام نقاط الإيقاف
- تعديل الملفات وحفظها في مساحة عمل
- تشغيل مقتطفات من JavaScript
- مرجع تصحيح أخطاء JavaScript
- تجاوز محتوى الويب وعناوين استجابة HTTP على الجهاز
لوحة الشبكة
عرض نشاط الشبكة وتصحيح الأخطاء فيه
لوحة المسجّلة الذكية
تسجيل تدفقات المستخدم وإعادة تشغيلها وقياسها.
- تسجيل تدفقات المستخدم وإعادة تشغيلها وقياسها
- تخصيص تطبيق "المسجّلة الذكية" باستخدام الإضافات
- مرجع ميزات المسجّلة الذكية
لوحة الأداء
اكتشاف طرق لتحسين أداء التحميل ووقت التشغيل.
لوحة الذاكرة
يمكنك العثور على مشاكل الذاكرة التي تؤثر في أداء الصفحة وإصلاحها، مثل تسرُّب الذاكرة.
لوحة التطبيق
افحص جميع الموارد التي تم تحميلها، بما في ذلك قواعد بيانات IndexedDB أو Web SQL، ومساحة التخزين المحلية والجلسات، وملفات تعريف الارتباط، وذاكرة التخزين المؤقت للتطبيق، والصور، والخطوط، وأوراق الأنماط.
- تصحيح أخطاء تطبيقات الويب التقدّمية
- عرض مساحة التخزين المحلية وتعديلها
- عرض ملفات تعريف الارتباط وإضافتها وتعديلها وحذفها
- عرض معلومات مرحلة التجربة والتقييم
لوحة الأمان
يمكنك تصحيح أخطاء المحتوى المختلط ومشاكل الشهادات وغيرها.
مشاركة
قدِّم تقارير الأخطاء وطلبات الميزات في Crbug، وهي أداة تتبُّع الأخطاء لدى الفريق الهندسي.
إذا كنت تريد تنبيهنا بشأن خطأ أو طلب ميزة ولكن ليس لديك متسع من الوقت، يمكنك إرسال تغريدة إلى @ChromeDevTools. نردّ على رسائلنا ونرسل إشعارات من الحساب بانتظام.
للحصول على مساعدة في استخدام أدوات مطوري البرامج، تعد Stack Overflow أفضل قناة.
للإبلاغ عن الأخطاء أو طلبات الميزات في مستندات "أدوات مطوري البرامج"، افتح مشكلة GitHub.
تمتلك أدوات مطوّري البرامج قناة Slack أيضًا، لكن الفريق لا يراقبها باستمرار.