DevSuite Pro

بیش از ۶۴ ابزار قدرتمند توسعه‌دهنده در یک افزونه — بازرسی، اندازه‌گیری، ضبط، تحلیل و طراحی

DevSuite Pro: مجموعه ابزار توسعه وب و طراحی همه‌کاره (۶۴ ابزار در یک Chrome Extension) نصب ده‌ها افزونه تک‌کاره را متوقف کنید. DevSuite Pro یک toolkit کامل توسعه وب و طراحی front-end برای Chrome است که ۶۴ ابزار حرفه‌ای را در یک افزونه سریع و امن جمع می‌کند. CSS را زنده تغییر دهید، HTML ویرایش کنید، اسکرین‌شات تمام‌صفحه بگیرید، عکس‌ها و SVG دانلود کنید، SEO بررسی کنید، WCAG تست کنید، JSON / XML / SQL فرمت کنید، JWT decode کنید، رمز و UUID بسازید، نمای موبایل/تبلت شبیه‌سازی کنید، صفحه به PDF تبدیل کنید، network و WebSocket پایش کنید، dark mode بگذارید، cookie ویرایش کنید. 💾 ذخیره خودکار: ویرایش‌های ماندگار به ازای سایت شش ابزار تغییرات را به ازای URL ذخیره می‌کنند، حتی پس از بستن مرورگر: • بازرس CSS — ویرایش CSS باقی می‌ماند • جابه‌جایی عنصر — element جابه‌جا‌شده در جای خود می‌ماند • حذف/مخفی کردن عنصر — تبلیغ، popup و banner برای همیشه حذف • جایگزینی تصویر — عکس‌های جایگزین باقی می‌مانند • تغییر فونت — فونت انتخابی خودکار اعمال می‌شود • ویرایشگر متن زنده — متن‌های ویرایش‌شده حفظ می‌شوند ═══ 🎨 بررسی، ویرایش و کپی ═══ ۱) بازرس CSS [رایگان] — روی هر element hover کنید، CSS را زنده تغییر دهید، computed، box model، padding، margin و متغیرهای CSS را ببینید. ذخیره خودکار. ۲) بازرس انیمیشن [پولی] — هر animation، transition و @keyframes را تشخیص می‌دهد. کند، توقف، تکرار و فریم به فریم. duration، easing، delay. ۳) کپی به‌صورت Tailwind [پولی] — راست‌کلیک روی element تا CSS به utility class Tailwind تبدیل شود. ۴) حالت فقط Outline [رایگان] — outline ۱ پیکسلی به همه element‌ها. wireframe و مرز div‌های پنهان را ببینید. ۵) دستیار Tailwind [پولی] — معادل کامل class Tailwind با breakpoint و dark mode. cheat sheet داخلی برای spacing، رنگ، flex، grid. ۶) طرح‌کلی صفحه [رایگان] — کل tree HTML به‌صورت outline تعاملی. ساختار HTML و DOM hierarchy. ۷) کاشف کامپوننت [پولی] — تشخیص popular JavaScript frameworks and component libraries. ۸) جابه‌جایی عنصر [پولی] — هر element را بکشید. layout صفحه را بدون کد تغییر دهید. ذخیره خودکار. ۹) حذف / مخفی کردن عنصر [رایگان] — کلیک کنید تا حذف یا مخفی شود. تبلیغ، cookie banner، popup و sticky header مسدود. ۱۰) خروجی عنصر [پولی] — HTML، CSS computed و JSON هر element را خروجی بگیرید. ۱۱) کپی کد کامپوننت [پولی] — element را به React JSX، Vue SFC یا Svelte component تبدیل کنید. ۱۲) یابنده مسیر DOM [پولی] — CSS selector، XPath کامل و querySelector برای Selenium, Puppeteer. ═══ 📸 عکس‌برداری و دارایی ═══ ۱۳) اسکرین‌شات [رایگان] — viewport، اسکرین‌شات تمام‌صفحه یا یک element. صفحات بلند، infinite scroll، lazy-load. بدون watermark. ۱۴) استخراج تصاویر [رایگان] — همه عکس‌های سایت را با یک کلیک دانلود کنید. فیلتر بر اساس اندازه، فرمت (PNG، JPG، GIF، WebP، SVG) به‌صورت ZIP. ۱۵) دریافت‌کننده SVG [پولی] — هر آیکون SVG و وکتور inline. پیش‌نمایش، کپی، بهینه‌سازی، دانلود به SVG/PNG. ۱۶) جایگزینی تصویر [پولی] — عکس صفحه را با فایل محلی یا URL جایگزین کنید. ذخیره خودکار — برای mockup مشتری. ۱۷) تبدیل به PDF [رایگان] — صفحه را به PDF تمیز ذخیره کنید با مخفی‌سازی تبلیغ، تم روشن، اندازه دلخواه. تبدیل HTML به PDF. ═══ 📐 چیدمان و اندازه‌گیری ═══ ۱۸) سازنده QR Code [رایگان] — URL را به QR code تبدیل کنید (URL، Wi-Fi، vCard) و به PNG دانلود. ۱۹) خط‌کش صفحه [رایگان] — خط‌کش و راهنما با دقت پیکسلی. اندازه‌گیری افقی، عمودی و مورب. ۲۰) نمایشگر واکنش‌گرا [پولی] — سایت را در چند اندازه کنار هم ببینید — common mobile, tablet, and desktop sizes، viewport دلخواه. اسکرول هم‌زمان. ۲۱) اندازه‌گیری فاصله [رایگان] — دو element را کلیک کنید تا فاصله X، Y و مورب را به پیکسل ببینید. ۲۲) بازرس Z-Index [پولی] — هر stacking context و z-index را بصری‌سازی کنید. modal مخفی و dropdown خراب را تشخیص دهید. ۲۳) مصورساز Grid / Flex [پولی] — هر container CSS Grid و Flexbox با overlay رنگی track، gap و alignment. ═══ 🔍 تحلیل و دیباگ ═══ ۲۴) شبیه‌ساز نقشه حرارتی [پولی] — heatmap پیش‌بینی توجه کاربر بر اساس F-pattern و سلسله‌مراتب بصری. ۲۵) پاک کردن داده‌های مرور [رایگان] — cache، cookies، localStorage و sessionStorage فقط برای سایت فعلی. ۲۶) کاشف فناوری سایت [پولی] — تکنولوژی پشت سایت: frontend frameworks, CMS, e-commerce, CDN, hosting, analytics. ۲۷) بازرس SEO [رایگان] — بررسی جامع SEO: title، meta، H1–H6، OpenGraph، Twitter Card، canonical، robots، alt. پیش‌نمایش Google. ۲۸) بازرس دسترس‌پذیری [پولی] — بررسی WCAG 2.1 سطح AA. کنتراست، alt، ARIA، landmark برای ADA، EAA، Section 508. ۲۹) پایشگر شبکه [پولی] — هر fetch، XHR و AJAX با method، status، headers، payload، response و timing. ۳۰) بازرس WebSocket [پولی] — frame WebSocket real-time. دیباگ Socket.io و چت. ۳۱) بررسی لینک‌های شکسته [پولی] — اسکن لینک شکسته (404، 500، DNS، timeout) و گزارش HTTP status. ۳۲) تصاویر شکسته [رایگان] — اسکن عکس‌های بارگذاری‌نشده (404، src گمشده، DNS، CORS). ۳۳) بررسی CORS [رایگان] — تست cross-origin و header CORS. تشخیص خطای "blocked by CORS policy". ═══ 🅰️ طراحی و تایپوگرافی ═══ ۳۴) ویرایشگر متن زنده [رایگان] — روی هر متن کلیک کنید تا ویرایش شود. headline، پاراگراف، دکمه. ذخیره خودکار. ۳۵) تغییر فونت [پولی] — فونت را با ۱٬۵۰۰+ Google Fonts جایگزین کنید — سراسری یا به ازای element. ذخیره خودکار. ۳۶) فهرست همه فونت‌ها [رایگان] — هر فونت در صفحه — web font، system font، weight، style. کپی CSS font-family. ۳۷) انتخابگر رنگ [رایگان] — قطره‌چکان پیکسلی. رنگ از متن، پس‌زمینه، عکس، gradient و SVG. خروجی HEX، RGB، HSL با zoom. ۳۸) پالت رنگ [رایگان] — پالت رنگ کامل از هر صفحه با مرتب‌سازی فرکانس و HEX. ۳۹) مبدل فرمت رنگ [رایگان] — هر رنگ را در همه فرمت‌های CSS از یک پنل ترجمه کنید (مثلاً #FF5733 را بچسبانید و آن را زنده به‌صورت rgb(255, 87, 51)، hsl(11, 100%, 60%)، hsv(11, 80%, 100%) و oklch(64% 0.21 32) ببینید، با گزینه‌های آلفا برای شفافیت). ۴۰) استخراج رنگ از تصویر [رایگان] — پالت رنگ غالب از عکس. طرح رنگ از hero image. ═══ ⚡ کلیدها و ابزار صفحه ═══ ۴۱) حالت تاریک اجباری [رایگان] — تم تیره راحت برای هر سایت. dark mode اجباری، night mode. inversion هوشمند. ۴۲) سوییچ JavaScript [رایگان] — JS را به ازای تب فعال/غیرفعال. تست بدون JS، بررسی SSR. ۴۳) ویرایشگر کوکی [رایگان] — مدیریت کامل cookie: مشاهده، ساخت، ویرایش، حذف، import، export. دیباگ auth. ۴۴) لاگر کنسول [رایگان] — نمایشگر inline برای console.log، warn، error. بدون DevTools — برای دیباگ موبایل. ۴۵) ویرایشگر Local Storage [رایگان] — مشاهده و ویرایش localStorage و sessionStorage. دیباگ feature flag و A/B test. ۴۶) عملکرد صفحه [رایگان] — متریک timing، breakdown منابع، آمار DOM، امتیاز سلامت. ═══ ⚙️ فرمت‌کننده‌ها، مبدل‌ها، مولدها ═══ ۴۷) فرمت‌کننده JSON [رایگان] — beautify، minify، اعتبارسنجی و tree با تشخیص syntax error. ۴۸) رمزگذار/رمزگشای Base64 [رایگان] — encode و decode Base64. UTF-8 و باینری. ۴۹) رمزگذار/رمزگشای URL [رایگان] — کاراکتر خاص به percent-encoded یا برعکس. ۵۰) رمزگذار موجودیت HTML [رایگان] — کاراکتر خاص HTML (&, <, >, ", ') به entity. ۵۱) فرار از Backslash [رایگان] — escape و unescape backslash (\\n, \\t, \\", \\\\). برای JSON و regex. ۵۲) تصویر ↔ Base64 [رایگان] — عکس (PNG، JPG، GIF، SVG، WebP) به Base64 data URL. ۵۳) دیباگر JWT [رایگان] — decode JSON Web Token. header، payload، signature. ۵۴) سازنده UUID [رایگان] — UUID v4 (RFC 4122) تکی یا انبوه. ۵۵) سازنده Hash [رایگان] — MD5، SHA-1، SHA-256، SHA-384، SHA-512. ۵۶) سازنده رمز عبور [رایگان] — رمز تصادفی رمزنگاری‌شده با طول و کاراکتر دلخواه. ۵۷) آزمایشگر Regex [رایگان] — تست regex با highlight زنده، capture group، flag (g, i, m, s, u, y). ۵۸) مبدل Timestamp [رایگان] — Unix timestamp، ISO 8601، RFC 2822 با timezone. ۵۹) ابزار Diff [رایگان] — مقایسه دو متن خط به خط با کد رنگی. ۶۰) بررسی کنتراست (WCAG) [رایگان] — نسبت کنتراست WCAG با درجه AA و AAA. ۶۱) CSV ↔ JSON [رایگان] — تبدیل دوطرفه CSV و JSON با تشخیص خودکار header. ۶۲) فرمت‌کننده XML [رایگان] — beautify، minify و اعتبارسنجی XML. SOAP، RSS، sitemap. ۶۳) فرمت‌کننده SQL [رایگان] — فرمت SQL (common database dialects). ۶۴) پرکننده فرم [پولی] — پر کردن خودکار فرم با داده آزمایشی — نام، ایمیل، تلفن، آدرس، کارت تستی، Lorem Ipsum. ═══ 🚀 رایگان در برابر پولی ═══ ✅ همیشه رایگان — ۴۳ ابزار (انتخابگر رنگ، اسکرین‌شات، فرمت‌کننده JSON، بازرس SEO، ویرایشگر کوکی، خط‌کش صفحه، تبدیل به PDF). ⭐ پولی — ۲۱ ابزار پیشرفته (دستیار Tailwind، نمایشگر واکنش‌گرا، پایشگر شبکه، شبیه‌ساز نقشه حرارتی، پرکننده فرم). ═══ 🔒 حریم خصوصی ═══ DevSuite Pro در Chrome شما اجرا می‌شود. بدون telemetry، analytics یا SDK ردیاب. کد، اسکرین‌شات، JSON، regex، token و cookie از دستگاه شما خارج نمی‌شوند. 🚀 جریان کار توسعه خود را ارتقا دهید! نصب DevSuite Pro — تنها toolkit و suite طراحی که نیاز دارید. اگر در زمان شما صرفه‌جویی کرد، با ۵ ستاره حمایت کنید.