لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
چرا هر دولوپری باید به یک کاربر حرفه‌ای گوگل­ کروم تبدیل شود؟

چرا هر دولوپری باید به یک کاربر حرفه‌ای گوگل­ کروم تبدیل شود؟

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

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

صفحات وب از کنار هم قرار گرفتن تگ‌های HTML ساخته شده‌اند و هر یک از این تگ‌ها عنصری از صفحه را ایجاد می‌نمایند؛ در کروم اگر بر روی عنصری از صفحه کلیک راست کنید و گزینهٔ Inspect را از منوی باز شده انتخاب نمایید، ساختار و تگ‌های HTML تشکیل دهندهٔ آن قسمت در پنجره‌ای به نام جعبه‌ابزار دولوپر (Developer Tools) در پایین صفحهٔ نمایش به شما نشان داده خواهد شد.

بااستفاده از این ویژگی شما می‌توانید به اطلاعات بیشتری دربارهٔ قسمت مشخصی از صفحه که مدنظر دارید دسترسی پیدا کنید؛ همچنین با کلیک بر روی تگ مربوطه، می‌توانید تغییراتی در محتوای آن ایجاد کرده و نتیجهٔ آن‌را به‌صورت درلحظه در صفحه‌ٔ نمایش ببینید (برای انجام تغییراتی از این دست، می‌توانید با کلیک راست بر روی تگ مورد نظر و انتخاب گزینهٔ Edit as HTML نیز موارد دلخواه را اعمال کنید).

در کادر سمت راست، کدهای CSS به کار رفته در صفحه برای شما نشان داده می‌شوند؛ نیاز به توضیح ندارد که آن‌ها نیز قابل تغییر بوده و نتایج درلحظه اعمال می‌شوند.

در سال 2016، تعداد کاربران موبایل از کاربران دسکتاپ پیشی گرفت و امروزه مفهوم Mobile First در طراحی وب، بسیار بااهمیت می‌باشد؛ برای مشاهدهٔ عملکرد وب‌سایت در ابعاد مختلف صفحه‌ نمایش، می‌توانید از آیکان موبایل (بالا سمت چپ) در Developer Tools گوگل کروم استفاده کنید و نتیجهٔ نمایش صفحهٔ موردنظر را در ابعاد مختلف موبایل از آیفون گرفته تا گلکسی و نکسوز و ... ببینید.

بسیاری از زبان‌های برنامه‌نویسی دارای خصوصیت Read-Evaluate-Print-Loop یا به‌اختصار REPL می‌باشند، به این معنی که می‌توان یک خط کد را در میان برنامهٔ نوشته شده بدون نیاز به تغییرات ساختاری اضافه نمود و آن‌را به‌سرعت اجرا کرد؛ در کروم نیز با انتخاب سربرگ Console می‌توانید از  قابلیت JavaScript REPL استفاده نموده و نتیجهٔ اجرای کدهای جاوااسکریپت خود را در این قسمت ببینید.

اگر از لایبرری‌ها و فریمورک‌های خاصی استفاده می‌کنید که به‌صورت پیش‌فرض در گوگل‌ کروم وجود ندارند، به‌راحتی می‌توانید آن‌ها را از سرویس پلاگین‌های خود گوگل‌ کروم تهیه کرده و نصب نمایید. برای مثال، چنانچه توسعه‌دهندهٔ React هستید می‌توانید از React Developer Tools Chrome Add-on استفاده نمایید (البته برای سایر فریمورک‌ها نظیر Angular نیز پلاگین‌هایی اختصاصی وجود دارد).

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

منبع


علی فلاحی