افزونه را به Chrome اضافه کنید
- فروشگاه وب Chrome را باز کنید و افزونه "DevSuite Pro" را جستجو کنید.
- روی "افزودن به Chrome" کلیک کنید و سپس با کلیک روی "افزودن افزونه" در پنجره بازشو تأیید کنید.
64+ ابزار قدرتمند برای بررسی، اندازهگیری، ضبط، تحلیل و طراحی صفحات وب مستقیماً در مرورگر شما.
شروع کار ساده است. افزونه را نصب کنید، هر صفحه وبی را باز کنید و از طریق پنجره بازشو یا داک شناور به 64+ ابزار توسعه دسترسی پیدا کنید. نیازی به پیکربندی نیست.
DevSuite Pro بیش از 64+ ابزار توسعه برای بررسی، اندازهگیری، طراحی و تحلیل صفحات وب ارائه میدهد. جریان کار خود را با ویژگیهای قدرتمندی که مستقیماً در مرورگر شما تعبیه شدهاند، بهبود دهید.
نشانگر ماوس را روی هر عنصری ببرید تا فوراً سبکهای CSS آن را به صورت زنده مشاهده و ویرایش کنید، که اشکالزدایی و تنظیم طرحها را در زمان واقعی آسان میکند.
بیشتر بدانید →روی هر عنصری کلیک کنید تا ویژگیها، ابعاد، فاصلهها، فونتها و رنگهای آن را بررسی کنید. ساختار صفحه را فوراً بدون باز کردن ابزارهای توسعه مرورگر درک کنید.
بیشتر بدانید →فاصلهها را اندازه بگیرید، تراز را بررسی کنید و خطکشها و راهنماهای دقیق پیکسلی را به هر صفحه وب اضافه کنید تا مطمئن شوید طرحهایتان کاملاً تراز هستند.
بیشتر بدانید →رنگها را از هر عنصری در صفحه انتخاب کنید و مقادیر HEX، RGB یا HSL را تنها با یک کلیک در کلیپبورد خود کپی کنید.
بیشتر بدانید →تصاویر صفحه تمام صفحه یا ناحیه قابل مشاهده را از هر صفحه وب بگیرید و فوراً دانلود کنید، مناسب برای اشتراکگذاری طرحها و گزارش اشکالات.
بیشتر بدانید →هر صفحه وبی را در اندازههای مختلف صفحه نمایش و رزولوشنهای دستگاه پیشنمایش کنید تا طراحی واکنشگرا را بدون ترک مرورگر آزمایش کنید.
بیشتر بدانید →بررسی و ویرایش سبکهای CSS در زمان واقعی
ابزار CSS Inspector یک ابزار قدرتمند توسعهدهنده است که به شما امکان میدهد ویژگیهای کامل CSS هر عنصری را تنها با حرکت…
اشکالزدایی و کنترل انیمیشنهای CSS در زمان واقعی
بازرس انیمیشن کنترل کاملی بر هر انیمیشن CSS و transition در حال اجرا در هر صفحه وب به شما میدهد. همه انیمیشنها را…
تبدیل CSS هر عنصر به کلاسهای Tailwind
کپی به عنوان Tailwind شکاف بین طراحی بصری و کد Tailwind CSS را پر میکند.
تجسم ساختار کامل چیدمان هر صفحه
حالت Outline به هر عنصر HTML در یک صفحه وب حاشیه رنگی اضافه میکند و نمای X-ray فوری از ساختار چیدمان صفحه به شما…
دریافت کلاسهای دستهبندیشده Tailwind برای هر عنصر
Tailwind Helper هر عنصر در یک صفحه وب را بررسی میکند و تجزیهوتحلیل جامع و دستهبندیشدهای از کلاسهای utility…
نمای درختی HTML به صورت overlay بصری روی هر صفحه
Page Outliner ساختار کامل DOM هر صفحه وب را به صورت یک overlay درختی بصری رندر میکند — مستقیماً روی خود صفحه. هر عنصر…
شناسایی کامپوننتهای React، Vue، Angular و Svelte در هر سایتی
تشخیصدهنده کامپوننت بهطور خودکار شناسایی میکند که یک وبسایت از کدام framework frontend استفاده میکند و درخت…
Drag & Drop برای تغییر موقعیت هر عنصر در صفحه
جابهجایی عنصر به شما اجازه میدهد روی هر عنصر در یک صفحه وب کلیک کنید و آن را فیزیکی به موقعیت جدیدی بکشید. گزینههای…
حذف یا تغییر نمایش هر عنصر
حذف/پنهان کردن عنصر به شما اجازه میدهد با یک کلیک هر عنصری را در یک صفحه وب حذف یا موقتاً پنهان کنید. صفحات را برای…
صادر کردن هر عنصر به صورت HTML، CSS یا JSON
صادر کردن عنصر به شما اجازه میدهد روی هر عنصری در یک صفحه وب کلیک کنید و ساختار کامل آن را در سه فرمت صادر کنید…
تولید کامپوننتهای React، Vue و Svelte از هر عنصر
کپی کد کامپوننت هر عنصری را در یک صفحه وب به یک فایل کامپوننت تمیز و آماده تولید برای framework انتخابی شما تبدیل…
گرفتن Screenshot از ناحیه مرئی یا کل صفحه
Screenshot از هر صفحه وب در دو حالت تصاویر با کیفیت بالا میگیرد: ناحیه مرئی (دقیقاً آنچه در پنجره مرورگر میبینید) یا…
مشاهده، انتخاب و دانلود همه تصاویر از هر صفحه وب
استخراج تصاویر هر صفحه وب را اسکن کرده و هر تصویر را در یک گالری قابل مرور ارائه میدهد. thumbnail، ابعاد اصلی، اندازه…
یافتن، پیشنمایش و دانلود هر SVG در هر صفحه
SVG Grabber هر SVG در یک صفحه وب را کشف میکند — عناصر SVG inline، ارجاعات فایل .svg خارجی، SVG sprites (الگوهای…
تعویض هر تصویر در یک صفحه با تصویر خودتان
جایگزینکننده تصویر به شما اجازه میدهد روی هر تصویری در یک صفحه وب کلیک کنید و آن را با تصویر خودتان جایگزین کنید — یا…
تولید QR Code برای هر URL یا متن بهصورت فوری
تولیدکننده QR Code یک QR code قابل اسکن برای URL صفحه فعلی بهطور خودکار ایجاد میکند — یا برای هر URL یا متن سفارشی که…
خطکشها، راهنماها و اندازهگیریهای Pixel-Perfect در هر صفحه
خطکش صفحه خطکشهای به سبک Photoshop و خطوط راهنمای قابل کشیدن به هر صفحه وب اضافه میکند. خطکشهای دقیق پیکسلی در…
پیشنمایش همزمان چند viewport دستگاه
نمایشگر واکنشگرا صفحه وب فعلی را در چندین اندازه viewport دستگاه کنار هم نشان میدهد — همه در یک صفحه. ببینید طراحی…
اندازهگیری فاصله دقیق پیکسلی بین هر دو عنصر
اندازهگیری فاصله به شما اجازه میدهد روی هر دو عنصر در یک صفحه وب کلیک کنید و فوراً فاصله دقیق پیکسلی بین آنها را…
تجسم هر Stacking Context و لایه Z-Index
بازرس Z-Index ترتیب چیدمان کامل هر عنصر در یک صفحه وب را آشکار میکند.
بررسی چیدمانهای CSS Grid و Flexbox با Overlay های بصری
تجسمگر Grid/Flex هر container CSS Grid و Flexbox در یک صفحه وب را شناسایی میکند و ساختار چیدمان آنها را به عنوان…
شبیهسازی نقاط داغ توجه کاربر در هر صفحه
شبیهساز نقشه حرارتی یک نقشه حرارتی توجه پیشبینیشده برای هر صفحه وب بر اساس الگوهای تحقیقاتی UX — رفتار خواندن…
پاککردن انتخابی کش، کوکیها، localStorage و sessionStorage
پاککردن دادههای مرور به توسعهدهندگان یک روش سریع و انتخابی برای پاک کردن انواع خاصی از دادههای مرور برای سایت فعلی…
شناسایی هر فناوری پشت هر وبسایت
Site Stack هر وبسایتی را اسکن میکند و پشته فناوری کامل آن را شناسایی میکند — فریمورکهای frontend (React, Vue…
ممیزی جامع SEO: تگهای Meta، عناوین، OpenGraph و بیشتر
بازرس SEO یک ممیزی SEO جامع و فوری از هر صفحه وب ارائه میدهد.
ممیزی WCAG خودکار: کنتراست، Alt Text، ARIA و بیشتر
بازرس دسترسپذیری بررسیهای خودکار WCAG 2.1 سطح AA روی هر صفحه وب انجام میدهد و یک گزارش دستهبندیشده از مشکلات…
روی هر متنی در هر صفحهای کلیک کنید تا فوراً ویرایش کنید
ویرایشگر متن زنده هر عنصر متنی روی یک صفحه وب را با یک کلیک قابل ویرایش میکند. عناوین، پاراگرافها، برچسبهای دکمه،…
جایگزینی هر فونت به صورت کلی یا برای هر عنصر از Google Fonts
تغییردهنده فونت به شما امکان میدهد هر فونت روی یک صفحه وب را با یکی از کتابخانه Google Fonts جایگزین کنید — یا به صورت…
کشف هر فونت استفادهشده در هر صفحه وب
فهرست همه فونتها هر صفحه وب را اسکن میکند و یک فهرست کامل از هر خانواده فونت در استفاده ارائه میدهد — فونتهای وب…
قطرهچکان دقیق برای مقادیر رنگی HEX، RGB و HSL
انتخابگر رنگ یک ابزار قطرهچکان دقیق در سطح پیکسل برای انتخاب رنگ از هر عنصر روی یک صفحه وب ارائه میدهد — متن،…
استخراج پالت رنگ کامل از هر صفحه وب
پالت رنگ هر عنصر روی یک صفحه وب را اسکن میکند و مجموعه کامل رنگهای استفادهشده را استخراج میکند — از متن و…
اعمال حالت تاریک به هر وبسایتی به صورت فوری
اجبار حالت تاریک یک طرح رنگی تاریک را به هر وبسایتی که آن را ارائه نمیدهد اعمال میکند — یا تم روشن یک سایت را نادیده…
فعال یا غیرفعال کردن فوری JavaScript برای هر تب
Toggle JavaScript اجرای JavaScript را برای تب مرورگر فعلی با یک کلیک غیرفعال یا مجدداً فعال میکند. صفحه به طور خودکار…
مشاهده، ویرایش، افزودن و حذف کوکیها برای هر دامنه
ویرایشگر کوکی همه کوکیهای دامنه فعلی را در یک جدول تمیز و قابل مرتبسازی نمایش میدهد. نامهای کوکی، مقادیر، تاریخ…
مشاهده خروجی کنسول در یک پنل شناور — بدون DevTools
ثبتکننده کنسول همه خروجی کنسول (console.log، console.warn، console.error، console.info) را ضبط میکند و در یک پنل…
نظارت بر همه درخواستهای شبکه در زمان واقعی
مانیتور شبکه هر درخواست شبکهای که توسط صفحه فعلی انجام میشود را ضبط و نمایش میدهد — فراخوانیهای XHR/Fetch API،…
مشاهده، ویرایش، افزودن و حذف localStorage و sessionStorage
ویرایشگر Local Storage یک رابط جدول تمیز برای مدیریت ورودیهای localStorage و sessionStorage برای سایت فعلی ارائه…
اسکن هر لینک روی یک صفحه و یافتن لینکهای شکسته
بررسیکننده لینک شکسته هر لینک روی صفحه فعلی را اسکن میکند — hrefهای anchor، منابع تصویر، منابع script و مراجع…
داشبورد عملکرد فوری: زمان بارگذاری، آمار DOM و منابع
عملکرد صفحه یک بررسی اجمالی عملکرد فوری از هر صفحه وب ارائه میدهد — معیارهای زمانبندی (FCP، DOMContentLoaded،…
فرمتبندی، فشردهسازی و اعتبارسنجی JSON با یک کلیک
ابزار JSON Formatter دادههای JSON را مستقیماً در مرورگر شما مرتب، فشرده و اعتبارسنجی میکند. هر رشته JSON را جایگذاری…
تبدیل فوری رشتهها به Base64 و برعکس
ابزار Base64 Encoder/Decoder متن را به Base64 و Base64 را به متن، مستقیماً در مرورگر شما تبدیل میکند. رمزگذاری ایمن…
رمزگذاری و رمزگشایی رشتههای URL با یک کلیک
ابزار URL Encoder/Decoder رشتههای URL را به شکل percent-encoded و بالعکس تبدیل میکند.
رمزگذاری و رمزگشایی فوری Entity های HTML
ابزار HTML Entity Encoder کاراکترهای خاص (< > & " ') را به معادل Entity آنها در HTML (< > & " ') و…
Escape و Unescape رشتهها برای کد
ابزار Backslash Escape/Unescape رشتهها را به فرم escape شده و بالعکس تبدیل میکند (\n \t \r \" \' \\ و escape های…
تبدیل تصاویر به Data URI های Base64 و برعکس
ابزار Image ↔ Base64 فایلهای تصویری (PNG، JPG، SVG، WebP، GIF) را به Data URI های کدگذاریشده با Base64 تبدیل میکند و…
رمزگشایی آنی JSON Web Token ها
JWT Debugger توکنهای JSON Web Token را رمزگشایی و بررسی میکند — هدر، پیلود و امضا را تجزیه کرده، claim ها را نمایش…
تولید انبوه شناسههای UUID نسخه ۴
UUID Generator شناسههای UUID نسخه ۴ رمزنگاریشده و قوی را با استفاده از crypto API مرورگر تولید میکند. یک UUID تکی یا…
محاسبه هشهای MD5، SHA-1، SHA-256، SHA-384 و SHA-512
Hash Generator هشهای رمزنگاری (MD5، SHA-1، SHA-256، SHA-384، SHA-512) هر ورودی متنی را محاسبه میکند. هر پنج الگوریتم…
تولید رمزهای عبور رمزنگاریشده و قوی
Password Generator رمزهای عبور قوی و تصادفی را با استفاده از API تصادفیسازی رمزنگاریشده مرورگر تولید میکند. طول (۸…
تست زنده عبارات باقاعده با هایلایت تطبیقها
ابزار Regex Tester عبارات باقاعده (regular expressions) را در برابر متن آزمایشی بهصورت زنده ارزیابی میکند. تطبیقها…
تبدیل تاریخهای Unix، ISO و قابلخواندن برای انسان
مبدل تایماستمپ بین تایماستمپهای Unix (ثانیه، میلیثانیه، میکروثانیه، نانوثانیه)، ISO 8601، RFC 2822 و فرمتهای…
مقایسه دو بلوک متنی خط به خط
ابزار Diff دو بلوک متنی را مقایسه کرده و خطوط افزودهشده، حذفشده و بدون تغییر را با خروجی رنگی هایلایت میکند. نمای…
بررسی نسبت کنتراست WCAG هر دو رنگ
بررسیکننده کنتراست، نسبت کنتراست WCAG 2.1 بین دو رنگ را محاسبه کرده و آنها را در برابر آستانههای AA/AAA برای متن…
تبدیل آنی HEX، RGB، HSL، HSV و OKLCH
مبدل فرمت رنگ هر رنگی را بین HEX، RGB، HSL، HSV و OKLCH تبدیل میکند.
استخراج پالت غالب از هر تصویری
Image Color Extractor هر فایل تصویری را (با رها کردن، پیست یا کلیک برای بارگذاری) تحلیل میکند و تا 16 رنگ غالب را به…
دریافت CSS Selector و XPath برای هر عنصری
DOM Path Finder به شما اجازه میدهد با نگه داشتن ماوس روی هر عنصر صفحه، CSS selector منحصربهفرد، selector کوتاه، XPath…
تست درخواستهای بینمبدأ و بازرسی هدرهای CORS
CORS Checker بررسی میکند که آیا یک درخواست بینمبدأ از سایت شما توسط سرور مقصد مجاز خواهد بود یا خیر. درخواست…
ثبت فریمهای WebSocket در زمان واقعی
WebSocket Inspector هر فریم WebSocket — ارسالی و دریافتی — را در تمام اتصالات صفحه ثبت میکند. چرخه حیات اتصال…
اسکن فوری صفحه برای تصاویر خراب
Broken Image Finder هر <img> و background-image CSS در صفحه را اسکن میکند، بارگذاریهای خراب (404، شکست CORS، canvas…
پر کردن خودکار فرمها با دادههای تستی واقعی
Form Filler تمام فیلدهای قابل مشاهده فرم روی صفحه را با دادههای تستی واقعی پر میکند — نام، ایمیل، تلفن، آدرس، رمز…
تبدیل بین CSV و JSON در هر دو جهت
مبدل CSV ↔ JSON مسیر رفتوبرگشت کامل بین دو فرمت جدولی رایج را پوشش میدهد.
فرمتدهی، اعتبارسنجی و مشاهده XML با هایلایت سینتکس
XML Formatter کار pretty-print، فشردهسازی و اعتبارسنجی XML را بهصورت درونمرورگری انجام میدهد. تورفتگی قابلتنظیم،…
زیباسازی و فرمتدهی کوئریهای SQL
SQL Formatter کوئریهای SQL فشرده یا بههمریخته را به کوئریهای خوانا و تورفته تبدیل میکند. کلیدواژهها در خطهای…
ذخیره صفحات وب بهصورت PDF تمیز
Convert to PDF صفحه وب فعلی را از طریق دیالوگ پرینت مرورگر و با اعمال سبکهای مناسب چاپ از پیش، بهصورت PDF ذخیره…
برنامهای را انتخاب کنید که با جریان کاری شما مطابقت دارد. رایگان شروع کنید، هر زمان که خواستید ارتقا دهید.
سوالات رایج درباره ویژگیها و نحوه استفاده از افزونه DevSuite Pro. اگر سوالی دارید، ممکن است پاسخ آن در زیر موجود باشد.
به فروشگاه وب Chrome بروید، "DevSuite Pro" را جستجو کنید، روی "افزودن به Chrome" کلیک کنید و با انتخاب "افزودن افزونه" تأیید کنید. پس از نصب، آیکون افزونه در نوار ابزار مرورگر شما ظاهر میشود. روی آن کلیک کنید تا فوراً به 64+ ابزار توسعه دسترسی پیدا کنید.
ابزارهای رایگان (43+) بدون نیاز به مجوز برای همه در دسترس هستند. ابزارهای Pro با نشان طلایی PRO مشخص شدهاند و برای استفاده نیاز به مجوز فعال Pro دارند. از پنجره بازشو میتوانید ببینید کدام ابزارها رایگان یا pro هستند — ابزارهای رایگان آیکون قفل ندارند، در حالی که ابزارهای pro تا زمان فعالسازی مجوز کمی محو نمایش داده میشوند.
برخی وبسایتها سیاستهای امنیت محتوای (CSP) سختگیرانهای دارند که اقدامات خاص افزونههای مرورگر را مسدود میکنند. این امر بهویژه در سایتهای بانکی و دولتی رایج است. همچنین، صفحات داخلی Chrome (chrome://) اجازه اجرای اسکریپتهای محتوا توسط افزونهها را نمیدهند.
خیر. تمام تغییرات ایجاد شده توسط ابزارهایی مانند جابجایی عنصر، ویرایشگر متن زنده، حذف/مخفی کردن عنصر و CSS Inspector موقتی هستند. آنها فقط بر آنچه اکنون در مرورگرتان میبینید تأثیر میگذارند. بارگذاری مجدد صفحه همه چیز را به حالت اصلی باز میگرداند.
پنجره بازشوی DevSuite Pro را باز کنید، روی آیکون تنظیمات در گوشه بالا سمت راست کلیک کنید. به بخش مجوز پایین بروید، کلید مجوز خود را در فیلد ورودی جایگذاری کنید و روی فعالسازی کلیک کنید. اگر کلید معتبر باشد، نشان از FREE به PRO تغییر میکند و تمام ابزارهای pro فوراً باز میشوند.
میتوانید داک را با رفتن به تنظیمات و انتخاب موقعیت نوار کناری متفاوت — بالا، پایین، چپ یا راست — جابجا کنید. همچنین میتوانید داک را کاملاً با خاموش کردن "نمایش داک در صفحات" در تنظیمات مخفی کنید، یا در هر زمانی Ctrl+Shift+X را فشار دهید.
خیر. DevSuite Pro دادههای مرور شما را جمعآوری، ردیابی یا ارسال نمیکند. تمام تنظیمات به صورت محلی در مرورگر شما ذخیره میشوند. تنها درخواست خارجی که انجام میشود هنگام فعالسازی کلید مجوز برای تأیید کلید شما با سرور ماست.
بله! DevSuite Pro هم در فروشگاه وب Chrome و هم در افزونههای Firefox در دسترس است. روی Chrome، Edge، Brave و سایر مرورگرهای مبتنی بر Chromium و همچنین Firefox کار میکند.