حسین احمدی
بنیانگذار توسینسو و برنامه نویس و توسعه دهنده ارشد وب

8 افزونه کاربردی کروم برای طراحان وب که باید بشناسید

اگر شما کار طراحی وب سایت انجام می دهید، به طور حتم تا کنون با ابزارهای مرتبط زیادی در زمینه طراحی وب کار کرده اید. هر یک از این ابزارها به نحوی کار شما را به عنوان طراح وب ساده تر می کنند. مرورگر کروم در طول زمان توانسته جایگاه بسیار مناسبی میان کاربران و همچنین طراحان وب پیدا کند. در این مقاله قصد دارم تا 8 مورد از افزونه یا Extension های کاربردی در زمینه طراحی وب را برای مرورگر کروم خدمت دوستان معرفی کنم. هر یک از این افزونه ها به نحوی به شما در زمینه طراحی وب و بررسی سایت ها کمک خواهند کرد.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
وب سایت توسینسو

1. Window Resizer

شاید یکی از مواردی که طراحان وب با آن زیاد سر و کار دارند، چک کردن وب سایت طراحی شده در سایزهای متفاوت برای بررسی سازگاری با ابزارهای مختلف باشد. این افزونه به شما کمک میکند تا اندازه مرورگر خود را به سایزهای از پیش تعریف شده تغییر داده و سایت خود را در این سایزها چک کنید. این سایزها قابل تعریف و تغییر بوده و همچنین می توانید از تنظیمات این افزونه خروجی گرفته و در سایر کامپیوترها از این تنظیمات استفاده کنید:

وب سایت توسینسو

2. ColorPick Eyedropper

فرض کنید در حال مشاهده یک وب سایت هستید و از رنگ یکی از بخش های این سایت می خواهید در کار خود استفاده کنید. بوسیله این افزونه می توانید به صورت پیکسل به پیکسل اقدام به انتخاب رنگ و مشاهده کد Hex آن کنید:

وب سایت توسینسو

3. Page Ruler

بوسیله افزوهه Page Ruler می توانید سایز المان های مختلف بر روی صفحات وب را مشاهده کنید. با انتخاب این ابزار از نوار بالای مرورگر کروم، با کشیدن یک کادر به دور قسمتی از صفحه که مد نظر شما می باشد، سایز آن قسمت به همراه موقعیت absolute آن بر روی صفحه، در زیر نوار آدرس به شما نمایش داده خواهد شد. همچنین پس از تعیین کادر، امکان جابجایی و تغییر اندازه آن را نیز خواهید داشت. همچنین در صورت فعال بودن حالت Element Mode می توانید با بردن نشان گر موس بر روی المان های صفحه، به صورت خودکار آن قسمت را انتخاب نمایید:

وب سایت توسینسو

4. CSSViewer

فرض کنید صفحه ای را باز کرده و قصد دارید کد CSS مربوط به قسمتی از صفحه را مشاهده کنید. یک راه آن استفاده از قابلیت Developer Tools مرورگر کروم می باشد. اما اگر به دنبال راه ساده تری می گردید این افزونه کار شما را به سرعت راه خواهد انداخت. کافیست در نوار ابزار بالای مرورگر بر روی آیکون CSSViewer کلیک کرده و سپس با بردن نشان گر موس بر روی هر یک از المان های صفحه کد CSS مربوط به آن را مشاهده کنید:

وب سایت توسینسو

5. Form Fuzzer

بوسیله این افزونه، می توانید فرم های صفحات وب سایت خود را با مقادیر مختلف و تصادفی پر کرده و اقدام به تست فرم ها نمایید. این مقادیر می توانند شامل مقادیر پیش بینی نشده، مقادیر ناصحیح و مقادیر تصادفی باشند که به صورت خودکار داخل فیلدهای فرم های صفحات قرار میگیرند. همچنین قابلیت تعریف کردن مقادیر پیش فرض در این افزونه وجود دارد. حتماً زمانی که وب سایتی را طراحی می کنید، فرم های صفحات خود را جهت اطمینان از صحت ورود اطلاعات تست کنید:

وب سایت توسینسو

6. Site Spider

وب سایت شما یا سایتی که شما طراحی کرده اید، ممکن است حاوی لینک های بسیاری باشد. بوسیله این افزونه می توانید لینک های وب سایت مورد نظر را چک کرده تا از صحت کارکرد لینک ها اطمینان حاصل کنید. بوسیله این افزونه، امکان مشخص کردن یک وب سایت یا زیر مجموعه های آن به همراه اعمال فیلترهای مختلف جهت بررسی لینک ها وجود دارد. دقت کنید که عملیات بررسی مبتنی بر دسترسی شما به وب سایت داخل مرورگر و بر اساس کوکی ها انجام خواهد شد.

7. Scraper

با کمک این افزونه می توانید بر روی بخش از صفحه راست کلیک کرده و سپس گزینه Scrape Similar را کلیک کنید، با این کار، پنجره ای باز شده و لیستی از موارد مشابه با ساختار قسمت انتخاب شده در صفحه به صورت یک جدول به شما نمایش داده خواهد شد:

وب سایت توسینسو

8. User-Agent Switcher

زمانی که شما از وب سایتی بازدید می کنید اطلاعاتی از سمت شما با نام User Agent برای سرور ارسال می شود. این اطلاعات شامل پلاتفرم مورد استفاده برای مشاهده وب سایت می باشد. بوسبله این افزونه شما قادر به تغییر User Agent برای مشاهده وب سایت خواهید بود. یکی از کاربردهای این افزونه برای وب سایت های داینامیکی که برای موبایل و دسکتاپ نسخه های جداگانه ای طراحی می کنند می باشد:

وب سایت توسینسو

در این لیست سعی کردم افزونه هایی با بیشترین کاربرد را خدمت دوستان معرفی کنم. افزونه های دیگری نیز وجود دارند مانند EditThisCookie و JSONView که در زمینه مشاهده و ویرایش کوکی ها و فایل های JSON کاربرد دارند. شما از چه ابزارهایی برای انجام طراحی های خود استفاده می کنید؟  توسینسو باشید.


حسین احمدی
حسین احمدی

بنیانگذار توسینسو و برنامه نویس و توسعه دهنده ارشد وب

حسین احمدی ، بنیانگذار TOSINSO ، توسعه دهنده وب و برنامه نویس ، بیش از 12 سال سابقه فعالیت حرفه ای در سطح کلان ، مشاور ، مدیر پروژه و مدرس نهادهای مالی و اعتباری ، تخصص در پلتفرم دات نت و زبان سی شارپ ، طراحی و توسعه وب ، امنیت نرم افزار ، تحلیل سیستم های اطلاعاتی و داده کاوی ...

نظرات