أدوات تطوير برامج Chrome والنصائح والحيل

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

نصائح حول تطوير أدوات Chrome

هناك العديد من الحيل غير المعروفة والمختفية في Chrome Dev أدوات وسوف نبحث في الحيل الأكثر فائدة فيما بينها. لفتح أدوات المطور في Chrome ، اضغط على F12 على لوحة المفاتيح وجرّب الحيل التالية.

1. ابحث عن أي ملف وافتحه

عندما نقوم بتطوير الويب ، نتعامل مع العديد من ملفات HTML و CSS و JS وملفات أخرى. عندما نريد تصحيح أي شيء ، فإننا نفتح أدوات Chrome Dev. يمكنك البحث بسرعة عن الملف المعين لجعل مهمتك أسهل. فقط ، اضغط على Ctrl + P وابدأ في كتابة اسم الملف. يساعدك هذا في العثور على الملف المحدد من قائمة الملفات.

2. البحث داخل الملف المصدر

في الحيلة السابقة ، تعرفنا على كيفية البحث عن ملف معين. يمكنك حتى البحث عن سلسلة معينة في كل الملفات المحملة. اضغط على Ctrl + Shift + F للبحث عن سلسلة في الملفات. كما أنه يدعم التعبيرات العادية.

3. انتقل إلى خط معين

بمجرد فتح أي ملف مصدر وترغب في الانتقال إلى سطر معين ، ثم اضغط على Ctrl + G وأعطي رقم السطر واضغط على Enter.

4. تحديد عناصر DOM في علامة تبويب وحدة التحكم

تتيح لك أدوات Dev إمكانية تحديد عناصر في وحدة التحكم.

• $ () - إرجاع التواجد الأول لمحدّد CSS المطابق.
• $$ () - تقوم بإرجاع صفيف العناصر التي تطابق محدد CSS المحدد.

لمزيد من أوامر وحدة التحكم ، انتقل إلى هذه المشاركة.

5. استفد من عدة carets

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

6. Preserve Log

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

7. استخدم أداة تجميل مدمجة

تحتوي أدوات Chrome Dev على أداة تجميل مميزة تسمى طباعة جميلة "{}". أداة مطور البرامج تعرض الرمز المصغر ولا يسهل قراءته. انقر فوق زر الطباعة الجميل الذي يظهر في الجزء السفلي الأيسر من الملف المصدر المفتوح ، لإظهار الملف المصدر في التنسيق البشري القابل للقراءة.

8. هو موقع الويب الخاص بك المحمول ودية؟ افحصه هنا

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

لمزيد من المعلومات ، ألقِ نظرة على الفيديو التالي.

9. محاكاة أجهزة الاستشعار والموقع الجغرافي

يمكنك حتى محاكاة أجهزة الاستشعار مثل الشاشات التي تعمل باللمس وأجهزة قياس السرعة. يمكنك حتى محاكاة الموقع الجغرافي. للقيام بذلك ، انتقل إلى Emulation -> Sensors.

10. حدد التكرار التالي للكلمة الحالية

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

11. Alter Color Format

استخدم فقط Shift + Click في معاينة اللون لتغيير عمليات التبديل بين التنسيق rgba ، والسداسي عشري والتنسيق hsl.

12. إضافة تغييرات على الملفات المحلية من خلال مساحة العمل

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

لمزيد من المعلومات عن مساحات، رئيس لأكثر من Chrome.com.