أشاطرك 10 إضافات جوجل كروم للمطورين أستخدمها شخصيا ستفيدك كثيرا

طرحنا في موقعنا أكوا ويب العديد من المقالات التي تقترح عليك إضافات جوجل كروم مخصصة للمطورين و المبرمجين منها المفيد و منها الجيد و منها ما هو متوسط الإستخدام بالنسبة للمطور الذي جعله في الأخير يستغني عليها كليا، أنا أيضا أستفيد من المقالات التي أطرحها و أقوم بتنصيب و تجربة تلك الإضافات، و بكل صدق فقد تجاوز عدد الإضافات التي أنصبها و التي تهم فقط التطوير و البرمجة أزيد من 50 إضافة، لأقرر في الأخير تصفيتها و إختيار فقط القلة منها التي أجد ان إحتياجي لها ضروري في كل مرة أمارس البرمجة. 

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

1 - Wappalyzer :

كمطور و مبرمج، سأود في كل مرة أزور موقعا محددا أن أعرف التقنيات المستخدمة في ذلك الموقع، لماذا ؟ قد يعجبني الإطار الذي يستخدمه و أود إدراجه في برمجيتي القادمة، قد يعجني الـ UI المستخدم في الواجهة و أود معرفة المكتبة المستخدمة في ذلك الموقع، بل حتى اني قد اود معرفة إن كان الموقع ذو Back End مبني بالـ Php ام الـ Node js، و لا شيئ قد يطفي فضولي هذا قدر إضافة Wappalyzer.
كنت أستخدم كلا من إضافة Wappalyzer و WhatRuns اللتان تقومان بنفس العمل، لكن إضافة WhatRuns لم توفر لي كامل الإحتياجات، كما انه في مُعظم المواقع لا تُظهر التقنيات المطلوبة، فقمت بتفضيل Wappalyzer شخصيا عنها، فإضافة Wappalyzer تُظهر لك كل التقنيات تلقائيا فور زيارتك لموقع محدد، كما تقوم بتقسيم تلك التقنيات حسب مجال العمل، فقد تُظهر لك التقنيات المستخدمة في الـ Back End في تقسيم واحد، ثم تقنيات الواجهات، و الأجمل انه يوفر لك النسخة الخاصة بكل تقنية المستخدمة في الموقع، أليس هذا رائعا؟
 رابط الإضافة 

2 - GO FUCKING WORK :

رغم غرابة إسم الإضافة، إلا انها وفرت لي الإفادة الكاملة و ساعدتني بشكل كبير في تحقيق أهداف يومية، كيف ذلك ؟
توفر لك إضافة GFW إمكانية إيقاف تسرب و ضياع الوقت منك أثناء عملك على مشروع برمجي معين، فمن منا لا تراوده أفكار مثل : " دعني أسترح قليلا بتصفح بعض منشورات فيسبوك " حتى تجد نفسك قد قضيت ساعة و نصف تشاهد فيديوهات و صور و تعلق على منشورات لم و لن تفيدك بشيئ ؟ لهذا الغرض يوجد إضافة GFW.
بعد تنصيبها تقوم بتهيئتها أولا، قد يكون الأمر مربكا في البداية لكن لا تقلق ستعجبك النهاية، سيتوجب عليك إدخال المواقع التي تريد ان توقف إستخدامها او تقلل من إستخدامها ( مثلا فيسبوك، يوتيوب ... )، يمكنك إضافة مواقيت العمل و أيام العمل مثلا : يوم الإثنين من 9 صباحا الى 11 صباحا تريد ان تعمل فيها و لا تريد أي تلاعبات، إحفظ الإعدادات و شاهد السحر يعمل.
أثناء إستخدامك للمنصات التي قمت بحظرها في أوقات الحظر ستظهر لك رسالة كبيرة قاسية  قليلة على القلب تخبرك بالذهاب الى العمل اللعين ( بترجمة MBC 2 ) و التوقف عن تضييع العمل.
رابط الإضافة 

3 - Octotree :

إني من عشاق منصة جيتهاب (Github)، بل أنا شره في تصفح منصة جيتهاب بإستمرار و إستكشاف أفضل المستودعات و الـ Repositories و ربما إستخدامها لاحقا في مشاريع قد تأتي في المستقبل، كذلك، فأنا أستضيف فيها ما أنتجه من برمجيات و أكواد للحفاظ عليها دائما خصوصا بعد إدراج خاصية Private Repo التي تسمح للمستخدم إدراج أكواده البرمجية بشكل Private.
لكن عيب جيتهاب الوحيد ربما هو صعوبة تصفح الملفات داخل أي مستودع، إذ في الغالب ستحتاج الى تحميله ثم فتحه في IDE ثم تصفح الملفات، او ان تقضي وقتا مطولا في تصفح ملف بملف الى حين ان تجد كود محدد، لذلك أستخدم إضافة Octotree.
هذه الإضافة تشتغل مع منصة جيتهاب، و توفر لك إمكانية إستعراض الهيكلة او الـ Structure الخاصة بالمشروع كاملا في قائمة منبثقة جانبية مثل الـ IDE تماما، و إمكانية تصفح محتوى أي ملف مباشرة دون إعادة تحميل الصفحة، يمكن إخفاء و إظهار القائمة إن كانت تسبب لك الإزعاج، لكن فوائدها و مميزاتها حقا هائلة خصوصا لمدمني جيتهاب مثلي، فأنا الآن لا احتاج الى تحميل مشروع كامل من أجل الحصول على جزء من الكود، بل يمكنني التوجه له مباشرة من الإضافة و نسخ الكود الذي أحتاج.
رابط الإضافة 

4 - Live Reload :

أتجه شخصيا في الغالب الى تطوير الـ Front End و ربما لاحظت هذا عبر سلسلة مقالات برمجية أوفرها لك على الموقع متعلقة بشكل كبير بالـ Front End و ذلك لأن هذا جزء عملي في فريق أكوا ويب المتواضع، و من الأشياء المزعجة التي تغيضني كمطور Front End هو إعادة تحميل الصفحة في كل مرة أقوم ببعض التعديلات على الواجهة، بالطبع مع الوقت و مع تطور المهارات و بإستخدام بعض الخدمات مثل Webpack او Gulp ستقوم بتحديث الصفحة تلقائيا، لكن ماذا لو كنت في صدد العمل على صفحات ويب لا يوجد لها أي مدير ملفات مخصص مثل الـ Webpack او Gulp ؟
إضافة Live Reload قد تكون الحل الأمثل، في البداية سيتوجب عليك مزامنتها مع المشروع البرمجي الذي تعمل عليه، ننصحك بإستخدام محرر من شركة Jetbrain ( مثل WebStorm او PhpStorm ) او محرر آخر مثل Bracket مثلا الذي يتيح لك إظهار المشروع في الويب إنطلاقا من الـ IDE ( إذ يبتكر URL محدد للمشروع كاملا بدلا من URL للصفحة فقط ) بعد ذلك قم بتفعيل إضافة Live Reload، إنتظر قليلا الى حين مزامنة المشروع ثم إشتغل بكل حرية، فور الحفظ ستجد ان الصفحة تم تحديثها.
رابط الإضافة 

5 - Dark Reader :

كمطور، فقد إعتدت العمل على محررات أكواد IDE بنمط الـ Dark Themes التي تساعد المطور على التركيز أكثر في الكود و تساعده على تجنب العياء من النظر مطولا في شاشة فاقعة اللون، اللون الأسود و الـ Dark Theme حقا مفيد أثناء البرمجة و يوفر لك آداء أفضل.
العائق هنا انه عند الإنتقال من الـ IDE إلى صفحات الويب ( لنقل مثلا Stackoverflow ) فإني أحتاج الى بضع ثواني من أجل التكيف على اللون الأبيض الفاقع مجددا للموقع، و المزعج بالنسبة لي أيضا، ليس فقط موقع Stackoverflow بل حتى منصات مثل Google او فيسبوك ( إن سمحت لي إضافة Go Fucking Work بذلك ) كلها تؤثر قليلا على إنتباهي، فكان عليك إيجاد بديل لذلك.
إضافة Dark Reader كانت الحل الذي أبحث عنه منذ مدة، فهي تقوم تقريبا بجعل أي موقع مهما كان بنمط الـ Dark Theme، يمكنك التحكم في المواقع التي لا تريدها ان تظهر كذلك، الجميل في الإضافة انها توازن الألوان و لا تجعل أي شيئ غامق اللون، بل تعرف أي الأشياء يجب ان يتم تحويلها الى لون سوداوي و ليس كل شيئ.
رابط الإضافة 

6 - AMINO CSS :

سأعود معك لحديث مطور الـ Front End و أخبرك أن مطور الويب سيشتغل كثيرا بخاصية الـ Developers Tool الموجودة في المتصفح التي تُظهر له الكود الخاصة بالصفحة و إمكانية إدارته و التعديل عليه في الصفحة، لكن مشكلة الـ Developers Tools و خصوصا الـ Style Elements أنها لا تظهر لك الكود الخاص بعدة عناصر دفعة واحدة بحيث يجب عليك تحديد أي عنصر في الصفحة و الحصول على الستايل الخاص به، و إن قمت بتحميل الصفحة مجددة فقد ضاعت كل تحديثاتك، بلغة أخرى لا تستطيع العمل على أزيد من عنصر دفعة واحدة.
لكن بإضافة AMINO CSS سيمكنك ذلك دفعة واحدة، بحيث يظهر لك نافذة منبثقة شبيهة بالمحرر تعوض الـ Developers tool من حيث التنسيق، إذ تستطيع التعديل على عدة عناصر دفعة واحدة، و حتى بعد تحديث الصفحة ستظهر لك كل تعديلاتك و الأكواد، كما يمكنك فتح أزيد من صفحة و التعديل على كل أكوادها في الإضافة.
رابط الإضافة 

7 - CSS Viewer : 

قد أتفصح بين الحين و الآخر مجموعة من مواقع الويب التي قد تدهشني التقنيات المستخدمة فيها او الـ CSS بشكل أدق المستخدم في احد العناصر بشكل جذاب و جديد بالنسبة لي، و قد أتلهف لمعرفة الكود المستخدم في بناء ذلك الستايل و ذلك التصميم، إستخدام الـ Inspect Element قد يفي بالغرض نسبيا، لكن ليس دائما خصوصا ان كان عبارة عن مجموعة وسوم متداخلة لكل وسم ستايل مخصص.
إضافة CSS Viewer ستساعدك على معرفة الجواب بشكل أكثر إحترافية، بعد تنصيبها قم بالتوجه الى أي موقع ثم أنقر على الإضافة في الشريط العلوي للإضافات، قم بتمرير فأرة الحاسوب على أي عنصر من عناصر الصفحة و سيظهر لك الـ CSS كاملا لكل عنصر و لكل جزء.
يمكنك من خلال الإضافة أيضا نسخ الكود الخاص بأي عنصر و ذلك بالنقر على زر C فقط، قد تجد إضافات أخرى مجانية مثل  CSS Peeper التي أنصحك بها أيضا، لكني لسبب ما أفضل إضافة CSS Viewer، ربما لإعتيادي عليها.
رابط الإضافة 

8 - JSON Viewer : 

حين تتعامل مع أي نوع من الـ RESTful API's فإنك تستقبل البيانات في الغالب على هيئة Json، لكن البيانات القادمة في الغالب ستأتي بصيغة JSON Minified، بمعنى ان كل الأكواد و المعلومات ستكون متداخلة و غير مفهومة و يصعب الحصول على كل Object و قيمته المقابلة  له، و قد تحتاج الى مواقع معينة من أجل إظهاره على شكل Tree لتسهيل قرائته.
لكن لما أحتاج الى موقع إن كان بإمكاني إستخدام إضافة JSON Viewer، إضافة بسيطة تسمح لك بإظهار أكواد الـ Json على شاكلة Tree بدل Minified، الجميل أيضا في الإضافة انها تستطيع التعامل مع مختلف التقنيات البرمجية الاخرى مثل XML او حتى الى الـ CSS أيضا.
رابط الإضافة 

9 - QuickCode : 

كشخص فضولي، فإن شغفي في التعلم لا محدود خصوصا في مجال التطوير و البرمجة، فأنا أود ان أتعلم و أطلع على الجديد في المجال بل و مشاركته لاحقا عبر مقالات في موقعنا أكوا ويب، لكن من الصعب البحث عن الدورات الملائمة و الكورسات الجيدة او الفيديوهات التعليمية ذات فائدة قوية، فلما البحث عنها إذن إن كان بإمكانك الإتيان بها بشكل يومي في نافذة متصفحك ؟
إضافة QuickCode تساعد المطورين و المبرمجين على التعلم السريع لعدة تقنيات جديدة و حديثة، فبعد تنصيب الإضافة و منحها الصلاحيات للظهور، سيمكنك في كل مرة تفتح نافذة جديدة في متصفحك أن تجد مجموعة كورسات جديدة في مجال التطوير و البرمجة قد تم إضافتها، لا تقلق فهي كلها مجانية و كلها متاحة للمشاهدة و الإستفادة منها، و تعتبر ميزة جيدة جدا لمن يريد البقاء على إطلاع بما يحدث في هذا العالم البرمجي.
رابط الإضافة 

10- Multi Browser Screenshot : 

التعامل مع التجاوب عبر متصفح جوجل كروم بات سهلا الآن، قبلا كان يتوجب عليك تنصيب إضافات مثل Responsive Checker من أجل معرفة إن كان الموقع متجاوبا مع بقية الأجهزة، لكن أداة المطورين Developers Tools قد أضافت هذه الخاصية و ألغت إستخدامنا لإضافات جوجل كروم أخرى، لكن ماذا عن توافق الموقع مع باقي المتصفحات ؟
لا يمكنك بالطبع تجربة موقعك على كل المتصفحات فهي كثيرة و لا يمكنك تنصيبها كلها من أجل معرفة كيف يبدو الموقع في كل واحد من المتصفحات، الحل إذن يكمن في إضافة Multi Browser Screenshot، فهي تسمح لك بأخذ Snap او صورة لموقعك او جزء من موقعك و إظهار صور متعددة كل صورة تُظهر موقعك في متصفح معين ( فايرفوكس، إيدج، اوبرا ... )، و بذلك يمكنك التعديل على أي جزء الى ان يتلائم مع المتصفح.
رابط الإضافة