استخدام Chrome DevTools كبرنامج تطوير للمحترفين
- نحن نستخدم Chrome DevTools كما هو الحال حول كما يوحي الاسم ، يعد Chrome DevTools ، أو مفتش الويب...
- توسيع جميع العناصر التابعة
- نقل المفتش
- بحث عنصر DOM
- لوحات
- مؤشرات متعددة
- تشفير صورة base64
- التحول من الدرجة الزائفة
- اختيار العمود
- نسخة طلب حليقة
- لوحة المفاتيح التي تظهر على الشاشة
- لقطة شاشة للصفحة بأكملها
- مضاهاة أجهزة اللمس
- ميزات مفيدة
نحن نستخدم Chrome DevTools كما هو الحال حول
كما يوحي الاسم ، يعد Chrome DevTools ، أو مفتش الويب ، أداة مصممة لمطوري الويب والأشخاص المرتبطين به. يسمح لك مفتش الويب بالقيام بما يلي:
- فحص صحة العرض.
- تتبع تنفيذ البرامج النصية في جافا سكريبت.
- عرض أنشطة الشبكة.
عند كتابة هذا المقال اعتدت كناري - إصدار Chrome ، حيث يتم اختبار الميزات الجديدة ، والتي تنقسم بعد ذلك إلى إصدار ثابت من Chrome.
لبدء المفتش ، يمكنك النقر بزر الماوس الأيمن في أي مكان على الصفحة وتحديد "عرض رمز العنصر" ، ويمكنك أيضًا الضغط على Ctrl + Shift + C.
تحرير عناصر HTML بسرعة
لنبدأ بالأبسط: تحرير العناصر.
كيفية التحقق:
- حدد علامة التبويب العناصر.
- حدد أي عنصر HTML داخل اللوحة.
- انقر نقرًا مزدوجًا على العلامة وقم بتغييرها ، على سبيل المثال ، اسم العلامة.
عند اكتمال التحرير ، سيتم تحديث علامة الإغلاق تلقائيًا.
توسيع جميع العناصر التابعة
كيفية التحقق:
- انتقل إلى لوحة Elements.
- حدد عنصرًا ، وأثناء الضغط على Alt ، انقر فوق السهم الموجود على يسار العنصر.
نقل المفتش
يمكن الضغط على لوحة المفتش في أسفل نافذة المتصفح وفي الجانب الأيمن. على سبيل المثال ، يكون موقع اللوحة على اليمين مناسبًا عند العمل على الشاشات العريضة. أيضًا ، يمكن وضع لوحة المفتش في نافذة منفصلة ، على سبيل المثال ، نقلها إلى شاشة أخرى.
كيفية التحقق:
- Ctrl + Shift + D - تبديل الموقع
بحث عنصر DOM
من المحتمل ألا يكون هذا هو الاكتشاف بالنسبة له ، لكن في علامة التبويب "العناصر" ، يمكنك البحث عن طريق DOM.
كيفية التحقق:
- اضغط على Ctrl + F وأدخل استعلام البحث المقترح.
لوحات
اختيار اللون من لوحة خضع اختيار اللون في الإصدارات الأخيرة من Chrome لبعض التغييرات: أضف لوحين لتسهيل اختيار اللون.
مؤشرات متعددة
انقل المؤشر ، وأثناء الضغط على مفتاح Ctrl ، انقر في المنطقة المرغوبة لإضافة مؤشر. يمكنك التراجع عن الإجراء باستخدام Ctrl + U. شخصيًا ، لم أكن أبدًا مفيدًا.
تشفير صورة base64
كيفية التحقق:
- قم بالتبديل إلى لوحة الشبكة.
- اختر صورة
- انقر بزر الماوس الأيمن على الصورة وحدد ""
التحول من الدرجة الزائفة
تعكس الطبقات الزائفة حالة العناصر ومواقفها النسبية.
كيفية التحقق:
- انقر بزر الماوس الأيمن على عنصر في لوحة Elements وحدد فئة زائفة في قائمة Force Element State.
- يمكنك أيضًا تحديد فئة زائفة على الجانب الأيمن من لوحة Elements.
اختيار العمود
كيفية التحقق:
- انتقل إلى لوحة "المصادر".
- حدد أي ملف.
- تسليط الضوء على النص عن طريق الضغط على البديل.
يعمل تحديد عمود أيضًا عند تحرير HTML في لوحة Elements.
نسخة طلب حليقة
يمكن نسخ أي طلب في علامة تبويب الشبكة ثم لصقه في الجهاز للتنفيذ باستخدام الضفيرة.
لوحة المفاتيح التي تظهر على الشاشة
إذا تم تحديد ملف تعريف Nexus 5X ، يمكنك أن ترى كيف يبدو الموقع عندما تكون لوحة المفاتيح على الشاشة نشطة.
Chrome DevTools: لوحة مفاتيح على الشاشة لقطة شاشة للصفحة بأكملها
التقاط صورة للصفحة بأكملها بسيطة جدا. فقط تحتاج ...
- مفتش مفتوح.
- انتقل إلى وحدة التحكم.
- اضغط على Ctrl + Shift + P
- اكتب "لقطة شاشة"
- حدد "لقطة شاشة بالحجم الكامل"
لقطة شاشة للصفحة بأكملها مضاهاة أجهزة اللمس
يمكنك أيضًا محاكاة بعض أجهزة الاستشعار:
- شاشة تعمل باللمس
- إحداثيات لتحديد الموقع الجغرافي
- التسارع
كيف تحاول:
- حدد لوحة Elements.
- اضغط على "Esc" وحدد "Emulation> Sensors".
ميزات مفيدة
المفاتيح والقيم
تتيح لك وظائف المفاتيح والقيم إخراج المفاتيح أو قيم الكائن إلى وحدة التحكم ، على التوالي. 
عرض المفاتيح وقيم الكائن بشكل منفصل