درآمدی بر برخی قابلیت‌های Developer Tools گوگل کروم

درآمدی بر برخی قابلیت‌های Developer Tools گوگل کروم

امروزه مرورگرها نقشی فراتر از یک نمایش‌دهنده صفحات وب پیدا کرده‌اند و با امکاناتی که در اختیار کاربران خود، به‌ ویژه دولوپرها، قرار می‌دهند به یکی از پایه‌های توسعهٔ وب مبدل شده‌اند که در این میان، گوگل‌ کروم توانسته است به یکی از ارکان مهم توسعهٔ وب در سطح جهان تبدیل شود. به‌ طور قطع دیگر مرورگرها نظیر سافاری، فایرفاکس، اِج و ... هم می‌توانند توسط توسعه‌دهندگان وب مورد استفاده قرار گیرند، اما کروم دارای ویژگی‌های زیادی است که به‌ سادگی نمی‌توان از آن‌ها گذشت! حتی می‌توان گفت ابزارهایی که گوگل‌ کروم به‌ ویژه در حالت پیش‌فرض در اختیار دولوپرها قرار می‌دهد، تا حدودی توانسته گوی سبقت را از رقبایش برباید (برای کسب اطلاعات بیشتر در این باره، می‌توانید به لینک Chrome DevTools در سایت رسمی دولوپرهای گوگل مراجعه نمایید.)

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

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

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

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

همچنین اگر از لایبرری‌ها و فریمورک‌های خاصی استفاده می‌کنید که به‌ صورت پیش‌فرض در گوگل‌ کروم وجود ندارند، به‌ راحتی می‌توانید آن‌ها را از سرویس پلاگین‌های خودِ گوگل‌ کروم تهیه کرده و نصب نمایید. برای مثال، چنانچه توسعه‌دهندهٔ ریئکت هستید، می‌توانید از React Developer Tools استفاده نمایید.

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

از بهترین نوشته‌های کاربران سکان آکادمی در سکان پلاس


online-support-icon