افزونههای کروم، ابزارهای کاربردی هستند که میتوانند به بهبود تجربه مرور وب و انجام کارهای مختلف در مرورگر کروم کمک کنند. برنامه نویسان نیز میتوانند از افزونههای کروم برای افزایش بهرهوری و کارایی خود استفاده کنند. در اینجا لیست برخی از بهترین افزونههای کروم برای برنامه نویسان آورده شده است که در ادامه این مقاله از اموزشگاه برنامه نویسی الکامکو می خواهیم آنها را به شما معرفی کنیم:
لیست بهترین افزونه های کروم برای برنامه نویسان
۱- افزونه گوگل کروم برای برنامه نویسی بنام Code Runner:
افزونه کروم Code Runner یکی از بهترین افزونه های کروم برای برنامه نویسان و یک ابزار کاربردی است که به شما امکان میدهد تا کد خود را در مرورگر کروم اجرا کنید. این افزونه، برای توسعهدهندگان مبتدی و پیشرفته مناسب است.
با استفاده از افزونه Code Runner، میتوانید کد خود را در هر زبان برنامه نویسی محبوبی، مانند جاوا، پایتون، جاوا اسکریپت، سی، سی++ و غیره، اجرا کنید. این افزونه، همچنین امکان اجرای کد در IDLE و REPL را نیز فراهم میکند.
افزونه Code Runner، دارای ویژگیهای زیر است:
- امکان اجرای کد در هر زبان برنامه نویسی محبوبی
- امکان اجرای کد در IDLE و REPL
- امکان تنظیم تنظیمات مختلف برای اجرای کد، مانند سرعت اجرای کد، زمان اتمام کد و غیره
- امکان مشاهده خروجی کد در مرورگر
- امکان ذخیره خروجی کد برای استفاده بعدی
برای استفاده از افزونه Code Runner، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید کد خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید و با استفاده از کلیدهای میانبر Ctrl+Alt+R یا Cmd+Alt+R، آن را اجرا کنید.
در اینجا نحوه اجرای کد در افزونه Code Runner آورده شده است:
- کد خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید.
- کلیدهای میانبر Ctrl+Alt+R یا Cmd+Alt+R را فشار دهید.
- افزونه Code Runner، کد شما را اجرا میکند و خروجی آن را در مرورگر نمایش میدهد.
همچنین بخوانید » دوره اموزش Flutter از مبتدی تا پیشرفته برای ساخت اپ های اندروید و ios
۲- افزونه گوگل کروم برای برنامه نویسی بنام LiveReload
افزونه Chrome LiveReload یکی از افزونه های کروم برای برنامه نویسان است که به شما امکان میدهد تا تغییرات کد خود را به صورت زنده در مرورگر مشاهده کنید. این افزونه، برای توسعهدهندگان وب مناسب است.
با استفاده از افزونه LiveReload، میتوانید تغییرات کد خود را در هر زبان برنامه نویسی محبوبی، مانند HTML، CSS، جاوا اسکریپت و غیره، مشاهده کنید. این افزونه، همچنین امکان مشاهده تغییرات در تصاویر، فایلهای CSS و جاوا اسکریپت خارجی را نیز فراهم میکند.
افزونه LiveReload، دارای ویژگیهای زیر است:
- امکان مشاهده تغییرات کد به صورت زنده در مرورگر
- امکان مشاهده تغییرات در هر زبان برنامه نویسی محبوبی
- امکان مشاهده تغییرات در تصاویر، فایلهای CSS و جاوا اسکریپت خارجی
- امکان تنظیم تنظیمات مختلف برای LiveReload، مانند سرعت رفرش، زمان اتمام رفرش و غیره
برای استفاده از افزونه LiveReload، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید کد خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید و تغییرات را انجام دهید. هنگامی که تغییرات را انجام دادید، افزونه LiveReload، تغییرات را در مرورگر رفرش میکند.
در اینجا نحوه استفاده از افزونه LiveReload آورده شده است:
- افزونه LiveReload را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- کد خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید.
- تغییرات را در کد خود انجام دهید.
- افزونه LiveReload، تغییرات را در مرورگر رفرش میکند.
۳- افزونه گوگل کروم برای برنامه نویسی بنام Octotree
افزونه Octotree، یکی از بهترین افزونه های کروم برای برنامه نویسان برای مرورگر کروم است که به شما امکان میدهد تا یک درخت ساختار فایل را در سمت چپ مرورگر مشاهده کنید. این افزونه، برای توسعهدهندگان وب و برنامهنویسان مبتنی بر متن مناسب است.
با استفاده از افزونه Octotree، میتوانید به راحتی به فایلها و پوشههای پروژه خود دسترسی داشته باشید. این افزونه، همچنین امکان پیمایش در پروژه، جستجو در فایلها و پوشهها و مشاهده تغییرات فایلها را نیز فراهم میکند.
افزونه Octotree، دارای ویژگیهای زیر است:
- نمایش درخت ساختار فایل در سمت چپ مرورگر
- امکان پیمایش در پروژه با استفاده از موس یا کلیدهای میانبر
- امکان جستجو در فایلها و پوشهها
- امکان مشاهده تغییرات فایلها
- امکان سفارشیسازی ظاهر و عملکرد افزونه
برای استفاده از افزونه Octotree، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای مشاهده درخت ساختار فایل پروژه خود استفاده کنید.
در اینجا نحوه استفاده از افزونه Octotree آورده شده است:
- افزونه Octotree را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- به صفحه وب مربوط به پروژه خود در مرورگر کروم بروید.
- افزونه Octotree، درخت ساختار فایل پروژه را در سمت چپ مرورگر نمایش میدهد.
همچنین بخوانید» آموزش اندروید استودیو پروژه محور | اموزش نصب اندروید استودیو | برنامه اندروید استودیو
۴- افزونه گوگل کروم برای برنامه نویسی بنام Auto Close Tag
افزونه Auto Close Tag، یکی از بهترین افزونه های کروم برای برنامه نویسان است که به شما امکان میدهد تا به صورت خودکار برچسبهای باز را با برچسبهای بسته مطابقت دهید. این افزونه، برای توسعهدهندگان وب مناسب است.
با استفاده از افزونه Auto Close Tag، میتوانید سرعت کدنویسی خود را افزایش دهید و از اشتباهات احتمالی جلوگیری کنید. این افزونه، برچسبهای باز را به صورت خودکار با برچسبهای بسته مطابقت میدهد، بنابراین دیگر نیازی به تایپ دستی برچسبهای بسته ندارید.
افزونه Auto Close Tag، دارای ویژگیهای زیر است:
- خودکارسازی تایپ برچسبهای بسته
- امکان تنظیم تنظیمات مختلف برای افزونه، مانند زبانهای پشتیبانی شده، برچسبهای مجاز و غیره
برای استفاده از افزونه Auto Close Tag، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای خودکارسازی تایپ برچسبهای بسته در کد HTML یا XML خود استفاده کنید.
در اینجا نحوه استفاده از افزونه Auto Close Tag آورده شده است:
- افزونه Auto Close Tag را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- کد HTML یا XML خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید.
- افزونه Auto Close Tag، برچسبهای باز را به صورت خودکار با برچسبهای بسته مطابقت میدهد.
همچنین ببینید» ثبت نام در دوره های آموزش برنامه نویسی را با الکامکو تجربه کنید.
۵- افزونه کروم برای برنامه نویسی بنام Bracket Pair Colorizer
افزونه Bracket Pair Colorizer، یکی از بهترین افزونه های کروم برای برنامه نویسان است که به شما امکان میدهد تا جفتهای براکت را در کد با رنگهای مختلف مشخص کنید. این افزونه، برای توسعهدهندگان مبتنی بر متن مناسب است.
با استفاده از افزونه Bracket Pair Colorizer، میتوانید به راحتی جفتهای براکت را در کد خود شناسایی کنید. این افزونه، براکتهای باز را با یک رنگ و براکتهای بسته را با رنگ دیگری مشخص میکند. همچنین، میتوانید رنگهای مختلف را برای هر نوع براکت تنظیم کنید.
افزونه Bracket Pair Colorizer، دارای ویژگیهای زیر است:
- مشخص کردن جفتهای براکت با رنگهای مختلف
- امکان تنظیم رنگهای مختلف برای هر نوع براکت
- امکان سفارشیسازی ظاهر و عملکرد افزونه
برای استفاده از افزونه Bracket Pair Colorizer، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای مشخص کردن جفتهای براکت در کد خود استفاده کنید.
در اینجا نحوه استفاده از افزونه Bracket Pair Colorizer آورده شده است:
- افزونه Bracket Pair Colorizer را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- کد خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید.
- افزونه Bracket Pair Colorizer، جفتهای براکت را با رنگهای مختلف مشخص میکند.
۶- افزونه کروم برای برنامه نویسی بنام Code Spell Checker
افزونه Code Spell Checker، از افزونه های گوگل کروم برای برنامه نویسان است که به شما امکان میدهد تا املای کلمات در کد را بررسی کنید. این افزونه، برای توسعهدهندگان مبتدی و پیشرفته مناسب است.
با استفاده از افزونه Code Spell Checker، میتوانید از اشتباهات املایی در کد خود جلوگیری کنید. این افزونه، املای کلمات را در کد شما بررسی میکند و در صورت وجود مشکل، آن را به شما اطلاع میدهد.
افزونه Code Spell Checker، دارای ویژگیهای زیر است:
- بررسی املای کلمات در کد
- امکان تنظیم زبانهای پشتیبانی شده
- امکان تنظیم تنظیمات مختلف برای افزونه، مانند حساسیت به حروف بزرگ و کوچک و غیره
برای استفاده از افزونه Code Spell Checker، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای بررسی املای کلمات در کد خود استفاده کنید.
در اینجا نحوه استفاده از افزونه Code Spell Checker آورده شده است:
- افزونه Code Spell Checker را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- کد خود را در یک ویرایشگر متن در مرورگر کروم وارد کنید.
- افزونه Code Spell Checker، املای کلمات را در کد شما بررسی میکند و در صورت وجود مشکل، آن را به شما اطلاع میدهد.
برخی از مزایای استفاده از افزونه Code Spell Checker عبارتند از:
- افزایش کیفیت کد
- جلوگیری از اشتباهات املایی
- خواناتر کردن کد
در اینجا چند نکته برای استفاده از افزونه Code Spell Checker آورده شده است:
- میتوانید زبانهای پشتیبانی شده افزونه را تنظیم کنید تا کلمات را با دقت بیشتری بررسی کند.
- میتوانید تنظیمات مختلف افزونه را تنظیم کنید تا عملکرد آن را مطابق با نیاز خود تغییر دهید.
- میتوانید از افزونه Code Spell Checker در سایر ویرایشگرهای متن نیز استفاده کنید.
۷- افزونه کروم برای برنامه نویسی بنام ColorZilla
افزونه ColorZilla یک افزونه مرورگر رایگان و منبع باز است که برای توسعهدهندگان وب و طراحان گرافیک طراحی شده است. این افزونه مجموعهای از ابزارها را ارائه میدهد که به شما امکان میدهد رنگها را در مرورگر خود انتخاب کنید، کد رنگی تولید کنید و از رنگها در پروژههای خود استفاده کنید.
برخی از ویژگیهای اصلی افزونه ColorZilla عبارتند از:
- ابزار انتخاب رنگ: این ابزار به شما امکان میدهد تا رنگها را از هر نقطه در مرورگر خود انتخاب کنید.
- پالت رنگ: این پالت به شما امکان میدهد تا رنگها را از یک طیف گسترده از گزینهها انتخاب کنید.
- ابزار رنگآمیزی: این ابزار به شما امکان میدهد تا رنگها را به عناصر HTML یا CSS در مرورگر خود اعمال کنید.
- ابزار کد رنگی: این ابزار به شما امکان میدهد تا کد رنگی را برای هر رنگی تولید کنید.
۸- افزونه کروم برای برنامه نویسی بنام Debugger for Chrome
افزونه Debugger for Chrome یک افزونه مرورگر رایگان و منبع باز است که برای توسعهدهندگان وب طراحی شده است. این افزونه به شما امکان میدهد تا کد JavaScript خود را در مرورگر Chrome خود عیبیابی کنید.
افزونه Debugger for Chrome دارای ویژگیهای زیر است:
- ایجاد نقاط توقف: میتوانید نقاط توقف را در کد خود ایجاد کنید تا اجرای کد در آن نقطه متوقف شود.
- گامبهگام: میتوانید کد خود را به صورت گامبهگام اجرا کنید تا بتوانید رفتار آن را در هر مرحله مشاهده کنید.
- تغییر مقادیر متغیرها: میتوانید مقادیر متغیرها را در حین اجرای کد تغییر دهید.
- بررسی اشکالات: میتوانید اشکالات را در کد خود پیدا کنید و آنها را برطرف کنید.
برای استفاده از افزونه Debugger for Chrome، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای عیبیابی کد JavaScript خود استفاده کنید.
در اینجا نحوه استفاده از افزونه Debugger for Chrome آورده شده است:
- افزونه Debugger for Chrome را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- کد JavaScript خود را در یک ویرایشگر متن در مرورگر Chrome وارد کنید.
- افزونه Debugger for Chrome را فعال کنید.
- نقطه توقف را در کد خود ایجاد کنید.
- کد خود را اجرا کنید.
- اجرای کد در نقطه توقف متوقف میشود.
- میتوانید کد خود را به صورت گامبهگام اجرا کنید، مقادیر متغیرها را تغییر دهید و اشکالات را پیدا کنید.
در اینجا چند نکته برای استفاده از افزونه Debugger for Chrome آورده شده است:
- میتوانید از کلیدهای میانبر برای کنترل افزونه Debugger for Chrome استفاده کنید.
- میتوانید تنظیمات افزونه Debugger for Chrome را مطابق با نیاز خود تغییر دهید.
- میتوانید از افزونه Debugger for Chrome برای عیبیابی کد JavaScript در پروژههای خود استفاده کنید.
۹- افزونه های کروم برای برنامه نویسی بنام JSON Viewer
افزونه JSON Viewer یک افزونه مرورگر رایگان و منبع باز است که برای توسعهدهندگان وب و برنامهنویسان طراحی شده است. این افزونه به شما امکان میدهد تا JSON را در مرورگر خود مشاهده و ویرایش کنید.
افزونه JSON Viewer دارای ویژگیهای زیر است:
- نمایش JSON به صورت درختی: این افزونه JSON را به صورت درختی نمایش میدهد که خواندن و درک آن را آسانتر میکند.
- ویرایش JSON: این افزونه به شما امکان میدهد تا JSON را در مرورگر خود ویرایش کنید.
- تبدیل JSON به فرمتهای دیگر: این افزونه میتواند JSON را به فرمتهای دیگر، مانند XML، YAML و CSV تبدیل کند.
برای استفاده از افزونه JSON Viewer، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای مشاهده و ویرایش JSON در مرورگر Chrome خود استفاده کنید.
در اینجا نحوه استفاده از افزونه JSON Viewer آورده شده است:
- افزونه JSON Viewer را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- به صفحه وب مربوط به JSON مورد نظر خود در مرورگر Chrome بروید.
- افزونه JSON Viewer JSON را به صورت درختی نمایش میدهد.
- میتوانید JSON را ویرایش کنید و تغییرات را ذخیره کنید.
- افزونه JSON Viewer JSON را به فرمتهای دیگر تبدیل میکند.
در اینجا چند نکته برای استفاده از افزونه JSON Viewer آورده شده است:
- میتوانید از کلیدهای میانبر برای کنترل افزونه JSON Viewer استفاده کنید.
- میتوانید تنظیمات افزونه JSON Viewer را مطابق با نیاز خود تغییر دهید.
- میتوانید از افزونه JSON Viewer برای مشاهده و ویرایش JSON در پروژههای خود استفاده کنید.
در اینجا چند نمونه از نحوه استفاده از افزونه JSON Viewer آورده شده است:
- میتوانید از افزونه JSON Viewer برای مشاهده دادههای JSON که از یک API دریافت میکنید استفاده کنید.
- میتوانید از افزونه JSON Viewer برای ویرایش تنظیمات JSON در یک وبسایت استفاده کنید.
- میتوانید از افزونه JSON Viewer برای تبدیل JSON به فرمتهای دیگر استفاده کنید تا بتوانید آن را در سایر برنامهها و ابزارها استفاده کنید.
۱۰- افزونه های گوگل کروم برای برنامه نویسی بنام GitLens
افزونه GitLens یک افزونه ویرایشگر کد قدرتمند برای Visual Studio Code است که به شما امکان میدهد تا سابقه گیت را در کد خود تجسم کنید. این افزونه، با ارائه طیف وسیعی از ویژگیها، میتواند به شما در کار با گیت کمک کند.
برخی از ویژگیهای اصلی افزونه GitLens عبارتند از:
- تجسم سابقه گیت: این افزونه به شما امکان میدهد تا سابقه گیت را در کد خود تجسم کنید.
- جستجوی سابقه گیت: این افزونه به شما امکان میدهد تا در سابقه گیت جستجو کنید.
- مقایسه تغییرات: این افزونه به شما امکان میدهد تا تغییرات بین نسخههای مختلف کد را مقایسه کنید.
- بررسی تغییرات: این افزونه به شما امکان میدهد تا تغییرات بین نسخههای مختلف کد را بررسی کنید.
- تیمسازی: این افزونه به شما امکان میدهد تا با تیم خود در مورد تغییرات گیت همکاری کنید.
افزونه GitLens یک ابزار ضروری برای توسعهدهندگانی است که از گیت استفاده میکنند. این افزونه، میتواند به شما در کار با گیت کمک کند و بهرهوری شما را افزایش دهد.
در اینجا نحوه استفاده از افزونه GitLens آورده شده است:
- افزونه GitLens را از فروشگاه Visual Studio Marketplace دانلود و نصب کنید.
- Visual Studio Code را راهاندازی کنید.
- کد خود را در Visual Studio Code باز کنید.
- افزونه GitLens، سابقه گیت را در کد شما تجسم میکند.
برای استفاده از ویژگیهای دیگر افزونه GitLens، میتوانید از کلیدهای میانبر یا منوی گزینهها استفاده کنید.
در اینجا چند نمونه از نحوه استفاده از افزونه GitLens آورده شده است:
- میتوانید از افزونه GitLens برای بررسی تغییراتی که در کد خود ایجاد کردهاید استفاده کنید.
- میتوانید از افزونه GitLens برای مقایسه تغییرات بین نسخههای مختلف کد استفاده کنید.
- میتوانید از افزونه GitLens برای همکاری با تیم خود در مورد تغییرات گیت استفاده کنید.
افزونه GitLens یک ابزار قدرتمند و همهجانبه است که میتواند به شما در کار با گیت کمک کند.
۱۱- از افزونه های کروم برای برنامه نویسی بنام Postman
افزونه Postman یک افزونه مرورگر رایگان و منبع باز است که برای توسعهدهندگان وب و برنامهنویسان طراحی شده است. این افزونه به شما امکان میدهد تا درخواستهای HTTP را به APIها ارسال و دریافت کنید.
افزونه Postman دارای ویژگیهای زیر است:
- ارسال و دریافت درخواستهای HTTP: این افزونه به شما امکان میدهد تا درخواستهای HTTP را به APIها ارسال و دریافت کنید.
- ذخیره و سازماندهی درخواستها: این افزونه به شما امکان میدهد تا درخواستهای خود را ذخیره و سازماندهی کنید.
- به اشتراکگذاری درخواستها: این افزونه به شما امکان میدهد تا درخواستهای خود را با دیگران به اشتراک بگذارید.
- تست و مستندسازی APIها: این افزونه به شما امکان میدهد تا APIها را تست و مستند کنید.
برای استفاده از افزونه Postman، ابتدا باید آن را از فروشگاه Chrome Extensions دانلود و نصب کنید. سپس، میتوانید از آن برای ارسال و دریافت درخواستهای HTTP به APIها استفاده کنید.
در اینجا نحوه استفاده از افزونه Postman آورده شده است:
- افزونه Postman را از فروشگاه Chrome Extensions دانلود و نصب کنید.
- مرورگر Chrome خود را راهاندازی کنید.
- به صفحه وب مورد نظر خود در مرورگر Chrome بروید.
- افزونه Postman، درخواستهای HTTP را به صفحه وب ارسال میکند.
در اینجا چند نمونه از نحوه استفاده از افزونه Postman آورده شده است:
- میتوانید از افزونه Postman برای تست APIهای RESTful استفاده کنید.
- میتوانید از افزونه Postman برای مستندسازی APIهای RESTful استفاده کنید.
- میتوانید از افزونه Postman برای همکاری با دیگران در توسعه APIها استفاده کنید.
افزونه Postman یک ابزار قدرتمند و همهجانبه است که میتواند به شما در توسعه و تست APIها کمک کند.
در اینجا برخی از ویژگیهای پیشرفته افزونه Postman آورده شده است:
- پارامتری کردن درخواستها: این ویژگی به شما امکان میدهد تا درخواستهای خود را با استفاده از متغیرها پارامتری کنید.
- استفاده از ضمیمهها: این ویژگی به شما امکان میدهد تا ضمیمههایی مانند فایلها را به درخواستهای خود اضافه کنید.
- استفاده از اعتبارسنجی: این ویژگی به شما امکان میدهد تا درخواستهای خود را از نظر اعتبارسنجی بررسی کنید.
- استفاده از ردیابی: این ویژگی به شما امکان میدهد تا ردیابی درخواستهای خود را مشاهده کنید.
با استفاده از این ویژگیهای پیشرفته، میتوانید درخواستهای خود را سفارشیسازی کرده و کنترل بیشتری بر آنها داشته باشید.
۱۲- از افزونه های گوگل کروم برای برنامه نویسان بنام Xray for CSS
افزونه Xray for CSS یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا CSS یک صفحه وب را بهتر درک کنید. این افزونه با ارائه اطلاعات مفیدی در مورد عناصر CSS، مانند کلاس ها، سبک ها، و ویژگی های CSS، به شما کمک می کند تا مشکلات CSS را شناسایی و حل کنید.
برخی از ویژگی های افزونه Xray for CSS عبارتند از:
- نمایش کلاس ها، سبک ها، و ویژگی های CSS برای هر عنصر
- نمایش منبع CSS برای هر عنصر
- امکان جستجو و فیلتر کردن CSS
- امکان نمایش CSS در حالت درختی یا سطری
برای استفاده از افزونه Xray for CSS، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و صفحه وب مورد نظر خود را باز کنید. افزونه به طور خودکار شروع به نمایش اطلاعات CSS برای هر عنصر در صفحه می کند.
برای مشاهده اطلاعات CSS برای یک عنصر خاص، روی آن کلیک کنید. افزونه اطلاعات CSS برای آن عنصر را در یک پنجره جداگانه نمایش می دهد.
برای مشاهده منبع CSS برای یک عنصر خاص، روی دکمه “Source” در پنجره اطلاعات CSS کلیک کنید. افزونه منبع CSS برای آن عنصر را در یک پنجره جداگانه نمایش می دهد.
برای جستجو و فیلتر کردن CSS، از نوار جستجو در بالای پنجره اطلاعات CSS استفاده کنید.
برای نمایش CSS در حالت درختی یا سطری، روی دکمه “Tree” یا “List” در پنجره اطلاعات CSS کلیک کنید.
در اینجا چند نمونه از نحوه استفاده از افزونه Xray for CSS آورده شده است:
- برای شناسایی کلاس ها یا سبک های استفاده نشده، از نوار جستجو برای جستجوی کلاس ها یا سبک های خاص استفاده کنید.
- برای شناسایی مشکلات CSS، از ویژگی های CSS برای بررسی عناصر صفحه استفاده کنید.
- برای یادگیری نحوه کار CSS، از اطلاعات CSS برای هر عنصر استفاده کنید.
افزونه Xray for CSS یک ابزار مفید برای توسعه دهندگان وب است که به شما کمک می کند تا CSS را بهتر درک کنید و مشکلات CSS را شناسایی و حل کنید.
۱۳- از افزونه های گوگل کروم برای برنامه نویسان بنام Wappalyzer
افزونه Wappalyzer یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا تکنولوژی های مورد استفاده در یک وب سایت را شناسایی کنید. این افزونه با بررسی منابع HTML و JavaScript یک وب سایت، اطلاعات مفیدی در مورد تکنولوژی های مورد استفاده در آن ارائه می دهد.
برخی از اطلاعاتی که افزونه Wappalyzer ارائه می دهد عبارتند از:
- سیستم مدیریت محتوا (CMS)
- پلتفرم تجارت الکترونیکی (eCommerce)
- چارچوب وب (web framework)
- نرم افزار سرور
- کتابخانه های جاوا اسکریپت (JavaScript libraries)
- ابزارهای تجزیه و تحلیل (analytics tools)
- ابزارهای بازاریابی (marketing tools)
- پردازنده های پرداخت (payment processors)
- نرم افزار مدیریت ارتباط با مشتری (CRM)
- شبکه تحویل محتوا (CDN)
برای استفاده از افزونه Wappalyzer، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و صفحه وب مورد نظر خود را باز کنید. افزونه به طور خودکار شروع به شناسایی تکنولوژی های مورد استفاده در صفحه می کند.
برای مشاهده اطلاعات تکنولوژی های مورد استفاده در یک صفحه، روی آیکون افزونه در نوار ابزار مرورگر خود کلیک کنید. افزونه یک پنجره جداگانه را باز می کند که اطلاعات تکنولوژی های مورد استفاده در صفحه را نمایش می دهد.
در اینجا چند نمونه از نحوه استفاده از افزونه Wappalyzer آورده شده است:
- برای شناسایی سیستم مدیریت محتوای یک وب سایت، از لیست CMS ها در پنجره اطلاعات Wappalyzer استفاده کنید.
- برای شناسایی پلتفرم تجارت الکترونیکی یک وب سایت، از لیست پلتفرم های تجارت الکترونیکی در پنجره اطلاعات Wappalyzer استفاده کنید.
- برای شناسایی چارچوب وب یک وب سایت، از لیست چارچوب های وب در پنجره اطلاعات Wappalyzer استفاده کنید.
افزونه Wappalyzer یک ابزار مفید برای توسعه دهندگان وب، بازاریابان، و سایر افراد علاقه مند به یادگیری در مورد تکنولوژی های مورد استفاده در وب سایت ها است.
۱۴- از افزونه های گوگل کروم برای برنامه نویسان بنام Window Resizer
افزونه Window Resizer یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا اندازه پنجره مرورگر خود را به سرعت و به راحتی تغییر دهید. این افزونه با ارائه یک نوار ابزار در نوار ابزار مرورگر شما، به شما امکان می دهد تا اندازه پنجره مرورگر خود را به صورت دستی یا با استفاده از پیش فرض ها تنظیم کنید.
برخی از ویژگی های افزونه Window Resizer عبارتند از:
- امکان تنظیم اندازه پنجره مرورگر به صورت دستی
- امکان تنظیم اندازه پنجره مرورگر با استفاده از پیش فرض ها
- امکان ذخیره تنظیمات اندازه پنجره مرورگر
- امکان اشتراک گذاری تنظیمات اندازه پنجره مرورگر با دیگران
برای استفاده از افزونه Window Resizer، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و افزونه را فعال کنید.
برای تغییر اندازه پنجره مرورگر به صورت دستی، از نوار ابزار افزونه استفاده کنید. نوار ابزار افزونه شامل سه دکمه برای تنظیم اندازه پنجره مرورگر است:
- دکمه “+” برای افزایش اندازه پنجره مرورگر
- دکمه “-” برای کاهش اندازه پنجره مرورگر
- دکمه “۱۰۰%” برای تنظیم اندازه پنجره مرورگر به اندازه ۱۰۰%
برای تنظیم اندازه پنجره مرورگر با استفاده از پیش فرض ها، روی دکمه “Settings” در نوار ابزار افزونه کلیک کنید. افزونه یک پنجره تنظیمات باز می کند که در آن می توانید اندازه پنجره مرورگر را برای حالت های مختلف تنظیم کنید.
برای ذخیره تنظیمات اندازه پنجره مرورگر، روی دکمه “Save” در پنجره تنظیمات کلیک کنید.
برای اشتراک گذاری تنظیمات اندازه پنجره مرورگر با دیگران، روی دکمه “Share” در پنجره تنظیمات کلیک کنید. افزونه یک پیوند به تنظیمات اندازه پنجره مرورگر شما ایجاد می کند که می توانید آن را با دیگران به اشتراک بگذارید.
در اینجا چند نمونه از نحوه استفاده از افزونه Window Resizer آورده شده است:
- برای تست نحوه نمایش یک وب سایت در اندازه های مختلف، از نوار ابزار افزونه برای تغییر اندازه پنجره مرورگر استفاده کنید.
- برای تنظیم اندازه پنجره مرورگر برای استفاده راحت تر، از پیش فرض های افزونه استفاده کنید.
- برای اشتراک گذاری تنظیمات اندازه پنجره مرورگر خود با دیگران، از دکمه “Share” استفاده کنید.
افزونه Window Resizer یک ابزار مفید برای توسعه دهندگان وب، طراحان، و سایر افراد علاقه مند به آزمایش نحوه نمایش وب سایت ها در اندازه های مختلف است.
۱۵- از افزونه های گوگل کروم برای برنامه نویسان بنام Java Script and CSS Code Beautifier
افزونه Java Script and CSS Code Beautifier یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا کد JavaScript و CSS خود را به راحتی زیبا کنید. این افزونه با ارائه یک رابط کاربری ساده و کاربرپسند، به شما امکان می دهد تا کد خود را قالب بندی و خوانایی آن را افزایش دهید.
برخی از ویژگی های افزونه Java Script and CSS Code Beautifier عبارتند از:
- قالب بندی کد JavaScript و CSS
- افزودن تب و تورفتگی به کد
- حذف فضای خالی و خطوط اضافی
- مرتب سازی کد به صورت الفبایی
- امکان پیش نمایش کد زیبا شده
- امکان ذخیره کد زیبا شده در یک فایل جدید
- پشتیبانی از بیش از ۵۰ تم مختلف برای برجسته سازی دستورات شما
- امکان رفع ابهام فایل های جاوا اسکریپت شما
برای استفاده از افزونه Java Script and CSS Code Beautifier، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و کد JavaScript یا CSS خود را در ویرایشگر کد باز کنید.
برای زیبا کردن کد خود، روی دکمه “Beautify” در نوار ابزار افزونه کلیک کنید. افزونه کد شما را قالب بندی می کند و خوانایی آن را افزایش می دهد.
برای پیش نمایش کد زیبا شده، روی دکمه “Preview” در نوار ابزار افزونه کلیک کنید. افزونه کد زیبا شده را در یک پنجره جدید نمایش می دهد.
برای ذخیره کد زیبا شده در یک فایل جدید، روی دکمه “Save” در نوار ابزار افزونه کلیک کنید. افزونه یک پنجره ذخیره سازی باز می کند که در آن می توانید نام و مکان فایل جدید را مشخص کنید.
در اینجا چند نمونه از نحوه استفاده از افزونه Java Script and CSS Code Beautifier آورده شده است:
- برای زیبا کردن کد JavaScript یا CSS موجود، کد خود را در ویرایشگر کد باز کنید و روی دکمه “Beautify” کلیک کنید.
- برای زیبا کردن کد JavaScript یا CSS جدید، کد خود را در ویرایشگر کد تایپ کنید و روی دکمه “Beautify” کلیک کنید.
- برای پیش نمایش کد زیبا شده قبل از ذخیره آن، روی دکمه “Preview” کلیک کنید.
- برای ذخیره کد زیبا شده در یک فایل جدید، روی دکمه “Save” کلیک کنید.
افزونه Java Script and CSS Code Beautifier یک ابزار مفید برای توسعه دهندگان وب است که به آنها کمک می کند تا کد JavaScript و CSS خود را زیبا کنند و خوانایی آن را افزایش دهند. این افزونه همچنین می تواند به شما کمک کند تا مشکلات کد خود را شناسایی و رفع کنید.
۱۶- افزونه کروم VeePN به عنوان فیلتر شکن مرورگر کروم:
افزونه VeePN یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا به صورت ایمن و ناشناس به وب دسترسی داشته باشید. این افزونه با اتصال شما به یکی از سرورهای VeePN در سراسر جهان، آدرس IP واقعی شما را پنهان می کند و ترافیک اینترنت شما را رمزگذاری می کند.
برخی از ویژگی های افزونه VeePN عبارتند از:
- اتصال ایمن و ناشناس به وب
- رمزگذاری ترافیک اینترنت شما
- دسترسی به محتوای مسدود شده
- سرعت بالا
- استفاده آسان
برای استفاده از افزونه VeePN، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و افزونه را فعال کنید.
برای اتصال به یک سرور VeePN، روی دکمه “Connect” در نوار ابزار افزونه کلیک کنید. افزونه به طور خودکار به نزدیکترین سرور VeePN متصل می شود.
برای انتخاب یک سرور VeePN خاص، روی دکمه “Servers” در نوار ابزار افزونه کلیک کنید. افزونه یک لیست از سرورهای VeePN در سراسر جهان را نمایش می دهد.
برای دسترسی به محتوای مسدود شده، کشور مورد نظر خود را در لیست سرورهای VeePN انتخاب کنید. افزونه آدرس IP شما را به آدرس IP کشور انتخاب شده تغییر می دهد و به شما امکان می دهد تا به محتوای مسدود شده دسترسی داشته باشید.
در اینجا چند نمونه از نحوه استفاده از افزونه VeePN آورده شده است:
- برای اتصال ایمن و ناشناس به وب، روی دکمه “Connect” در نوار ابزار افزونه کلیک کنید.
- برای رمزگذاری ترافیک اینترنت خود، روی دکمه “Connect” در نوار ابزار افزونه کلیک کنید.
- برای دسترسی به محتوای مسدود شده، کشور مورد نظر خود را در لیست سرورهای VeePN انتخاب کنید و روی دکمه “Connect” کلیک کنید.
افزونه VeePN یک ابزار مفید برای افرادی است که می خواهند به صورت ایمن و ناشناس به وب دسترسی داشته باشند. این افزونه همچنین می تواند برای دسترسی به محتوای مسدود شده استفاده شود.
در اینجا برخی از مزایای استفاده از افزونه VeePN آورده شده است:
- امنیت: VeePN با رمزگذاری ترافیک اینترنت شما، امنیت شما را در هنگام مرور وب تضمین می کند.
- ناشناس بودن: VeePN آدرس IP واقعی شما را پنهان می کند، بنابراین فعالیت های آنلاین شما قابل ردیابی نیست.
- دسترسی به محتوای مسدود شده: VeePN به شما امکان می دهد تا به محتوای مسدود شده در مناطق مختلف جهان دسترسی داشته باشید.
- سرعت: VeePN از فناوری رمزگذاری پیشرفته استفاده می کند که بر سرعت مرور شما تأثیر نمی گذارد.
- استفاده آسان: VeePN استفاده از آن آسان است و نیازی به دانش فنی ندارد.
در اینجا برخی از معایب استفاده از افزونه VeePN آورده شده است:
- رایگان نیست: نسخه رایگان VeePN محدودیت هایی دارد، مانند سرعت محدود و تعداد محدود سرور.
- ممکن است با برخی از وب سایت ها و برنامه ها سازگار نباشد.
در کل، افزونه VeePN یک ابزار مفید برای افرادی است که می خواهند به صورت ایمن و ناشناس به وب دسترسی داشته باشند. این افزونه با استفاده از فناوری رمزگذاری پیشرفته، امنیت و ناشناس بودن شما را در هنگام مرور وب تضمین می کند.
۱۷- افزونۀ WhatFont برای کروم:
افزونۀ WhatFont یک افزونۀ رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا فونت های استفاده شده در یک صفحه وب را شناسایی کنید. این افزونه با استفاده از یک الگوریتم شناسایی فونت، به شما امکان می دهد تا نام فونت، اندازه فونت، و سایر ویژگی های فونت را شناسایی کنید.
برای استفاده از افزونۀ WhatFont، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و صفحه وب مورد نظر خود را باز کنید.
برای شناسایی فونت ها، روی متنی که می خواهید فونت آن را شناسایی کنید، کلیک کنید. افزونه نام فونت، اندازه فونت، و سایر ویژگی های فونت را در یک پنجره جداگانه نمایش می دهد.
در اینجا چند نمونه از نحوه استفاده از افزونۀ WhatFont آورده شده است:
- برای شناسایی فونت یک عنوان، روی عنوان کلیک کنید.
- برای شناسایی فونت یک متن، روی متن کلیک کنید.
- برای شناسایی فونت یک تصویر، روی تصویر کلیک کنید.
افزونۀ WhatFont یک ابزار مفید برای طراحان، توسعه دهندگان وب، و سایر افرادی است که علاقه مند به یادگیری در مورد فونت های استفاده شده در وب سایت ها هستند.
در اینجا برخی از ویژگی های افزونۀ WhatFont آورده شده است:
- شناسایی فونت های استفاده شده در یک صفحه وب
- نمایش نام فونت، اندازه فونت، و سایر ویژگی های فونت
- پشتیبانی از بیش از ۱۰۰۰ فونت
- استفاده آسان
در کل، افزونۀ WhatFont یک ابزار مفید برای شناسایی فونت های استفاده شده در وب سایت ها است. این افزونه استفاده از آن آسان است و می تواند به شما کمک کند تا اطلاعات مفیدی در مورد فونت ها کسب کنید.
۱۸- افزونه کروم Image Tool
افزونه کروم Image Tool یک افزونه رایگان است که به شما کمک می کند تا تصاویر موجود در یک صفحه وب را به راحتی مدیریت کنید. این افزونه با ارائه یک نوار ابزار در نوار ابزار مرورگر شما، به شما امکان می دهد تا تصاویر را دانلود، ذخیره، و به اشتراک بگذارید.
برخی از ویژگی های افزونه کروم Image Tool عبارتند از:
- دانلود تصاویر
- ذخیره تصاویر
- به اشتراک گذاری تصاویر
- امکان انتخاب چندین تصویر
- امکان مشاهده اطلاعات تصویر
- امکان تبدیل فرمت تصویر
برای استفاده از افزونه کروم Image Tool، ابتدا آن را از فروشگاه Chrome نصب کنید. سپس، مرورگر خود را باز کنید و صفحه وب مورد نظر خود را باز کنید.
برای دانلود یک تصویر، روی تصویر کلیک کنید و سپس روی دکمه “Download” در نوار ابزار افزونه کلیک کنید. افزونه تصویر را به صورت پیش فرض در پوشه دانلودهای شما ذخیره می کند.
برای ذخیره یک تصویر، روی تصویر کلیک کنید و سپس روی دکمه “Save” در نوار ابزار افزونه کلیک کنید. افزونه یک پنجره ذخیره سازی باز می کند که در آن می توانید نام و مکان تصویر را مشخص کنید.
برای به اشتراک گذاری یک تصویر، روی تصویر کلیک کنید و سپس روی دکمه “Share” در نوار ابزار افزونه کلیک کنید. افزونه گزینه های مختلفی برای به اشتراک گذاری تصویر را به شما ارائه می دهد، مانند ایمیل، پیامک، و رسانه های اجتماعی.
برای انتخاب چندین تصویر، کلید Ctrl را نگه دارید و روی تصاویر مورد نظر خود کلیک کنید. سپس، می توانید از دکمه های دانلود، ذخیره، یا به اشتراک گذاری برای مدیریت تصاویر انتخاب شده استفاده کنید.
برای مشاهده اطلاعات تصویر، روی تصویر کلیک کنید و سپس روی دکمه “Information” در نوار ابزار افزونه کلیک کنید. افزونه اطلاعات مختلفی در مورد تصویر، مانند اندازه، فرمت، و تاریخ ایجاد را نمایش می دهد.
برای تبدیل فرمت تصویر، روی تصویر کلیک کنید و سپس روی دکمه “Convert” در نوار ابزار افزونه کلیک کنید. افزونه یک لیست از فرمت های تصویر را به شما ارائه می دهد که می توانید تصویر را به آن تبدیل کنید.
۱۹- افزونه CSS-Shack گوگل کروم:
افزونه CSS-Shack یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا استایل ها را به صورت لایه بندی شده در یک صفحه وب ایجاد کنید. این افزونه با ارائه یک رابط کاربری ساده و کاربرپسند، به شما امکان می دهد تا استایل ها را به صورت بصری ایجاد کنید.
برخی از ویژگی های افزونه CSS-Shack عبارتند از:
- ایجاد استایل های لایه بندی شده
- انتخاب رنگ ها و فونت ها
- استفاده از ابزارهای مختلف برای ایجاد استایل ها
- امکان ذخیره استایل ها
- امکان به اشتراک گذاری استایل ها
برای استفاده از افزونه CSS-Shack، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و صفحه وب مورد نظر خود را باز کنید.
برای ایجاد یک استایل جدید، روی آیکون افزونه در نوار ابزار مرورگر خود کلیک کنید. افزونه یک پنجره جدید باز می کند که در آن می توانید استایل جدید خود را ایجاد کنید.
برای انتخاب رنگ ها و فونت ها، از ابزارهای موجود در پنجره افزونه استفاده کنید.
برای استفاده از ابزارهای مختلف برای ایجاد استایل ها، از منوی کشویی در بالای پنجره افزونه استفاده کنید.
برای ذخیره استایل جدید خود، روی دکمه “Save” در بالای پنجره افزونه کلیک کنید. افزونه استایل جدید را در یک فایل CSS ذخیره می کند.
برای به اشتراک گذاری استایل جدید خود، روی دکمه “Share” در بالای پنجره افزونه کلیک کنید. افزونه استایل جدید را به صورت یک فایل CSS یا یک پیوند قابل اشتراک گذاری صادر می کند.
در اینجا چند نمونه از نحوه استفاده از افزونه CSS-Shack آورده شده است:
- برای ایجاد یک استایل جدید، روی آیکون افزونه در نوار ابزار مرورگر خود کلیک کنید.
- برای انتخاب رنگ ها و فونت ها، از ابزارهای موجود در پنجره افزونه استفاده کنید.
- برای استفاده از ابزارهای مختلف برای ایجاد استایل ها، از منوی کشویی در بالای پنجره افزونه استفاده کنید.
- برای ذخیره استایل جدید خود، روی دکمه “Save” در بالای پنجره افزونه کلیک کنید.
- برای به اشتراک گذاری استایل جدید خود، روی دکمه “Share” در بالای پنجره افزونه کلیک کنید.
افزونه CSS-Shack یک ابزار مفید برای طراحان وب است که به آنها کمک می کند تا استایل ها را به صورت لایه بندی شده و بصری ایجاد کنند. این افزونه استفاده از آن آسان است و می تواند به شما کمک کند تا استایل های حرفه ای ایجاد کنید.
در اینجا برخی از مزایای استفاده از افزونه CSS-Shack آورده شده است:
- ایجاد استایل های لایه بندی شده: این افزونه به شما امکان می دهد تا استایل ها را به صورت لایه بندی شده ایجاد کنید. این امر به شما کمک می کند تا استایل ها را به راحتی مدیریت کنید و تغییرات را در صورت نیاز اعمال کنید.
- انتخاب رنگ ها و فونت ها: این افزونه به شما امکان می دهد تا رنگ ها و فونت ها را به صورت بصری انتخاب کنید. این امر به شما کمک می کند تا استایل ها را سریعتر و آسان تر ایجاد کنید.
- استفاده از ابزارهای مختلف: این افزونه ابزارهای مختلفی را برای ایجاد استایل ها در اختیار شما قرار می دهد. این ابزارها به شما کمک می کند تا استایل ها را با دقت و جزئیات بیشتری ایجاد کنید.
- امکان ذخیره استایل ها: این افزونه به شما امکان می دهد تا استایل ها را ذخیره کنید. این امر به شما کمک می کند تا استایل ها را برای استفاده مجدد ذخیره کنید.
- امکان به اشتراک گذاری استایل ها: این افزونه به شما امکان می دهد تا استایل ها را با دیگران به اشتراک بگذارید. این امر به شما کمک می کند تا استایل های خود را با دیگران به اشتراک بگذارید و از آنها بازخورد بگیرید.
۲۰- افزونه Marmoset برای برنامه نویسان
افزونه Marmoset یک افزونه رایگان برای مرورگرهای Chrome و Firefox است که به شما کمک می کند تا کدهای جاوا اسکریپت و CSS خود را به صورت زیبا و قابل درک نمایش دهید. این افزونه با ارائه یک رابط کاربری ساده و کاربرپسند، به شما امکان می دهد تا کد خود را قالب بندی کنید و خوانایی آن را افزایش دهید.
برخی از ویژگی های افزونه Marmoset عبارتند از:
- قالب بندی کد جاوا اسکریپت و CSS
- افزودن رنگ ها و حاشیه ها به کد
- امکان ذخیره کد قالب بندی شده
- امکان به اشتراک گذاری کد قالب بندی شده
برای استفاده از افزونه Marmoset، ابتدا آن را از فروشگاه Chrome یا Firefox نصب کنید. سپس، مرورگر خود را باز کنید و کد جاوا اسکریپت یا CSS خود را در یک ویرایشگر کد باز کنید.
برای قالب بندی کد خود، روی آیکون افزونه در نوار ابزار مرورگر خود کلیک کنید. افزونه کد شما را قالب بندی می کند و خوانایی آن را افزایش می دهد.
برای افزودن رنگ ها و حاشیه ها به کد، از ابزارهای موجود در افزونه استفاده کنید.
برای ذخیره کد قالب بندی شده، روی دکمه “Save” در نوار ابزار افزونه کلیک کنید. افزونه کد قالب بندی شده را در یک فایل جدید ذخیره می کند.
برای به اشتراک گذاری کد قالب بندی شده، روی دکمه “Share” در نوار ابزار افزونه کلیک کنید. افزونه کد قالب بندی شده را به صورت یک فایل یا یک پیوند قابل اشتراک گذاری صادر می کند.
نتیجه گیری :
برای انتخاب افزونههای مناسب، باید نیازهای خود را در نظر بگیرید. اگر مبتدی هستید، بهتر است از افزونههایی استفاده کنید که برای توسعهدهندگان مبتدی طراحی شدهاند. با افزایش مهارتهای خود، میتوانید از افزونههای پیشرفتهتر استفاده کنید.