عزز إنتاجية مطوري الويب

تم التحديث الأخير في 13 أكتوبر 2020

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

نعم ، يعد Firefox متصفحًا ممتازًا لتطوير الويب ، و Firefox Developer Edition رائع لتصحيح أخطاء CSS واختبارها. ومع ذلك ، يحتوي Chrome على قائمة طويلة من امتدادات الأدوات التي توفر الدعم لأحدث ميزات الويب وأدوات المطور التي تجعله المفضل لدى العديد من مطوري الويب لتعزيز إنتاجية مطوري الويب.

يحتوي Chrome Marketplace على بعض من أفضل الإضافات ، الأقدم منها والجديدة ، لمساعدة المطورين على تطوير واختبار موقع ويب أو صفحة مقصودة. أدناه ، ستعرف بعضًا من أفضل الإضافات التي أقترحها على أنها "ضرورية" في مربع أدوات تطوير الويب الخاص بك.

إضافات Chrome التي تعزز إنتاجية مطوري الويب

مساعد العلامات

يساعد Tag Assistant في استكشاف أخطاء تثبيت العديد من علامات Google وإصلاحها ، بما في ذلك Google Analytics و Google Tag Manager وما إلى ذلك. يمكّنك Tag Assistant من التحقق من أنك قمت بتثبيت علامات Google مختلفة بشكل صحيح على صفحتك. ما عليك سوى الانتقال إلى أي صفحة ، وسوف يخبرك Tag Assistant بالعلامات الموجودة ، ويبلغ عن أي أخطاء نكتشفها ، ويقترح التحسينات التي يمكن إجراؤها على التنفيذ. يتم فحص معظم علامات Google ، بما في ذلك Google Analytics ، وتتبع تحويل Adwords ، و Google Tag Manager ، وما إلى ذلك.

WhatRuns

اكتشف ما الذي يدير موقعًا إلكترونيًا - الأطر ، أدوات التحليلات ، إضافات WordPress ، الخطوط - سمها ما شئت. يعد ملحق WhatRuns على بُعد نقرة واحدة للعثور على التقنيات المستخدمة في أي موقع ويب تزوره. يكتشف حتى الأدوات والخدمات الجديدة والقادمة من أدوات المطورين وشبكات الإعلانات إلى المكونات الإضافية والسمات في WordPress. ليس هذا فقط - يمكنك متابعة مواقع الويب بحيث يتم إخطارك عند استخدامهم لتقنيات جديدة أو إزالة التقنيات الحالية.

Vue.js Devtools

اسمه واضح جدا. إنه امتداد Chrome و Firefox DevTools لتصحيح أخطاء تطبيقات Vue.js. يسمح لك بفحص التسلسلات الهرمية لمكونات Vue.js في أدوات مطوري Chrome. ستحصل على علامة تبويب جديدة في Chrome DevTools: "Vue."

أدوات المطورين المتفاعلة

بصفتها Vue.js Devtools ، فإن React Developer Tools هي امتداد لمتصفح Chrome و Firefox DevTools لمكتبة React JavaScript مفتوحة المصدر. يسمح لك بفحص التسلسلات الهرمية لمكونات React في أدوات مطور Chrome. ستحصل على علامتي تبويب جديدتين في Chrome DevTools: "المكونات" و "ملف التعريف". تعرض لك علامة التبويب "المكونات" مكونات الجذر React التي تم عرضها على الصفحة والمكونات الفرعية التي انتهى بها الأمر إلى عرضها. من خلال تحديد أحد المكونات الثلاثة ، يمكنك فحص وتعديل الدعائم الحالية وحالتها في اللوحة الموجودة على اليمين. في مسارات التنقل ، يمكنك فحص المكون المحدد ، والمكون الذي أنشأه ، والمكون الذي أنشأه ، وما إلى ذلك.

عارض JSON رائع

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

مفتش META SEO

مفيد لفحص البيانات الوصفية الموجودة داخل صفحات الويب ، وعادة لا تكون مرئية أثناء التصفح. البيانات الوصفية ليست فقط علامات HTML الوصفية المعتادة ، ولكن علامات XFN ، وتنسيقات microformat المختلفة ، والسمة الأساسية التي تم تقديمها مؤخرًا ، وروابط عدم المتابعة ، وما إلى ذلك. يستهدف هذا الامتداد بشكل أساسي مطوري الويب الذين يحتاجون إلى التحقق من HTML لموقعهم اتبع إرشادات Google لمشرفي المواقع ، ولكن حتى لمن لديه فضول بشأن أي محتويات صفحة لا تكون عادةً مرئية ولكن يمكنها الكشف عن خصائص الموقع المثيرة للاهتمام. يحتوي أيضًا على خيار طباعة / تصدير يتيح لك طباعة التقرير أو حفظه بتنسيق PDF أو نسخ / لصق البيانات في الأداة المفضلة لديك.

عارض سريع لنمط HTML

عارض سريع بنمط عنصر DOM HTML. ما عليك سوى تحريك الماوس ، وسيظهر لك أنماط الهدف.

CSSViewer

CSSViewer هو عارض خصائص CSS بسيط لمتصفحي Chrome و Firefox. لتمكين CSSViewer ، انقر فوق رمز شريط الأدوات ثم قم بتمرير أي عنصر تريد فحصه في الصفحة الحالية.

خطوط النينجا

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

أنا أحب التكيف - اختبار الجوال / الاستجابة

أداة لاختبار استجابة المواقع. يضيف ملحق Chrome ILOVEADAPTIVE زرًا إلى شريط الأدوات الخاص بك. عند النقر فوق الزر ، سيفتح عنوان URL الذي تتصفحه في علامة التبويب الحالية. تشمل الميزات الرئيسية معاينة عنوان URL على أجهزة متعددة في وقت واحد ، وتصفية الأجهزة ، وتصفية نظام التشغيل ، وتغيير الكمية ، والتكبير ، وإظهار لوحة ios ، والتبديل إلى الوضع الأفقي والعمودي.

حيوية الويب

قياس المقاييس من أجل موقع سليم. تعد عناصر الويب الحيوية من إشارات الجودة الأساسية لتقديم تجربة مستخدم رائعة على الويب (https://web.dev/vitals). يقيس هذا الامتداد "حيوية الويب الأساسية" ، مما يوفر ملاحظات فورية حول مقاييس التحميل والتفاعل والتخطيط. إنه متوافق مع كيفية قياس هذه المقاييس بواسطة Chrome وإبلاغ أدوات Google الأخرى بها.

صفحة Ruler Redux

مسطرة Web Developer / Designer للحصول على أبعاد بكسل مثالية وتحديد موضع لقياس العناصر على أي صفحة ويب. Page Ruler Redux هو مطور ويب أساسي وأداة تصميم تتيح لك الحصول على قياسات مثالية لعناصر الويب. إنه مصمم لتطوير الواجهة الأمامية لموقع الويب أو تصميم الويب أو أي مهمة قد تحتاجها للحصول على قياسات بكسل مثالية لأي عناصر ويب.

مسطرة الشبكة

إنشاء شبكات وقياس المسافة بينهما بسهولة. يسمح لك بإنشاء شبكات عمودية وأفقية ، بأسلوب Photoshop. يحتوي على مسطرة لقياس المسافة بين شبكاتك أيضًا.

حدد ذلك

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

محاكي متصفح الجوال

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

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