🍄 🐇 👊🏼 ملحقات المستعرض المطلوبة من قبل كل مطور الويب 🎅🏾 👩‍⚕️ 👩‍👩‍👦

المتصفحات الحديثة ليست مجرد تطبيقات رائعة لتصفح الويب.

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

أدوات تطوير React / Redux و Vue.js

React و Vue.js من أدوات التطوير الأمامية المعروفة. من أجل العمل معهم بأكبر قدر ممكن من الكفاءة ، يجدر تثبيت ملحقات المتصفح المناسبة. يعزز

ملحق React Developer Tools إمكانات أدوات المطورين. باستخدامه ، يمكنك فحص مكونات التفاعل ، والخصائص التي تم تمريرها إلى المكونات ، وحالة المكونات. يمكن أن يجلب فوائد حقيقية لمطور React.

رد فعل أدوات المطور

إذا واجهت أي مشاكل أثناء العمل مع حالة التطبيق ، فقد يأتي ملحق Redux DevTools لمساعدتك . يمكن استخدامه للعمل مع الحالات التي يتم ترتيبها بطرق مختلفة ؛ يعمل بشكل جيد خاصة عند استخدامه مع Redux. بالمناسبة ، إليك نصيحة. قم بتثبيت هذا الملحق وزيارة موقع مثل airbnb.com. يستخدم React / Redux ، لذلك ، بمساعدة Redux DevTools ، ستتمكن من معرفة كيفية عمل إدارة حالة الصفحات على هذا الموقع. بالنسبة لي - لذلك فهي مفيدة للغاية.

Vue.js devtools هو نفس أدوات مطور التفاعل ، ولكن بالنسبة لـ Vue.js. هذا الملحق مناسب جدًا لتصحيح مكونات Vue وهو مفيد لكل من يستخدم هذا الإطار.

Vue.js devtools

Jsonview

هل فكرت يومًا في التفكير في أنه في متصفحات المبرمجين الآخرين تبدو بيانات JSON واضحة ودقيقة ، ولكن ليس في بلدك؟ ربما كانت النقطة الأساسية هي أن الآخرين يستخدمون امتداد JSONView . يعمل هذا الملحق على تنسيق بيانات JSON بسرعة ودقة. JSONView هو بالتأكيد أحد امتدادات المتصفح المفضلة.

Jsonview

مكتبة الشم

Library Sniffer هي أداة رائعة لأي شخص يريد أن يكتشف بسرعة الأدوات أو المكتبات أو الأطر التي تم استخدامها لإنشاء الصفحات التي يشاهدها. على سبيل المثال ، بمساعدة Library Sniffer ، يمكنك معرفة ما تم إنشاء الموقع باستخدامه: WordPress و Drupal و React و Vue.js و AngularJS ...

مكتبة الشم

CSS Scan 2.0

يعد CSS Scan 2.0 امتدادًا مفيدًا يسمح للمطور باستكشاف CSS ونسخه بمجرد تمرير مؤشر الماوس فوق عناصر الصفحة. صحيح ، لديه ناقص واحد. والحقيقة هي أنه للعمل معها تحتاج إلى شراء ترخيص.

CSS Scan 2.0

هذا الملحق لديه بديل مجاني - CSS Peeper . وهي مصممة بشكل أساسي للمصممين ، وليس لأولئك الذين يكتبون التعليمات البرمجية.

مطور ويب

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

مطور ويب

Whatfont

WhatFont هو ملحق صغير جدًا يسمح لك بتحديد الخطوط المستخدمة على صفحات الويب. من أجل معرفة الخط الذي تم تصميم جزء النص له ، يكفي تمكين التمديد وتحريك مؤشر الماوس فوق هذا الجزء. العمل معه ، كما ترون ، بسيط للغاية. يمكن استخدامه ، مثل الملحق السابق ، من قبل أولئك الذين يعملون في Chrome ، وأولئك الذين يعملون في Firefox.

Whatfont

كولورزيلا

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

كولورزيلا

الطيف

تعد إمكانية الوصول إلى المحتوى جانبًا مهمًا لتطوير الويب الحديث. الحقيقة هي أن العديد من الأشخاص لديهم قدرة محدودة على التفاعل مع صفحات الويب. أحد هذه القيود هو نقص رؤية الألوان (CVD). يؤثر على قدرة الشخص على تمييز ألوان معينة. يسمح لك امتداد Spectrum بالبحث في المواقع لملاءمتها للأشخاص الذين يعانون من أنواع مختلفة من الأمراض القلبية الوعائية.

الطيف

لوحة الموقع

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

لوحة الموقع

توبي

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

توبي

Talend API Tester

Talend API Tester هو ملحق رائع يسمح لك بالعمل من متصفح به واجهات برمجة تطبيقات مختلفة. يمكن أن تكون واجهات برمجة التطبيقات هذه استنادًا إلى تقنيات REST و SOAP و HTTP. هذا يشبه ، على سبيل المثال ، ساعي البريد. يدعم الإصدار المجاني من الامتداد تنفيذ جميع أنواع طلبات HTTP ، وتبادل البيانات الآمنة ، والمصادقة.

Talend API Tester

التقاط شاشة كاملة الصفحة

هل سبق لك أن رغبت في أخذ لقطة شاشة كاملة للصفحة التي تعرضها بدون حركات غير ضرورية؟ إذا كان الأمر كذلك ، فإن ملحق Full Page Screen Capture قد يكون مفيدًا . باستخدامه ، يمكنك الحصول على لقطات شاشة لمحتويات الصفحات بالكامل بتنسيق PDF أو كصورة. يمكن أن تعمل حتى مع العناصر التي تدعم التمرير ، ومع العناصر iframe.

التقاط شاشة كاملة الصفحة

ملخص

استعرضنا حوالي اثني عشر ملحقات متصفح لمطوري الويب. نأمل أن تجد شيئًا من بينها مفيدًا لك.

القراء الأعزاء! ما هي ملحقات المتصفح التي تستخدمها لتطوير الويب؟

ملحقات المستعرض المطلوبة من قبل كل مطور الويب