توسعه‌دهندگان زمان زیادی را صرف استفاده از مرورگرها می‌کنند. از ماه فوریه سال 2021، حدود 63 درصد از کاربران اینترنت در سراسر دنیا گوگل کروم را به سایر مرورگرهای وب ترجیح داده‌اند. این موضوع اصلاً تعجب‌آور نیست چون گوگل کروم دارای افزونه‌هایی است که عملکرد مرورگر را بالا می‌برند. بنابراین دیگر لزومی به نصب نرم‌افزارها و ابزارهای اضافی نیست چون می‌توانید مجموعه‌ای از افزونه‌های خاص خودتان را ایجاد کنید. شما در هر جایی که باشید می‌توانید از این مجموعه استفاده کنید. تنها کاری که باید انجام دهید این است که با گوشی یا هر دستگاه دیگری وارد اکانت گوگل خود شده و داده‌ها را همگام‌سازی (sync) کنید. همچنین می‌توانید از هر دستگاهی که در آن کروم به طور پیش فرض نصب شده استفاده کنید.
ما از توسعه‌دهندگان در actiTIME خواستیم تا افزونه‌های محبوب‌شان را در کروم با ما به اشتراک بگذارند. سپس با کمک آن اطلاعات این مجموعه جامع از افزونه‌های توسعه‌دهندگی را گردآوری کردیم. پس بیایید بدون اتلاف وقت به افزونه‌های اشاره شده در این مقاله بپردازیم:
افزونه‌های کروم برای توسعه‌دهندگان
ابزارهای طراحی وب
این مورد یکی از افزونه‌های ضروری برای توسعه‌دهندگان است. این افزونه به شما این امکان را می‌دهد تا یک وبسایت را بدون در دست داشتن کد منبع آن ویرایش، ذخیره و یا به اشتراک بگذارید. با کمک این افزونه می‌توانید کدهای CSS، HTML و JS خود را در هر صفحه‌ای از وب ویرایش یا اضافه کنید. این افزونه به افراد فعال در زمینه طراحی وب کمک می‌کند. به عنوان مثال:
- فریلنسرها و آژانس‌هایی که می‌توانند وبسایت‌های خود را به موقع ویرایش کنند
- تیم‌های بازاریابی و فروشی که می‌توانند برنامه‌های خود را روی وبسایت مشتریان نصب کنند
- صاحبان وبسایت‌هایی که می‌توانند برنامه‌های وب خود را با استفاده از این افزونه‌ی مرورگر آزمایش کنند
این یک افزونه‌ی کروم است که در ابتدا برای Firefox توسعه یافته بود. خالق آن یعنی آقای نیکولاس هون در سال 2008 پشتیبانی از افزونه‌ی اصلی را متوقف کرد. با این حال یک کاربر در گیت‌هاب پورتی را به گوگل کروم ساخت. سپس آن را به شکل عمومی منتشر کرد و چندین نسخه با ویژگی‌های جدید به آن اضافه کرد.
همانطور که از اسمش پیداست، این افزونه خواص CSS هر آبجکتی که ماوس روی آن قرار گرفته را نشان می‌دهد. این افزونه خواص فونت، رنگ و موقعیت را نیز نشان خواهد داد.
شما با کمک این افزونه‌ی کروم می‌توانید فونت‌های استفاده شده در صفحات وب را شناسایی کنید. وقتی روی یک متن خاص قرار می‌گیرید، پنجره‌ای برای شما باز خواهد شد که در آن نوع فونت، اندازه و ارتفاع خطوط نمایش داده می‌شود. این افزونه سرویس‌های مربوط به ارائه‌ی فونت‌های وب را نیز تشخیص می‌دهد. همچنین از Typekit و Google Font API نیز پشتیبانی خواهد کرد.
این افزونه یک راه‌حل ساده برای توسعه‌دهندگانی است که صفحات مورد علاقه‌ی خود را به عنوان نمونه نگه می‌دارند. مثلاً فرض کنید وارد یک وبسایت با فونت بسیار زیبایی شدید، لیست فونت‌های خود را چک می‌کنید اما نمی‌توانید این فونت زیبا را پیدا کنید. اینجاست که استفاده از چنین افزونه‌ای واقعاً به درد شما خواهد خورد.
این افزونه اندازه‌ی پنجره‌های مرورگر را تغییر می‌دهد تا رزولوشن‌های مختلفی را در اختیار کاربر بگذارد. ابتدا افزونه را باز کنید، سپس یک دستگاه را از لیست انتخاب کنید. در این مرحله می‌توانید ظاهر احتمالی طرح‌بندی خود را در دستگاه انتخاب شده مشاهده کنید.
این افزونه قابلیت شخصی‌سازی دارد و شما می‌توانید موارد دلخواه خود را اضافه، ویرایش و یا حذف کنید. از این افزونه در ابزارهای مهم خود استفاده کنید.
ابزارهای توسعه‌ی وب
این افزونه را حتماً باید در جعبه ابزار خود داشته باشید چون در Chrome Web Store بیش از 1 میلیون کاربر دارد. Web Developerمجموعه‌ای از ابزارهای مفید و مختصِ توسعه‌ی وب را به مرورگر شما اضافه می‌کند که به کوکی‌ها، فرم‌ها، تصاویر، CSS و غیره مربوط می‌شود. به عنوان مثال با کمک این افزونه می‌توانید جاوااسکریپت را غیرفعال کنید، اندازه پنجره را تغییر دهید و اطلاعات مربوط به صفحه‌ی متا تگ را مشاهده کنید.
این افزونه‌ی کروم به شما در شناسایی مشکلات وبسایت کمک می‌کند. همچنین با کمک آن می‌توانید عملکرد وبسایت، قابلیت استفاده، SEO، کیفیت کدها، قابلیت دسترسی، امنیت و سایر موارد را نیز تحت بررسی داشته باشید. می‌توانید قبل از انتشار صفحه‌ی وبسایت خود از این افزونه استفاده کنید تا مطمئن شوید که همه چیز به خوبی سر جای خود قرار گرفته است.
بنابراین می‌توانید از این افزونه به عنوان یک یادآور برای پیشبرد توسعه‌ی وب یا شناسایی مشکلات وبسایت استفاده کنید.
این افزونه یکی از مفیدترین و قدرتمندترین ابزارها برای تقویت جریان کاری در توسعه‌ی Redux است. یکی از مزایای استفاده از چنین افزونه‌ای این است که ردیابی اقدامات و تغییرات را آسان می‌کند.
Redux یکی از معتبرترین کتابخانه‌های مدیریت State برای برنامه‌های بزرگ React است. نحوه‌ی درست تنظیم این افزونه در محیط خود را به خوبی یاد بگیرید.
اگر تا به حال تجربه‌ی کار کردن با کد JSON را داشته باشید، می‌دانید که چقدر ناخوانا و بد هستند. این افزونه سینتکس را در فایل‌های JSON آنلاین و محلی هایلایت می‌کند. به همین خاطر کدها از نظر بصری دلپذیرتر و ساده‌تر می‌شوند.
JSON Viewer یک افزونه‌ی بسیار سبک است که به شما اجازه می‌دهد تا JSON را به طور مستقیم در گوگل کروم مشاهده و ویرایش کنید.
این افزونه چیزی مابین یک کتابخانه و یک فریمورک است. به شما امکان ویرایش داده‌های مولفه‌ها، بارگیری مولفه‌ها در DOM، ردیابی رویدادهای سفارشی، اشکال‌زدایی Vuex و بازگشت به stateهای قبلی را می‌دهد.
بهترین نکته در مورد این افزونه این است که برای مبتدیان و توسعه‌دهندگان باتجربه به یک اندازه قابل دسترسی است. کاربران ماهر می‌توانند مطابق با نیازهای خود آن را تغییر دهند.
این افزونه‌ی Chrome DevTools برای کتابخانه‌ی React JavaScript به منظور ساخت رابط کاربری ایجاد شده است. این افزونه مجموعه‌ای اضافی از ویجت‌های مخصوص React را برای کمک به شما در روند توسعه ارائه می‌دهد.
این افزونه در عملکرد، بهبود تجربه‌ی ناوبری، بهبود فنی و بصری دستاوردهای قابل توجهی داشته که به نوبه‌ی خود باعث آسان‌تر شدن اشکال‌زدایی می‌شود.
این افزونه تمام فعالیت‌های AJAX را به DevTools Console وارد می‌کند. ما به کمک این افزونه می‌توانیم تماس‌های AJAX را بررسی کنید. تماس‌ها در یک پنجره با تمام ورودی‌ها نشان داده می‌شوند. IT به توسعه‌دهندگان اجازه می‌دهد تا به راحتی بتوانند اطلاعات مربوط به درخواست‌ها مثل وضعیت HTTP، زمان پاسخگویی و اندازه را مشاهده کنند.
داده‌های به ثبت رسیده شامل زمان پاسخگویی، اندازه و وضعیت، لینک منبع AJAX با تمام پارامترهای ورودی، جزئیات پاسخ و سایر موارد است.
تجزیه و تحلیل وبسایت
این افزونه می‌تواند ابزارها و تکنولوژی‌های حاضر در صفحات وب را شناسایی کند که شامل بیش از هزار سرویس وب مختلف، CMS، ابزارهای آنالیز، پلاگین‌ها، کتابخانه‌های جاوااسکریپت و موارد دیگر است.
شما در وبسایت رسمی مربوط به این افزونه می‌توانید هر وبسایتی را جستجو کرده و فناوری‌های استفاده شده در آن را ببینید.
این افزونه‌ی ساخته شده توسط گوگل، وظیفه‌ی بررسی عملکرد وبسایت، قابلیت دسترسی، برنامه‌های وب پیشرفته، SEO و غیره را بر عهده دارد. مثلاً تصور کنید که می‌خواهید یک صفحه را بازرسی کنید، ابتدا افزونه را انتخاب کرده و روی دکمه‌ی « ایجاد ریپورت» کلیک کنید. بعد از این مرحله یک پنجره جدید با نتایج کیفیت صفحه برای شما باز خواهد شد.
همچنین می‌توانید این افزونه را در Chrome DevTools یا به عنوان یک ماژول Node اجرا کنید. شما تنها با چند کلیک می‌توانید از این قابلیت بهره‌مند شوید.
این افزونه در صفحه به دنبال لینک‌های سالم و خراب می‌گردد. شما با کمک این افزونه می‌توانید فرآیند تعمیر لینک‌ها را اتوماتیک کنید.
صفحه‌ی خود را بارگیری کرده و سپس آیکون را انتخاب کنید. حالا یک پاپ‌آپ به همراه لینک برای شما ظاهر می‌شود. فرآیند اسکن کردن بسته به اندازه‌ی صفحه شما می‌تواند چند ثانیه طول بکشد.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید