مجموعة أدوات المطورين المثالية لتصميم وتطوير الويب

أكثر من 64 أداة قوية لفحص وقياس والتقاط وتحليل وتصميم صفحات الويب مباشرة في متصفحك.

الكل المفضلة فحص التقاط قياس index.popup_tab_analyse
CSS Inspector
مفحص الرسوم المتحركة
نسخ كـ Tailwind
وضع المخطط فقط
مساعد Tailwind
مخطط الصفحة
كاشف المكونات
تحريك العنصر
حذف/إخفاء العنصر
تصدير العنصر
نسخ المكون
لقطة شاشة
استخراج الصور
جاللب SVG
استبدال الصورة
مولد كود QR
كيفية البدء

ابدأ في استخدام DevSuite Pro ببضع نقرات

البدء بسيط. قم بتثبيت الامتداد، وافتح أي صفحة ويب، وقم بالوصول إلى أكثر من 64 أداة للمطورين من النافذة المنبثقة أو اللوحة العائمة. لا حاجة للإعدادات.

أضف الامتداد إلى Chrome

  1. افتح سوق Chrome الإلكتروني وابحث عن امتداد "DevSuite Pro".
  2. انقر على "إضافة إلى Chrome"، ثم قم بالتأكيد بالنقر على "إضافة الامتداد" في النافذة المنبثقة.

افتح صفحة ويب وابدأ الأداة

  1. انتقل إلى أي موقع ويب، ثم انقر على أيقونة DevSuite Pro في شريط الأدوات أو استخدم اللوحة العائمة في الصفحة.
  2. اختر أي أداة من الشبكة. أدوات مثل CSS Inspector أو المساطر أو منتقي الألوان ستعمل فوراً على الصفحة الحالية.
ميزات الامتداد

الميزات الرئيسية لـ DevSuite Pro

يوفر DevSuite Pro أكثر من 64 أداة للمطورين لفحص صفحات الويب وقياسها وتصميمها وتحليلها. سرع سير عملك مع الميزات القوية المدمجة مباشرة في متصفحك.

CSS Inspector

قم بتمرير الماوس فوق أي عنصر لرؤية أنماط CSS الخاصة به فوراً وتحريرها مباشرة، مما يجعل تصحيح وضبط التصاميم في الوقت الفعلي أمراً سهلاً.

تعرف على المزيد →

مفحص العناصر

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

تعرف على المزيد →

المساطر والأدلة

قم بقياس المسافات، والتحقق من المحاذاة، وإضافة مساطر وأدلة دقيقة بالبكسل إلى أي صفحة ويب لضمان محاذاة تصميمك بشكل مثالي.

تعرف على المزيد →

منتقي الألوان (Color Picker)

التقط الألوان من أي عنصر في الصفحة وانسخ قيم HEX أو RGB أو HSL إلى حافظتك بنقرة واحدة.

تعرف على المزيد →

التقاط لقطة شاشة

التقط لقطات شاشة لكامل الصفحة أو المنطقة الظاهرة في أي صفحة ويب وقم بتنزيلها فورا - مثالي لمشاركة التصاميم والإبلاغ عن الأخطاء.

تعرف على المزيد →

مختبر الاستجابة

قم بمعاينة صفحة الويب بأحجام شاشات ودقة أجهزة مختلفة لاختبار التصميم المستجيب دون مغادرة المتصفح.

تعرف على المزيد →
استكشف المزيد من الأدوات بالتفصيل:
CSS Inspector مجاني

فحص وتحرير أنماط CSS مباشرة

تصحيح والتحكم في الرسوم المتحركة CSS في الوقت الفعلي

تحويل CSS لأي عنصر إلى فئات Tailwind Utility

تصور البنية التخطيطية الكاملة لأي صفحة

احصل على فئات Tailwind مصنفة لأي عنصر

عرض مرئي لشجرة HTML على أي صفحة ويب

اكتشاف مكونات React، Vue، Angular و Svelte على أي موقع

قُم بالسحب والإفلات لتغيير موضع أي عنصر في الصفحة

قم بإزالة أو تبديل رؤية أي عنصر

تصدير أي عنصر كـ HTML أو CSS أو JSON

قم بإنشاء مكونات React و Vue و Svelte من أي عنصر

لقطة شاشة مجاني

التقاط لقطات شاشة للمنطقة المرئية أو الصفحة بأكملها

عرض، تحديد وتنزيل جميع الصور من أي صفحة ويب

بحث، معاينة وتنزيل كل SVG في أي صفحة

استبدل أي صورة في صفحة الويب بصورتك الخاصة

إنشاء رموز QR لأي رابط موقع (URL) أو نص فوراً

مساطر وأدلة قياس دقيقة بالبكسل في أي صفحة

معاينة إطارات عرض الأجهزة المتعددة في نفس الوقت

قياس مسافات دقيقة بالبكسل بين أي عنصرين

تصور بصري لكل تسلسل التكديس ومستويات Z-Index

فحص تخطيطات CSS Grid المستجيبة والـ Flexbox بتراكيب مرئية

محاكاة بؤر انتباه المستخدمين الافتراضية على أي صفحة

مسح منظم ومحدد لملفات الذاكرة المؤقتة وملفات الارتباط ومساحات التخزين المحلية

اكتشف كافة التقنيات المخبأة خلف أي صفحة ويب

تدقيق شامل لمحركات البحث SEO: الوسوم، العناوين التراتبية الدلالية، وأوسمة المشاركة

تدقيق آلي لمعايير WCAG: التباين، النص البديل، خصائص ARIA وأكثر

انقر على أي نص في أي صفحة لتعديله على الفور

استبدل أي خط بآخر من Google Fonts لكامل الصفحة أو لعنصر محدد

اكتشف كل خط مستخدم على أي صفحة ويب

أداة قطارة دقيقة لالتقاط قيم ألوان HEX، RGB، و HSL بدقة بكسلات مُكبرة

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

تطبيق الوضع الليلي (المظلم) على أي موقع ويب في لحظات

تمكين أو تعطيل JavaScript فوراً وبشكل مستقل لكل علامة تبويب

عرض، وتعديل، وإضافة، وحذف ملفات تعريف الارتباط لأي نطاق

عرض مخرجات وحدة التحكم في لوحة عائمة — بدون أدوات المطور (DevTools)

مراقبة كافة طلبات وعمليات الشبكة في الوقت الفعلي

عرض وتعديل وإضافة وحذف localStorage و sessionStorage

فحص وتقصي كل رابط على الصفحة واصطياد المكسور منها

لوحة معلومات الأداء الفورية: وقت التحميل، وإحصاءات DOM، والموارد

منسق JSON مجاني

تنسيق وتصغير والتحقق من صحة JSON بضغطة واحدة

تشفير وفك تشفير السلاسل النصية من وإلى Base64 فوراً

تشفير وفك تشفير سلاسل URL بضغطة واحدة

تشفير وفك تشفير كيانات HTML فوراً

هروب وفك هروب السلاسل النصية للكود

64 صورة ↔ Base64 مجاني

تحويل الصور من وإلى عناوين URL للبيانات بتنسيق Base64

مصحح JWT مجاني

فك تشفير رموز JSON الويب (JWT) فوراً

مولد UUID مجاني

توليد معرفات UUID v4 بكميات كبيرة

حساب قيم هاش MD5، SHA-1، SHA-256، SHA-384، SHA-512

توليد كلمات مرور قوية تشفيرياً

اختبار التعبيرات النمطية مباشرة مع تمييز التطابقات

تحويل تواريخ Unix و ISO والتواريخ القابلة للقراءة

مقارنة كتلتين من النص سطراً بسطر

التحقق من نسبة تباين WCAG لأي لونين

تحويل HEX و RGB و HSL و HSV و OKLCH فوراً

استخراج لوحة الألوان السائدة من أي صورة

الحصول على محددات CSS و XPath لأي عنصر

فاحص CORS مجاني

اختبار طلبات النطاقات المتقاطعة وفحص ترويسات CORS

التقاط إطارات WebSocket في الوقت الفعلي

مسح الصفحة بحثاً عن الصور المعطلة فوراً

تعبئة النماذج تلقائياً ببيانات اختبار واقعية

التحويل بين CSV و JSON في كلا الاتجاهين

منسق XML مجاني

تنسيق والتحقق من صحة وعرض XML مع تمييز الصيغة

منسق SQL مجاني

تجميل وتنسيق استعلامات SQL

حفظ صفحات الويب كملفات PDF نظيفة

التسعير والخطط

تسعير بسيط وشفاف

اختر أفضل خطة لسير عملك. ابدأ مجاناً، وقم بالترقية في أي وقت.

أساسي

مثالي لتجربة DevSuite Pro. لا حاجة لبطاقة ائتمان.

$0

مجاني للأبد
ابدأ مجاناً
  • 20 أداة مجانية للمطورين
  • CSS Inspector ومنتقي الألوان
  • التقاط لقطة شاشة
  • واجهة اللوحة العائمة
  • جميع التحديثات المجانية المستقبلية

شهرياً الأكثر رواجاً

وصول كامل لجميع الأدوات الاحترافية الـ 64+. فاتورة شهرية.

$2.99

شهرياً
ابدأ الخطة الشهرية
  • جميع أدوات المطورين الـ 64+
  • وصول كامل لأدوات برو
  • ما يصل إلى 3 أجهزة
  • دعم ذو أولوية
  • إلغاء في أي وقت

لمرة واحدة أفضل قيمة

ادفع مرة واحدة، واستخدمه للأبد. وصول كامل لجميع أدوات برو الـ 64+ بدون أي رسوم اشتراك.

$29.99

دفعة لمرة واحدة
اشتري مرة واحدة، استخدمه للأبد
  • جميع أدوات المطورين الـ 64+
  • وصول كامل لأدوات برو
  • ما يصل إلى 3 أجهزة
  • دعم ذو أولوية
  • لا توجد رسوم اشتراك أبداً
DevSuite Pro FAQ section background
الأسئلة الشائعة

الأسئلة المتداولة من مستخدمي DevSuite Pro

أسئلة شائعة حول ميزات واستخدام امتداد DevSuite Pro. إذا كان لديك سؤال، فقد تجد الإجابة أدناه.

كيف أقوم بتثبيت DevSuite Pro؟

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

ما الفرق بين الأدوات المجانية وأدوات برو؟

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

لماذا لا تعمل الأداة في بعض المواقع؟

تحتوي بعض مواقع الويب على سياسات أمان محتوى صارمة (CSP) تمنع بعض إجراءات امتدادات المتصفح. هذا أمر شائع بشكل خاص في المواقع المصرفية والحكومية. بالإضافة إلى ذلك، لا تسمح صفحات Chrome الداخلية (chrome://) للامتدادات بتشغيل نصوص برمجية للمحتوى.

هل التغييرات التي أجريتها في الصفحة دائمة؟

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

كيف يمكنني تفعيل ترخيص برو الخاص بي؟

افتح نافذة DevSuite Pro المنبثقة، وانقر على أيقونة الإعدادات في الزاوية العلوية اليمنى. انتقل لأسفل إلى قسم الترخيص، ثم الصق مفتاح الترخيص الخاص بك في حقل الإدخال وانقر فوق تفعيل. إذا كان المفتاح صالحاً، فستتغير الشارة من مجاني إلى برو، وسيتم فتح جميع أدوات برو فورا.

كيف يمكنني تحريك اللوحة العائمة أو إخفائها؟

يمكنك تحريك اللوحة من خلال الذهاب إلى الإعدادات واختيار موقع شريط جانبي مختلف - أعلى، أسفل، يسار، أو يمين. يمكنك أيضاً إخفاء اللوحة تماماً عن طريق إيقاف تشغيل مفتاح "إظهار اللوحة في الصفحات" في الإعدادات، أو بالضغط على Ctrl+Shift+X في أي وقت.

هل يجمع DevSuite Pro بيانات التصفح؟

لا. لا يجمع DevSuite Pro أو يتتبع أو يرسل أي من بيانات التصفح الخاصة بك. يتم تخزين جميع الإعدادات محلياً في متصفحك. يتم إرسال الطلب الخارجي الوحيد أثناء تفعيل مفتاح الترخيص للتحقق من مفتاحك مع خادمنا.

هل يمكنني استخدام DevSuite Pro في Firefox؟

نعم! DevSuite Pro متاح في كل من سوق Chrome الإلكتروني وإضافات Firefox. وهو يعمل على Chrome و Edge و Brave والمتصفحات الأخرى القائمة على Chromium، وكذلك على Firefox.