8 اکستنشن کاربردی گوگل کروم برای برنامه نویسان

اگر برنامه‌نویس باشید، بخش زیادی از روزتان در مرورگر می‌گذرد. از جست‌وجوی خطاها و خواندن مستندات گرفته تا آزمایش سریعِ کدها و APIها. همین فضای آشنا می‌تواند با چند افزونهٔ کم‌حجم اما کاربردی، به یک جعبه‌ابزار همه‌ فن‌حریف تبدیل شود؛ ابزاری که مراحل تکراری و وقت‌گیر را حذف می‌کند و حواس شما را روی اصل ماجرا، یعنی نوشتن کد باکیفیت متمرکز نگه می‌دارد. تصور کنید به‌جای ده‌ها تب به‌هم‌ریخته و کپی‌پیست‌های بی‌پایان، تنها با یک کلیک بتوانید درخواست‌های HTTP را شبیه‌سازی کنید، فونت صفحه‌ای را که دوست دارید درجا تشخیص دهید یا مجموعهٔ بزرگی از تب‌ها را برای ادامهٔ کار فردا ذخیره کنید.

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

۱. Requestly

اگر تا امروز برای تست یک مسیر جدید یا دورزدن “CORS” مجبور بوده‌اید سرور را دستکاری کنید، Requestly این دردسر را از میان برمی‌دارد! این افزونه متن‌باز و سبک، بیش از ۲۰۰ هزار برنامه‌نویس را به خود جذب کرده و در سال ۲۰۲۵ هم‌چنان با به‌روزرسانی منظم زنده است:

• Redirect یا Rewrite URL‌ها (به‌طور مثال فرستادن ترافیک نسخه بتا روی لوکال‌هاست)
• ویرایش هِدر و کوکی برای تست سناریوهای احراز هویت یا نسخه موبایل
• Mock Response: پاسخ یک API را با JSON دلخواه جایگزین کنید یا عمداً تأخیر و خطای ۵۰۳ شبیه‌سازی کنید تا استریت هَندلرهای‌تان را بسنجید 
• ضبط و به‌اشتراک‌گذاری Rules با تیم (مفید برای QA و Pair Programming)

چطور از این افزونه استفاده کنیم!

 ۱. افزونه را از Chrome Web Store نصب کنید و روی آیکن آن بزنید.
۲. در پنل بازشده، «Create Rule» → «Modify Response» را انتخاب کنید.
۳. URL هدف را وارد کنید، بدنهٔ دل‌خواه را بنویسید و Save را بزنید. تمام درخواست‌های بعدی همان پاسخ را می‌گیرند آن هم بدون دست‌زدن به سرور.

نکتهٔ امنیتی: هر “Rule” فقط در پروفایل مرورگری که ساخته‌اید فعال است؛ برای پروژه‌های متفاوت، پروفایل‌ جدا یا “Workspace” داخلی “Requestly” بسازید تا اشتباهی “Rule”‌های تست را روی محیط اصلی اجرا نکنید. با “Requestly” می‌توانید آزمایش‌های پیچیدهٔ شبکه را در چند ثانیه انجام دهید و تمرکزتان را روی منطق برنامه بگذارید، نه پیکربندی بی‌پایان سرور.

۲. JSON Formatter 

اگر تا به حال یک خروجی “JSON” طولانی را به شکل متن خام دیده باشید، می‌دانید که پیدا کردن کلید یا مقدار دلخواه مثل گشتن دنبال سوزن در انبار کاه است. JSON Formatter با بیش از ۲ میلیون کاربر و به‌روزرسانی در ۲۸ مارس ۲۰۲۴، همین مشکل را در مروگر حل می‌کند:

• قالب‌بندی خودکار و رنگی؛ رشته‌ها، اعداد و کلیدها با ‎”syntax-highlight از هم متمایز می‌شوند.
• درخت تاشو (Collapsible Tree)؛ هر شاخه را باز و بسته کنید و با نگه‌داشتن “‎Ctrl/Cmd‎” هنگام کلیک، همهٔ گره‌های هم‌سطح را یک‌جا جمع کنید.
• حالت تاریک / روشن و پشتیبانی از صفحات بسیار حجیم بدون افت سرعت.
• لینک‌های قابل‌کلیک و دکمهٔ سریع برای جابه‌جایی بین نمای خام و نمای قالب‌بندی‌شده.

چطور از این افزونه استفاده کنیم:

 ۱. افزونه را از Chrome Web Store نصب کنید.
۲. صفحهٔ حاوی JSON را بارگیری یا یک فایل ‎.json‎ محلی را در تب جدید بکشید؛ فوراً نمای درختی ظاهر می‌شود.
۳. با کلیدهای جهت و ‎F‎ برای جست‌وجو، درخت را پیمایش کنید و مقدارهای پنهان را بیابید.

اگر مرتب با API سروکار دارید، چه در فرانت‌اند و چه هنگام دیباگ سرور، “JSON Formatter” زمانِ جست‌وجو و خطایابی را به حداقل می‌رساند و چشم شما را از اسکرول بی‌پایان نجات می‌دهد.

۳. Web Developer 

چه تازه‌کار باشید و چه کهنه‌کارِ فرانت‌اند، دیر یا زود به جایی می‌رسید که باید «همه‌چیز» یک صفحه را خاموش و روشن کنید تا بفهمید چه چیزی واقعاً مشکل دارد. افزونهٔ Web Developer به‌طور دقیق برای همین ساخته شده است: یک نوار ابزار جمع‌وجور با ده‌ها سوییچ و میان‌بُر که هر بخش صفحه (CSS، تصاویر، فرم‌ها، اسکریپت‌ها و …) را زیر ذره‌بین می‌برد. این همان پلاگین افسانه‌ای فایرفاکس است که حالا نسخهٔ رسمی کرومش بیش از یک‌میلیون نصب فعال دارد و همچنان در ۲۰۲۵ به‌روز می‌شود:

• غیرفعال‌کردن لحظه‌ای CSS برای تشخیص استایل‌های مشکل‌ساز یا تست دسترس‌پذیری در حالت بدون استایل.
• نمایش خطوط راهنما و ابعاد‌ عناصر هنگام هاور، برای چیدمان پیکسل‌ به‌ پیکسل.
• پاک‌کردن کش و کوکی یک صفحه با یک کلیک؛ خداحافظ Ctrl + Shift + Rهای پشت‌سر‌هم!
• تست واکنش‌گرایی با تغییر ابعاد ویوپورت و گرفتن اسکرین‌شات از همان‌جا.
• بررسی فرم‌ها: نمایش مقادیر پیش‌فرض، فعال‌کردن و غیرفعال‌کردن سریع فیلدها و تب‌بندی بین ورودی‌ها.

چطور از Web Developer استفاده کنیم؟

 ۱. Web Developer را از Chrome Web Store نصب و روی آیکن آچار کلیک کنید.
۲. پنجرهٔ ابزار باز می‌شود؛ برای مثال، روی CSS → Disable All Styles بزنید و ببینید ساختار خام HTML شما چه شکلی است.
۳. هر سوئیچ را تست کنید و موارد پرکاربرد را در منوی «Options» سنجاق کنید تا همیشه دم دست باشند.

نکتهٔ حرفه‌ای: با راست‌کلیک روی آیکن افزونه و انتخاب «Manage Extensions»، می‌توانید مجوزها را محدود کنید تا Web Developer فقط در سایت‌های کاری شما فعال باشد؛ این کار هم امنیت را بالا می‌برد و هم منابع مرورگر را آزاد نگه می‌دارد.

۴.Lighthouse 

وقتی نیاز دارید بدانید صفحهٔ وب‌سایتتان واقعاً چقدر سریع، دسترس‌پذیر و بهینه است، Lighthouse بهترین راه میان‌بُر است. این افزونهٔ رسمی گوگل با بیش از ۱ میلیون نصب فعال و آخرین به‌روزرسانی در ۲۳ آوریل ۲۰۲۴، یک کلید همه‌کاره روی نوار ابزار کروم اضافه می‌کند  کافی است روی آن بزنید تا ده‌ها تست خودکار روی صفحه اجرا شود و در عرض چند ثانیه یک گزارش مفید دریافت کنید:

• عملکرد (Performance): امتیازهای مهمی مانند “Largest Contentful Paint” و “Cumulative Layout Shift” را می‌دهد تا بفهمید سرعت واقعی لود و پایداری صفحه چقدر است.
• دسترس‌پذیری (Accessibility): مشکلات مربوط به کنتراست رنگ، ترتیب تب‌-نویگیشن یا “ARIA Roles” را فهرست می‌کند.
• بهترین شیوه‌ها و امنیت (Best Practices): خطاهای کنسول، لینک‌های ناامن و کتابخانه‌های قدیمی را گوشزد می‌کند.
• سئو (SEO): بررسی می‌کند آیا متا دیسکریپشن دارید، “robots.txt” معتبر است و صفحه به‌درستی با موبایل سازگار شده یا نه.
• PWA (در DevTools): شاخص‌های لازم برای اپلیکیشن پیش‌رونده‌ وب را می‌سنجد؛ از “Service Worker” تا “manifest”.

چطور از افزونه Lighthouse استفاده کنیم؟

 ۱. افزونه را از Chrome Web Store نصب کنید.
۲. صفحهٔ مورد نظر را باز کنید و روی آیکن فانوس کلیک کنید.
۳. دسته‌های مدنظر (Performance، SEO و …) را تیک بزنید و Generate report را بزنید.
۴. عددها سبز شدند؟ عالی! قرمز یا نارنجی است؟ روی هر آیتم کلیک کنید تا راهنمای دقیق رفع مشکل را ببینید. گزارش را می‌توانید به صورت HTML دانلود و برای هم‌تیمی‌ها بفرستید.

۵. Wappalyzer 

هر وقت کنجکاو شده‌اید «این سایت با چی ساخته شده؟»، کافی است روی آیکن Wappalyzer کلیک کنید تا دقیقاً همان لحظه فهرستی از فناوری‌های پشت صحنه را ببینید: از CMS و فریم‌ورک گرفته تا پایگاه داده، سرویس پرداخت و حتی شبکهٔ تحویل محتوا. نسخهٔ کروم این افزونه بیش از ۳ میلیون کاربر دارد و آخرین به‌روزرسانی آن در ۲۷ مه ۲۰۲۵ منتشر شده است، با امتیاز ۴٫۶ از ۵ در فروشگاه کروم یک افزونه پرطرفدار محسوب می‌شود:

• کاوش رقابتی: در یک نگاه می‌فهمید رقیب شما از چه ابزار تحلیلی یا پلتفرم فروش استفاده می‌کند.
• الهام تکنولوژیک: اگر به دنبال انتخاب فریم‌ ورک یا سرویس جدید هستید، دیدن بک اند استارتاپ‌های موفق ایده می‌دهد.
• عیب‌یابی سریع: گاهی اختلاف نسخهٔ کتابخانه یا سرور آشکار می‌شود و مسیر دیباگ کوتاه‌تر می‌گردد.
• پوشش گسترده: بیش از هزار فناوری را در دسته‌های متنوع شناسایی می‌کند؛ فراتر از صرفاً CMS یا فریم‌ورک 

چطور از افزونه Wappalyzer استفاده کنیم؟

 ۱. افزونه را از Chrome Web Store نصب و روی آیکنش پین کنید.
۲. هر وب‌سایتی را باز کنید و روی آیکن بزنید؛ پنجره‌ای با دسته‌بندی‌ها (Frameworks ،Analytics ،CDN و …) باز می‌شود.
۳. روی هر مورد کلیک کنید تا به صفحهٔ رسمی آن فناوری هدایت شوید یا جزئیات بیشتری ببینید.
۴. برای ذخیره یا به‌اشتراک‌گذاری گزارش، از منوی سه‌نقطه گزینه “Copy to clipboard” را انتخاب کنید.

نکتهٔ امنیتی: Wappalyzer فقط محتوای صفحه را برای تشخیص تکنولوژی‌ها می‌خواند و طبق سیاست حریم خصوصی اعلام کرده دادهٔ کاربران را به شخص ثالث نمی‌فروشد .با این حال، اگر روی پروژه‌های حساس کار می‌کنید می‌توانید افزونه را به‌صورت موقت غیرفعال کنید یا یک پروفایل کروم جدا برای مرور رقبا بسازید

۶. Gitpod  

گاهی پیش می‌آید روی لپ‌تاپی که هیچ ابزار توسعه‌ای ندارد قرار است باگ سریعی را بررسی کنید. Gitpod همین‌جا به کار می‌آید: دکمه‌ای به رابط “GitHub”، “GitLab”، “Bitbucket” و “Azure DevOps” اضافه می‌کند که در لحظه یک محیط کد نویسی آماده در فضای ابری برای همان ریپو می‌سازد. همراه با “VS Code”, “Docker” و هر چیزی که در فایل ‎.gitpod.yml‎ تعریف کرده‌اید. افزونه نسخه ‎۲.۴.۰‎ است، در ۱۷ آوریل ۲۰۲۵ به‌روزرسانی شده و اکنون حدود ۵۰ هزار کاربر و امتیاز ‎‎۴.۸/۵ دارد .

• راه‌اندازی صفر تا صد در ثانیه‌ها: دیگر نیازی به نصب “Node”، “Python” یا پیکربندی “DB” محلی ندارید؛ “Gitpod” همه‌چیز را در کانتینر از پیش ساخته بالا می‌آورد.
• حفظ یکدستی تیم: هر بار که هم‌تیمی شما روی ریپو کلیک کند دقیقاً همان محیط را می‌گیرد.
• پشتیبانی چند‌پلتفرمی: حتی روی “Chromebook” یا تبلت هم می‌توانید “Pull Request” را باز کنید، کد بزنید و تست بگذرانید.
• هوشمند‌سازی با Prebuilds: می‌شود تنظیم کرد تا پس از هر Push آخرین وابستگی‌ها و تست‌ها از قبل اجرا شوند و محیط آماده منتظر شما باشد.

چطور از افزونه Gitpod استفاده کنیم؟

 ۱. افزونه را نصب و آیکون آن را پین کنید.
۲. به هر ریپوی GitHub (یا GitLab/Bitbucket/Azure) بروید؛ کنار دکمه “Clone”، دکمه “Gitpod” تازه‌ای خواهید دید.
۳. روی آن بزنید تا در پنجرهٔ جدید یک محیط VS Code در مرورگر باز شود. با همان برنچ، متغیرهای محیطی و ترمینال فعال.
۴. تغییرات را “Commit/Push” کنید؛ همه چیز بی‌وقفه روی ریپو اصلی برمی‌گردد.

نکتهٔ امنیتی: Gitpod طبق سیاست حریم خصوصی اعلام کرده دادهٔ کاربران را به فروش نمی‌گذارد و به جز دسترسی خواندن/نوشتن روی ریپو، مجوز اضافی نمی‌خواهد؛ با این حال می‌توانید توکن دسترسی را محدود به Scopeهای موردنیاز کنید تا خیال‌تان راحت باشد. اگر همیشه آرزو داشتید «کاش همین الان یک ویرایشگر تمیز آماده بود»، Gitpod همان دکمهٔ جادویی است که صفحهٔ کد شما را ظرف چند ثانیه از مرورگر به یک IDE کامل تبدیل می‌کند.

۷. ColorZilla 

حتماً پیش آمده که در حین کدنویسی یا طراحی، رنگ دقیقی روی یک وب‌سایت ببینید و بخواهید بدون باز کردن فتوشاپ یا DevTools آن را فوراً در پروژهٔ خود استفاده کنید. ColorZilla دقیقاً همین درد را دوا می‌کند: یک قطره‌چکان پیشرفته که با یک کلیک، هر پیکسل روی صفحه را اسکن می‌کند و کد HEX / RGB / HSL آن را به حافظه می‌فرستد. این افزونه در حال حاضر بیش از چهار میلیون کاربر دارد، در ۲۲ مه ۲۰۲۴ به نسخهٔ ۴․۱ به‌روزرسانی شده و امتیاز ۴.۶ از ۵ ثبت کرده است. موارد زیر نیزنشانه‌ای از محبوبیت پایدار بین طراحان و برنامه‌نویسان است:

• Eyedropper زنده: رنگ هر نقطه از صفحه حتی عناصر شناور را می‌گیرد و بلافاصله در کلیپ‌بورد کپی می‌کند.
• Color Picker شبیه فتوشاپ: اگر دقت بیشتری می‌خواهید، پنل انتخاب رنگ داخلی با لغزنده‌های HSB / RGB در اختیارتان است.
• Gradient Generator: گرادیان‌های CSS را بصری بسازید و کد آماده را مستقیماً در استایل‌برگ بچسبانید
• Webpage Color Analyzer: یک پالت آماده از تمام رنگ‌های غالب صفحه استخراج می‌کند تا هماهنگی رنگی پروژه آسان شود.
• Palette History & Viewer: آخرین رنگ‌های برداشته‌شده را نگه می‌دارد و هفت پالت از پیش‌نصب‌شده برای الهام سریع ارائه می‌دهد.

چطور از ColorZilla استفاده کنیم؟

 ۱. “ColorZilla” را از “Chrome Web Store” نصب و آیکنش را پین کنید.
۲. روی آیکن کلیک کنید، حالت “Pick Color From Page” را بزنید و نشانگر را روی عنصر دلخواه ببرید؛ کد رنگ اتوماتیک در کلیپ‌بورد قرار می‌گیرد.
۳. برای ساخت گرادیان، در منوی افزونه روی “CSS Gradient Generator” کلیک کنید، رنگ‌های آغاز و پایان را انتخاب کنید و کد تولید شده را کپی کنید.

نکتهٔ حرفه‌ای: اگر در طراحی تِم تیره کار می‌کنید، ترکیب چشم‌نواز رنگ‌های صفحهٔ الهام‌بخش را با ابزار Color Analyzer بگیرید و خیلی سریع یک پالت منسجم برای UI بسازید. ColorZilla در چند ثانیه کاری می‌کند که قبلاً نیاز به چند ابزار جداگانه داشت.

۸. WhatFont 

وقتی حین وب‌گردی به تایپوگرافی چشم‌نوازی برمی‌خورید و می‌خواهید بدانید دقیقاً چه فونتی استفاده شده، WhatFont کار را در حد یک هاور ساده می‌کند. این افزونه رسمی بیش از ۲ میلیون کاربر دارد و در ۴ مارس ۲۰۲۴ به نسخه ‎۳.۲.۰‎ به‌روزرسانی شده است؛ امتیاز ‎۴.۰/۵‎ آن در “Chrome Web Store” نشان می‌دهد همچنان انتخاب اول طراحان و برنامه‌نویسان است. 

• تشخیص فوری: کافی است نشانگر را روی هر متن ببرید تا نام فونت، اندازه، وزن و رنگ در یک بالون کوچک نمایش داده شود.
• نمایش جزئیات سبک: با یک کلیک می‌توانید خانوادهٔ فونت، سرویس منبع (Google Fonts، Typekit و …) و حتی فایل CSS مربوطه را ببینید.
• بدون نیاز به DevTools: دیگر نیازی نیست در شبکهٔ شلوغ پنل “Elements” دنبال خصوصیات ‎font-family‎ بگردید؛ همه‌چیز یک‌جا آماده است.
• محافظ حریم خصوصی: طبق اعلام توسعه‌دهنده، افزونه هیچ داده‌ای از کاربران جمع‌آوری یا به فروش نمی‌رساند. 

چطور از WhatFont استفاده کنیم؟

 ۱. WhatFont را از Chrome Web Store نصب و آیکنش را در نوار ابزار پین کنید.
۲. روی آیکن کلیک کنید تا حالت شناسایی فعال شود؛ مکان‌نما به‌شکل ‎?f‎ درمی‌آید.
۳. نشانگر را روی هر متن ببرید تا اطلاعات فونت ظاهر شود؛ با یک کلیک جزئیات بیشتری می‌بینید.
۴. برای خروج، دوباره روی آیکن یا دکمهٔ Esc بزنید.

ترفند طراحی: هنگام طراحی یک صفحهٔ جدید، با WhatFont می‌توانید فونت‌های الهام‌بخش را ظرف چند ثانیه جمع کنید، سپس پالت رنگ آن‌ها را با ColorZilla کامل کنید و بلافاصله پیش‌نمایش ترکیب نهایی را در پروژهٔ خود ببینید.

جمع‌بندی: مرورگر شما، جعبه‌ابزار هوشمند شماست

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