اضافات Google Chrome لمطوري الواجهات الأمامية (Front-end)

إن كنت أحد مطوّري الواجهات الأمامية فلابد وأنك قد مللت من تحديث صفحة متصفّحك لترى التغيرات التي اجريتها في برمجيّتك (أكوادك)، واعلمُ دون أيِّ شك عن كميّة الضجر التي عانيتها من ذلك.

ولتسهيل عملية البرمجة عملت شركة Google على إضافة ملحقات (إضافات Google) تُساعد على تطوير البرمجيّات بشكل أسهل، فماذا نعني بالإضافات؟ وماهي هذه الإضافات؟

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

لا تقتصر خواص هذه الإضافات على المبرمجين فقط بل يوجد العديد منها، وللمستخدم أن يختار ما يُناسبه.

سنذكر هنا الإضافات الخاصّة بمطوّري الواجهات الأماميّة، ولعلّنا نسرد مجموعة إضافات متميّزة وعامّة في موضوعٍ آخر.

1- الإضافات المُرفقة مع متصفحي Google Chrome و Firefox

(لا داعي لتحميل هذه الإضافات، فهي مرفقة مع المتصفّح تلقائيًا)

1.1- إضافة Inspect elements

وتقوم بعرض عناصر الـ HTML، حيث يتم الضغط بالزر الأيمن فوق العنصر واختيار أداة الـ Inspect، ثم سيعرض تنسيقات الـCSS جميعها لهذا العنصر.

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

لفتح الإضافة قُم بالضغط على (Ctrl+Shift+C)

2.1- إضافة Device Mode

وتمكّنك هذه الإضافة من اختبار توافق تصميم الموقع مع جميع الأجهزة(الحاسبات والهواتف الذكيّة وغيرها).

لفتح الإضافة قُم بالضغط على (Ctrl+Shift+M)

3.1- إضافة Console

وتظهر هذه الإضافة الأخطاء البرمجيّة في أكواد الـ JavaScript، ولذلك يستخدمها مبرمجو الـ Back-end أيضًا.

لفتح الإضافة قُم بالضغط على (Control+Shift+J)

2- إضافة web developer

وهي أشهر الإضافات بين مطوّري الواجهات الأمامية؛ حيث أنها تضيف شريط إضافي داخل متصفّحك يحمل العديد من المميزات التي يحتاجها مصمّمي ومطوّري الويب.

يشبه عمل هذه الإضافة بشكلٍ كبير عمل إضافة الـ Inspect غير أنّها تمتاز بالمزيد من التحكّم.

حمّل الإضافة على Google Chrome

حمّل الإضافة على Firefox

3- إضافة الـCSSViewer

تمكّنك هذه الإضافة من معرفة تنسيق الـCSS لأي عنصر بإظهار برمجيّته بشكلٍ منظّم ومفهوم، مما يمكّنك من معرفة تنسيق الـCSS الخاص بأي عنصر في أي صفحة معروضة أمامك - حتى صفحات المواقع الأخرى-.

حمّل الإضافة على Google Chrome

حمّل الإضافة على Firefox

4- إضافة ColorZilla

تُساعد هذه الإضافة بمعرفة جميع الألوان المستخدمة في الصفحة؛ حيث تُظهر الألوان لكل بكسل موجود، كما تسمح بنسخ قيمة اللون ولصقها داخل ملفّاتك.

حمّل الإضافة على Google Chrome

حمّل الإضافة على Firefox

5- إضافة Site Palette

تقوم باستخراج جميع الألوان المستخدمة في الصفحة (Page theme) واصدارها، وتُساعد هذه الإضافة المصممين أيضًا حيث يمكن تصدير الألوان المستخرجة إلى برنامجي الـ Photo shop والـ illustrator أيضًا.

حمّل الإضافة على Google Chrome

حمّل الإضافة على Firefox -Material Design Color Palette -

6- إضافة Font Finder

تُظهر هذه الإضافة جميع تنسيقات الـCSS للخط المحدد، من نوع الخط وحجمه إلى خواص الـ decoration والـ transformation وغيرهم الكثير.

حمّل الإضافة على Google Chrome

حمّل الإضافة على Firefox

7- إضافة Aardvark

تختص هذه الإضافة بامكانيّة حذف بعض العناصر من الصفحة والتحكّم بلون كل عنصر؛ مما يخدم كثيرًا في عملية التقاط الشاشة أو طباعة الصفحة.

حمّل الإضافة على Google Chrome

حمّل الإضافة على Firefox