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

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

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

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

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

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

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

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

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

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

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

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 Formatter مجاني

Format, Minify & Validate JSON in a Click

64 Base64 Encode / Decode مجاني

Encode Strings To & From Base64 Instantly

Encode & Decode URL Strings in One Click

& HTML Entity Encoder مجاني

Encode & Decode HTML Entities Instantly

Escape & Unescape Strings for Code

64 Image ↔ Base64 مجاني

Convert Images To & From Base64 Data URIs

JWT Debugger مجاني

Decode JSON Web Tokens Instantly

UUID Generator مجاني

Generate Bulk UUID v4 Identifiers

Hash Generator مجاني

Compute MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes

Password Generator مجاني

Generate Cryptographically Strong Passwords

Regex Tester مجاني

Test Regular Expressions Live With Match Highlighting

Timestamp Converter مجاني

Convert Unix, ISO, and Human-Readable Dates

Diff Tool مجاني

Compare Two Text Blocks Line By Line

Contrast Checker مجاني

Check WCAG Contrast Ratio of Any Two Colors

Convert HEX, RGB, HSL, HSV & OKLCH Instantly

Extract The Dominant Palette From Any Image

Get CSS Selectors & XPath For Any Element

CORS Checker مجاني

Test Cross-Origin Requests & Inspect CORS Headers

Capture WebSocket Frames in Real Time

Broken Image Finder مجاني

Scan The Page For Broken Images Instantly

Form Filler برو

Auto-Fill Forms With Realistic Test Data

Convert Between CSV and JSON in Either Direction

XML Formatter مجاني

Format, Validate & View XML With Syntax Highlighting

SQL Formatter مجاني

Beautify & Format SQL Queries

Convert to PDF مجاني

Save Web Pages As Clean PDFs

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

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

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

أساسي

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

$0

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

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

$2.99

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

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

$29.99

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

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

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

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

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

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

الأدوات المجانية (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.