Google Chrome Exensions تفاوت های ظریف برای توسعه دهندگان. برنامه های افزودنی Google Chrome برای توسعه وب و موارد دیگر. چه نسخه هایی از Chrome وجود دارد؟

مرورگر گوگل کروم- یک انتخاب عالی برای طراحان و توسعه دهندگان وب. با برنامه افزودنی برای Googlechrome می توانید اضافه کنید ویژگی های بیشتر، که می تواند در طراحی، یافتن خطاها و سایر کارها با سایت کمک کند. در اینجا بهترین افزونه های کروم را برای طراحان و توسعه دهندگان ارائه می دهیم.

3.

تست رزولوشن– این افزونه برای بررسی صفحات وب با وضوح های مختلف صفحه طراحی شده است و شما می توانید تنظیمات وضوح خود را تنظیم کنید. این ابزار برای بررسی ظاهر طراحی شما در اندازه های مختلف مانیتور بسیار راحت است.

4.

Pendule عملکرد ابزارهای داخلی Google Chrome را گسترش می دهد. با استفاده از این افزونه، کاربران دارای بسیاری از ویژگی های اضافی هستند، مانند: ارزیابی برچسب های محدودیت با استفاده از سرویس های وب خودکار W3C، مخفی کردن تصاویر در یک صفحه، مشاهده اسکریپت های تعبیه شده در یک صفحه و بسیاری موارد دیگر.

5.

لباس سادهاین فقط یک کار را به خوبی انجام می دهد - تمام CSS موجود در صفحه را حذف می کند. یکی از روش های مورد علاقه برای ارزیابی دسترسی به یک صفحه وب، حذف سبک های CSS و مقایسه خوانایی صفحه با و بدون سبک است. این رویکرد موقعیتی را شبیه‌سازی می‌کند که در آن کاربر فقط یک صفحه جزئی را روی صفحه نمایش خود نشان می‌دهد و فقط می‌تواند به برچسب‌های صفحه برای دسترسی به محتوا تکیه کند.
اگرچه این برنامه در ابتدا برای آزمایش صفحات وب ایجاد شده است، اما می توانید از آن برای مشاهده سبک های مورد علاقه خود به روشی "بدون استایل" استفاده کنید (بنابراین رئیس شما در زمانی که باید یک تابع جاوا اسکریپت را به پایان برسانید، شما را به آن نگاه نکند).

6.

اگر می خواهید قسمت های خاصی از یک صفحه وب را برش دهید، Image Cropper انتخاب واضح شماست. این برنامه به سادگی یک چوب است و هیچ حقه ای ندارد. فقط منطقه ای را که می خواهید برش دهید مشخص کنید و برنامه آن را انتخاب می کند. به دقت پیکسل نیاز دارید؟ افزونه اندازه و محل قطعاتی را که برش می‌دهید نشان می‌دهد، بنابراین می‌توانید اندازه مورد نیاز خود را انتخاب کنید.

7.

این افزونه به مینیمالیستی و ساده بودن خود افتخار می کند - که چیز خوبی است، زیرا دلیلی برای پیچیده کردن تولید متن Lorem Ipsum وجود ندارد. ژنراتور Lorem Ipsum به شما امکان می دهد هنگام طراحی وب سایت ارائه خود، فریم ها را با متن پر کنید.

8.

شناسایی اشکالات درون موتور اینترنت اکسپلوررترایدنت اصلا سرگرم کننده نیست. با استفاده از IE Tab، حداقل می توانید کمی در زمان صرفه جویی کنید و مجبور نباشید از اینترنت اکسپلورر (ناگفته نماند که افزونه های زیادی ندارد) برای یافتن مشکلات رندر استفاده کنید.

9.

jQuery Shell به شما اجازه می دهد تا دستورات جاوا اسکریپت و جی کوئری را در زمینه یک صفحه وب باز اجرا کنید. یک افزونه بسیار مفید برای یادگیری و آزمایش با jQuery.

10.

این برنامه استاد یک ترفند است. ترفند این است که این برنامه به شما امکان می دهد به سرعت مقادیر Hex و RGB را از هر رنگی در هر صفحه وب دریافت کنید. اگر بخواهید بدون استفاده از Photoshop و ابزار Eyedropper آن، تعیین کنید که وب سایت مورد علاقه شما از چه رنگ هایی استفاده می کند، این ویژگی ممکن است مفید باشد.

11.

با استفاده از تابع ویرایش وب، می توانید هر صفحه ای را برای ویرایش در دسترس قرار دهید (البته تغییراتی که ایجاد می کنید ذخیره نمی شوند). خوب، پس چرا به این نیاز دارید؟ به این دلیل است: اگر در حال ایجاد یک وب سایت هستید و می خواهید بدون ایجاد تغییرات قابل توجه در کد با عناصر بازی کنید، این برنامه برای شما بسیار مفید خواهد بود.

12.

آیا تا به حال خواسته اید بدانید که با چه فناوری ها، ساختارها و برنامه های کاربردی متن بازاز وب سایت خاصی استفاده می کند؟ توسعه دهندگان با تجربه می توانند با مطالعه به این سوالات پاسخ دهند منبع، اما اگر می‌خواهید سریع‌تر و آسان‌تر پاسخ را دریافت کنید، Chrome Sniffer را امتحان کنید. Chrome Sniffer تمام چارچوب ها/کتابخانه های جاوا اسکریپت (jQuery، MooTools و غیره) و CMS (دروپال، وردپرس و غیره) را که توسط یک وب سایت استفاده می شود فهرست می کند.

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

15.

یک صفحه وب درست ساخته شده با نشانه گذاری خوب در نهایت منجر به نتایج چشمگیر صفحه در موتورهای جستجو می شود. با این حال، اگر می خواهید وب سایت خود را بر اساس پارامترهای شناخته شده بهینه سازی موتور جستجو ارزیابی کنید، باید SEO Site Tools را امتحان کنید، افزونه ای که طیف وسیعی از ابزارها و ویژگی های مفید ارزیابی سئو را به شما ارائه می دهد. می‌تواند پارامترهای زیادی را در صفحه و خارج از صفحه بخواند، اطلاعاتی را از رسانه‌های اجتماعی و همه چیزها دریافت کند.

چندین نسخه برای دسته های مختلف کاربران ایجاد شده است. یکی از آنها نام دارد Google Chrome Developer Edition. این چه نوع نسخه ای است و چرا به آن نیاز است؟ در مورد این و صحبت خواهیم کرددر این مواد

شایان ذکر است که ساخت های جایگزین کروم برای مدت طولانی ظاهر شده اند. آنها تقریباً از نسخه راه اندازی این مرورگر محبوب را همراهی می کنند. اما همه کاربران برای گزینه های جایگزین مناسب نیستند.

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

چه نسخه هایی از کروم وجود دارد؟

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

اینها نسخه‌های Google Chrome مورد علاقه همه هستند که وجود دارد. با این حال، در این زمینه ما به نسخه Developer Edition علاقه مندیم. بنابراین، همه چیز باید در نظر گرفته شود ویژگی های کلیدیاین نسخه برای جزئیات بیشتر تنها در این صورت می توان نتیجه گیری کرد.

ویژگی های نسخه توسعه دهنده

ویژگی کلیدی این نسخه های گوگلکروم در دسترس بودن ابزارهای توسعه است. آنها برای کسانی که افزونه ها و افزونه ها را برای این مرورگر وب توسعه می دهند مفید خواهند بود. کاربر معمولی در چنین ابزارهایی گم می شود.

ویژگی دوم کنسول پیشرفته است. برای ویرایش کد و فعال کردن استفاده می شود توابع پنهانمرورگر. با این حال، شما باید بدانید که چگونه با آن کار کنید. کوچکترین اشتباه در یک تیم می تواند منجر به عواقب بسیار بدی شود.

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

به روز رسانی های مکرر- یکی دیگر از ویژگی های متمایز نسخه Developer Edition. آنها به طور نامنظم می آیند، اما حداکثر هر دو هفته یک بار. در برخی موارد، به‌روزرسانی‌ها ممکن است ظرف دو روز برسد. این برای کسانی که در حال آزمایش ویژگی های جدید مرورگر وب هستند راحت است.

نتیجه

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

شایان ذکر است که کاربران عادی به هیچ وجه نیازی به نصب Developer Edition ندارند. هیچ معنایی از این امر وجود نخواهد داشت. علاوه بر این، این مونتاژ به خصوص پایدار نیست. اگر توسعه دهنده نیستید، بهتر است از Stable استفاده کنید.

تعداد زیادی پسوند رایگان برای مرورگر گوگل Chrome که به زندگی شما کمک می کند. در اینجا 20 مورد از بهترین ها آورده شده است.

در این مقاله، ما بهترین افزونه‌های Google Chrome را برای اهداف مختلف ارائه می‌کنیم - اما هر کدام برای آسان‌تر کردن کار شما طراحی شده‌اند.

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

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

می خواهید در این مورد بیشتر بدانید؟ لیست ما را بررسی کنید.

01. iMacros برای کروم

برنامه افزودنی iMacros Chrome به شما امکان می دهد اقدامات خود را ضبط و ذخیره کنید.

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

سپس می توانید صفحات خود را بارها و بارها بررسی کنید و مراحل را با کلیک یک دکمه تکرار کنید. این باعث صرفه جویی در زمان ارزشمند می شود و به شما امکان می دهد بر روی مسائل مهم تر تمرکز کنید.

02. فونت زمین بازی

Font Playground به شما امکان می دهد فونت های محلی را در صفحات وب زنده آزمایش کنید.

هر طراح و توسعه دهنده ای چیزهای مفید زیادی در این افزونه پیدا خواهد کرد. Font Playground به شما امکان می دهد فونت های محلی و تمام کتابخانه های فونت Google را در صفحات وب فعال بدون ایجاد هیچ تغییری در خود صفحات آزمایش کنید.

خوبی این افزونه این است که تمام اندازه‌ها، سبک‌ها و جلوه‌های فونت ممکن را شامل می‌شود. ابتدا می توانید گزینه های مختلف فونت را قبل از ایجاد هر گونه تغییر واقعی در کد تجسم کنید.

03. چه فونت

از چه فونتی استفاده می کنند؟ افزونه What Font Chrome می تواند این را به شما نشان دهد!

یک برنامه افزودنی بسیار مفید برای Google Chrome، What Font به توسعه دهندگان و طراحان اجازه می دهد تا تعیین کنند که کدام فونت در یک صفحه وب استفاده می شود.

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

04. یسلو

YSlow به شما می گوید چه چیزی باعث کاهش سرعت صفحه می شود.

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

YSlow صفحات وب را بر اساس 23 قانون از 34 قانون عملکرد توسعه یافته توسط تیم یاهو آزمایش می کند. این فوق العاده است ابزار مفیدبرای تجزیه و تحلیل صفحات وب، که همچنین راه هایی را برای بهینه سازی عملکرد آنها پیشنهاد می کند.

05. توسعه دهنده وب

افزونه Chrome Web Developer تعدادی ابزار مفید برای توسعه دهندگان فراهم می کند.

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

این نسخه رسمیتوسعه وب توسعه دهنده برای Firefox توسعه یافته است.

06. چک لیست توسعه دهنده وب

مشکلات عملکرد را در این ابزار مفید کروم برطرف می کند.

این ابزار به شما امکان می دهد همه چیز را بررسی کنید، از جمله اینکه آیا صفحات شما با سئو سازگار هستند، با قابلیت استفاده، و همچنین قابلیت مشاهده و عملکرد آنها (سرعت بارگذاری صفحه).

بنابراین اگر، برای مثال، یک تگ H1 را از دست دادید، یا اگر یک صفحه عنوان متا یا توضیحات متا را از دست داد، پسوند چک لیست توسعه دهنده وب شما را از این موضوع مطلع می کند.

تا بتوانید به سرعت این مشکل را حل کنید. اگر روی لینک کلیک کنید " اطلاعات بیشتر و کمک» در پایین برنامه افزودنی، فهرست دقیق تری را خواهید دید.

07. DevTools Autosave

به طور خودکار تغییرات را در فایل های منبع صفحه (CSS و JS) ذخیره می کند.

ذخیره‌سازی خودکار DevTools به شما این امکان را می‌دهد تا به‌طور خودکار هر تغییری را که در فایل‌های منبع CSS و JS یک صفحه ایجاد می‌شود، از طریق محیط Chrome Dev Tools ذخیره کنید. راه اندازی و استفاده از افزونه آسان است و در وقت شما صرفه جویی می کند.

08. وایرفریم فوری

به شما امکان می‌دهد تا قاب‌های سیمی صفحات وب را مشاهده کنید.

مشاهده Wireframe هر صفحه وب را تنها با یک کلیک وصل کنید. این افزونه Google Chrome به برنامه‌نویسان و طراحان وب کمک می‌کند تا صفحات وب را، چه محلی و چه به‌صورت آنلاین منتشر شده، با پوشش وایرفریم مشاهده کنند.

09. شبیه ساز ریپل

شبیه ساز Ripple به اشکال زدایی صفحه وب، بازرسی DOM و تست خودکار کمک می کند.

Ripple Emulator یک شبیه ساز محیط موبایل چند پلتفرمی است که به شما کمک می کند برنامه وب خود را روی آن تست کنید دستگاه های مختلفو وضوح صفحه نمایش

پسوند Ripple Emulator را می توان در ترکیب با ابزارهای توسعه موجود برای اشکال زدایی، بازرسی DOM و تست خودکار استفاده کرد.

10. رگه

ردیابی مکالمات ایمیل در یک بلیط، تعیین وظایف.

Streak ابزار اصلی CRM و پشتیبانی است پست الکترونیکجیمیل.

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

11. Stackoverflow را جستجو کنید

با این برنامه افزودنی ضروری به سوالات خود پاسخ سریع دریافت کنید.

اگر شما یک توسعه دهنده وب هستید، حتماً در مورد Stack Overflow شنیده اید، جایی که بسیاری از توسعه دهندگان با سؤالات مختلف مربوط به توسعه پروژه های وب به آن مراجعه می کنند. اگر نه، پس حتما باید او را بشناسید. این یک جامعه واقعاً پر رونق است که طیف گسترده ای از موضوعات را پوشش می دهد، از C# و جاوا گرفته تا PHP و JQuery.

این افزونه فوق العاده یک کادر جستجو را مستقیماً به مرورگر شما اضافه می کند و به شما امکان می دهد از منابع گسترده Stack Overflow استفاده کنید. پسوندی که باید از آن استفاده کرد!

12. راهنمای PHP Ninja

تمام اسناد برای PHP 5.5، در مرورگر شما.

به خاطر سپردن هر تابع واقعاً سخت است، بنابراین اگر در گذشته ساعت‌های زیادی را صرف جستجوی توابع خاص PHP از طریق Google کرده‌اید، این افزونه قطعا توجه شما را به خود جلب خواهد کرد. PHP Ninja Manual فراهم می کند

شما تمام اسناد مربوط به PHP 5.5 را دریافت می کنید نمونه های عینیبه هشت زبان در مرورگر شما

13. PerfectPixel

این افزونه به شما کمک می کند تا مطمئن شوید که هر پیکسل در سایت شما با طراحی مطابقت دارد.

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

این برنامه افزودنی با کاربری آسان به شما امکان می دهد یک پوشش تصویر نیمه شفاف را در بالای صفحه وب قرار دهید و برای اطمینان از تطابق 100 درصدی، مطابقت پیکسل به پیکسل را بررسی کنید.

14. کد کولا

به شما امکان می دهد CSS صفحه وب را در جای خود ویرایش کنید.

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

15. Chrome Sniffer

بازرسی برنامه های کاربردی وب و کتابخانه های جاوا اسکریپت.

این برنامه افزودنی به توسعه دهندگان وب اجازه می دهد تا برنامه های کاربردی وب و همچنین کتابخانه های جاوا اسکریپت متصل به یک پروژه خاص را بررسی و شناسایی کنند. برنامه افزودنی به ساده ترین شکل ممکن کار می کند: یک نماد در نوار آدرس ظاهر می شود که نسخه چارچوب یا CMS استفاده شده را نشان می دهد.

16. تعویض کننده عامل کاربر

بررسی کنید که سایت شما در دستگاه های مختلف چگونه به نظر می رسد.

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

مهم نیست در مورد Google Chrome چه شنیده اید، چه زمانی ما در مورددر مورد طراحی و توسعه وب، فایرفاکس هنوز بهترین مرورگر با محیط توسعه دوستانه است که می توانید پیدا کنید.

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

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

اکثر این افزونه ها را نصب، تست و استفاده کنید. پس از همه، استفاده از همه آنها رایگان است!

• کاری که انجام می دهد: صفحات وب را بازرسی می کند

Firebug افزونه ای است که طراحان و توسعه دهندگان وب به سادگی نمی توانند بدون آن زندگی کنند. این برنامه افزودنی مانند نسخه پیشرفته‌ای از کنسول توسعه‌دهنده یکپارچه است که با فایرفاکس ارائه می‌شود. Firebug بررسی عناصر موجود در صفحات وب را برای شما آسان تر می کند و به شما نشان می دهد که چگونه کارها در سایت های مختلف کار می کنند.

• مناسب برای: توسعه دهندگان وب
• کاری که انجام می دهد: مشتری برای فایرفاکس

FireFTP یک سرویس گیرنده FTP/SFTP برای فایرفاکس است که به شما امکان می دهد به طور ایمن فایل ها را بین رایانه و سرور مستقیماً از مرورگر خود آپلود و انتقال دهید. با استفاده از این افزونه، دیگر مجبور نخواهید بود بین مرورگر خود و برنامه های سرویس گیرنده FTP بپرید.

• مناسب برای: توسعه دهندگان و طراحان وب
• کاری که انجام می دهد: تجزیه و تحلیل و بررسی صفحات وب

این یک افزونه همه کاره است که تعدادی ابزار مفید را به فایرفاکس شما اضافه می کند. برخی از ابزارهای موجود در این افزونه عبارتند از نمایش و ویرایش شیوه نامه های CSS، غیرفعال کردن سبک ها، ابزارهای اشکال زدایی و غیره.

• کاری که انجام می دهد: ابزار تجزیه و تحلیل رنگ

ColorZilla یک ابزار عالی است که طراحان وب ظاهری کاملاً مفید خواهند بود. این افزونه دارای یک قطره چکان برای انتخاب سریع رنگ ها در یک صفحه وب، یک مولد گرادیان CSS، یک تحلیلگر رنگ، پالت های رنگی و موارد دیگر است.

• مناسب برای: توسعه دهندگان وب
• کاری که انجام می دهد: وب سایت ها را با کد سفارشی تغییر دهید

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

• بهترین برای: طراحان رابط
• کاری که انجام می دهد: افست عناصر وب را تنظیم می کند

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

به عنوان مثال، اگر یکی از تصاویر در صفحه وب شما با شی دیگری همپوشانی داشته باشد، می توانید از Pixel Perfect برای تعیین تعداد پیکسل هایی که باید تنظیم کنید تا آن تصویر در مکان مناسب قرار گیرد، استفاده کنید.

• مناسب برای: طراحان وب
• کاری که انجام می دهد: همه چیز را از یک صفحه وب بارگیری می کند

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

• بهترین برای: طراحان رابط
• چه کاری انجام می دهد: صفحات وب را در اینترنت اکسپلورر بررسی کنید

باور کنید یا نه، افرادی هستند که هنوز از قدیمی ها استفاده می کنند نسخه های اینترنتی Explorer برای دسترسی به اینترنت ایجاد سایت هایی که به خوبی در این مرورگرهای قدیمی کار می کنند یکی از مشکلاتی است که طراحان وب هنوز با آن دست و پنجه نرم می کنند. این افزونه سفارشی کردن طراحی های وب برای افراد قدیمی را آسان می کند مرورگرهای اینترنتی Explorer، ایجاد یک تب جدید در IE.

• مناسب برای: طراحان وب و توسعه دهندگان
• چه کاری انجام می دهد: فناوری مورد استفاده در وب سایت را به شما نشان می دهد

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

• مناسب برای: توسعه دهندگان وب
• کاری که انجام می دهد: جاوا را روشن یا خاموش می کند

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

• بهترین برای: طراحان رابط
• کاری که انجام می دهد: عناصر را در پیکسل اندازه می گیرد

عملکرد این افزونه ساده است، به شما امکان می دهد یک خط کش مجازی در بالای یک صفحه وب یا یک عنصر در یک صفحه برای اندازه گیری عرض، ارتفاع یا تراز پیکسلی عنصر در صفحه وب بکشید. Measure برای اکثر توسعه دهندگان front-end برای ایجاد وایرفریم مفید است.

• مناسب برای: طراحان وب
• کاری که انجام می دهد: زبان را در مرورگر تغییر می دهد

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

• بهترین برای: طراحان رابط
• چه کاری انجام می دهد: ایجاد متن ساختگی

ایجاد متن ساختگی برای مدل‌ها و نمونه‌های اولیه وب‌سایت جدید شما یک کار خسته کننده است که بعید است حتی یک طراح را سرگرم کند. این افزونه با این امکان که به شما امکان می دهد متن ساختگی Lorem Ipsum را مستقیماً از فایرفاکس تولید کنید، روند را خسته کننده تر می کند.

• مناسب برای: توسعه دهندگان وب
• آنچه انجام می دهد: ویرایش و ایجاد کوکی ها

این افزونه نه تنها کوکی های سایت شما را مدیریت می کند، بلکه به شما امکان ویرایش و ایجاد فایل های جدید را نیز می دهد. برخی از ویژگی های این افزونه شامل مرور درون خطی است بیسکویت ها، امکان تغییر دامنه، امکان ویرایش چندین کوکی به طور همزمان و موارد دیگر.

• بهترین برای: طراحان رابط
• آنچه انجام می دهد: رنگ ها را در یک صفحه وب انتخاب می کند

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

• مناسب برای: طراحان وب و توسعه دهندگان
• چه کاری انجام می دهد: اطلاعاتی در مورد نرم افزار مورد استفاده وب سایت ارائه می دهد

مشابه افزونه BuiltWith، Wappalyzer یکی دیگر از برنامه‌های افزودنی مفید است که به شما امکان می‌دهد بفهمید چه چیزی نرم افزاردر وب سایت استفاده می شود. به عنوان مثال، می توانید دریابید که سایت از چه نوع CMS استفاده می کند، سرور وب سایت از چه سیستم عاملی پشتیبانی می کند و موارد دیگر.

• مناسب برای: توسعه دهندگان وب
• چه کاری انجام می دهد: عامل کاربر مرورگر را تغییر می دهد

آیا می خواهید بدانید وب سایت شما در سیستم عامل ها و سیستم عامل های مختلف چگونه خواهد بود؟ سپس این ابزاری است که قطعاً برای شما مفید خواهد بود. User-Agent Switcher به شما این امکان را می دهد که بین پلتفرم های مختلف مانند اندروید، مک، ویندوز سوئیچ کنید و سیستم عامل را انتخاب کنید تا عامل کاربر مرورگر خود را تغییر دهید.

• مناسب برای: طراحان وب و توسعه دهندگان
• چه کاری انجام می دهد: نمونه ای از استفاده از برگه حافظه مرورگر را نشان می دهد

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

• مناسب برای: طراحان وب و گرافیک
• کاری که انجام می دهد: تصاویر را در فتوشاپ باز می کند

این افزونه همان کاری را انجام می دهد که نامش می گوید، به سادگی با یک کلیک تصاویری را که در یک صفحه وب پیدا می کنید باز می کند با استفاده از فتوشاپ. نیازی به آپلود تصویر یا راه اندازی فتوشاپ نیست، افزونه هر کاری را که نیاز دارید انجام می دهد.

• بهترین برای: طراحان رابط
• کاری که انجام می دهد: جداول HTML را بهبود می بخشد

نمودارها، آمار، مقایسه ها، جداول - این افزونه می تواند همه این کارها را انجام دهد. شما می توانید از این ابزار برای ایجاد جداول و نمودارهای HTML کاربر پسند و زیبا استفاده کنید.

• مناسب برای: توسعه دهندگان وب
• کاری که انجام می دهد: سرویس گیرنده SSH برای فایرفاکس

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

• بهترین برای: طراحان رابط
• کاری که انجام می دهد: به طور خودکار صفحات وب را بازخوانی می کند

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

• بهترین برای: طراحان رابط
• چه کاری انجام می دهد: اندازه پنجره های فایرفاکس را برای وضوح صفحه نمایش خاص تغییر می دهد

این افزونه به شما امکان می دهد اندازه پنجره فایرفاکس خود را با وضوح های خاص تغییر دهید تا ببینید وب سایت شما در صفحه های مختلف چگونه به نظر می رسد. برای اینکه این افزونه به درستی کار کند، باید نوار افزونه فایرفاکس را نصب کنید.

• مناسب برای: طراحان وب و توسعه دهندگان
• کاری که انجام می دهد: اطلاعاتی در مورد فونت های صفحه و عناصر آن پیدا می کند

Font Finder یک ابزار مفید است که به شما امکان می دهد عناصر وب سایت را بررسی کنید تا متوجه شوید اطلاعات مهمدر مورد فونت های استفاده شده در صفحه، مانند نام خانوادگی فونت، رنگ فونت، فاصله خطوط، دکوراسیون و غیره.

• بهترین برای: طراحان رابط
• کاری که انجام می دهد: صفحات وب را در مرورگرهای مختلف بررسی می کند

عملکرد این افزونه ساده است. این به شما این امکان را می دهد که فوراً هر صفحه وب را که در فایرفاکس مشاهده می کنید با استفاده از مرورگر دیگری تنها با یک کلیک باز کنید. نیازی به کپی کردن آدرس ها نیست، هر مرورگر را یکی یکی باز کنید و URL ها را برای باز کردن وب سایت پیست کنید.

• مناسب برای: طراحان وب و توسعه دهندگان
• کاری که انجام می دهد: کش مرورگر را پاک می کند

این افزونه بلافاصله کش را پاک می کند مرورگر فایرفاکس(RAM و DISK) برای کاهش استفاده از منابع کامپیوتری. برنامه افزودنی به شما امکان می دهد حافظه پنهان را با کلیک کردن بر روی یک دکمه یا فشار دادن کلید F9 روی صفحه کلید خود پاک کنید. اگر می خواهید تغییرات ایجاد شده در یک صفحه وب را به سرعت مشاهده کنید، این افزونه بسیار مفید خواهد بود.

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

در اینجا چند افزونه مفید برای Google Chrome آورده شده است.

پسوند توسعه دهنده وب

من می خواهم به راحت ترین و قدرتمندترین ابزار برای یک توسعه دهنده وب و طراح وب اشاره کنم - پسوند توسعه دهنده وب برای گوگل کروم.

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

افزونه دارای تعداد زیادی گزینه است.

به عنوان مثال، بسیاری از مردم فقط نیاز دارند رنگ عنصر را پیدا کنیدروی صفحه مانیتور با فرمت هگزادسیمال. برای این منظور افزونه دارد عملکرد ویژه. در قسمت Miscellaneous گزینه Display Color Picker را انتخاب کنید.

با انتخاب Display Color Picker، مکان نما به صورت ضربدری در می آید. اکنون با کلیک بر روی هر ناحیه ای از صفحه در گوشه سمت راست پایین مرورگر، رنگ را به صورت هگزادسیمال برای استفاده در CSS نمایش می دهد.