آشنایی کار با ابزارهای توسعه inspect element و developer tools

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

همه مرورگرها یک Inspector درون خودشون دارن. ظاهر این Inspector ها با هم دیگه متفاوته ولی در کل عملکرد یکسانی دارن. نام inspector گوگل کروم developer tools و نام inspector فایرفاکس inspect element است. این ابزار به توسعه دهندگان اجازه میدهد بصورت آنلاین عیب یابی داشته باشند. این ابزار تگ های html و CSS و کدهای javascript و نحوه اجرای کدها را نشان میدهد. با استفاده از این ابزارهای توسعه شما میتوانید کدهای html و css و javascript را برای هر صفحه وب ویرایش کنید تا بصورت زنده تغییرات را مشاهده کنید(تنها روی کامپیوتر و مرورگر خود این تغییرات را میبینید).

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

آشنایی با تب‌های ابزار های توسعه

میتوانید کار را با فشردن کلید های ترکیبی CTRL+Shift+I شروع کنید. یا به جای اینکار میتوانید روی صفحه وب کلیک راست کنید و روی گزینه Inspect کلیک کنید. پنجره مرورگر شما به دو قسمت تقسیم میشود و پنجره پایین صفحه، کد صفحه وب را نشان میدهد. از سمت چپ به بررسی گزینه ها می پردازیم. اولین گزینه سمت چپ گزینه selector است. با کلیک روی این پنجره شما می توانید عنصری دلخواه را روی صفحه وبی که در آن هستید انتخاب کنید و کدهای html و css مربوط به همان المان را مشاهده کنید.

inspector یا element

پنجره inspect به دو قسمت تقسیم میشود. در قسمت سمت چپ کدهای HTML را که برای این صفحه نوشته شده میبینید. در سمت راست، عناصر و کلاس های CSS را مشاهده میکنید. هردو قسمت کدهای HTML و CSS در inspect قابل ویرایش هستند. برای انجام این کار شما میتوانید روی هر قسمتی از html که میخواهید ویرایش کنید دوبار کلیک کنید. همچنین برای ویرایش هر قسمت از css نیز میتوانید دوبار روی آن کلیک کنید. برای افزودن استایل های سفارشی نیز میتوانید روی آیکون + در قسمت بالای کادر CSS کلیک کنید. تغییرات روی html و css فورا روی صفحه مرورگر اعمال میشود و شما میتوانید آنها را ببینید.

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

console

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

بخش console دو مدل از خطاها، یکی خطاهای syntax و دیگری network messageها را به ما نشان می دهد. خطاهای syntax که مشخص است. خطاهای دستوری در کدنویسی شما هستند. خطاهای network message هم آن دسته از خطاهایی هستند که مثلا سرور هنگام خواندن کدهای شما یکی از فایلهایی که در کدنویسی از آن استفاده کردید را نتواند پیدا کند.

بخش کنسول قابلیت های دیگری هم دارد. در پایین این بخش یک علامت << مشاهده می‌کنید. جلوی این علامت شما میتوانید یکسری دستور بنویسید. یکی از استفاده های آن انجام محاسبات ریاضی است. مثلا میتوانید بنویسید 20/3 و enter بزنید و پاسخ آن را مشاهده کنید. یکی از کاربردهای مهم این بخش کنسول برای زمانی هم هست که شما می خواهید مثلا عکس های موجود در یک صفحه را که خوشتان آمده را دانلود کنید. در اینجا با نوشتن دستور (“img”)$$ به تمامی تگ‌های img این برگه دسترسی پیدا می کنید و می توانید با href آن‌ها را دانلود کنید. میتوانید با دستور (“a”)$$ تمام تگهای a صفحه را ببینید.

کنسول یک قابلیت دیگر هم دارد، در این بخش شما میتوانید زمان اجرای هر قطعه کد js را مشاهده کنید. برای این کار شما باید قطعه کدی که مد نظرتان هست رو بین دو قطعه کد console.time(“start time”) و console.timeEnd(“endtime”) قرار دهید و در بخش کنسول زمان اجرای آن را مشاهده کنید.

sources یا debugger

این تب به شما تمامی اطلاعات مربوط به تصاویر، کدهای js، html و css را به شما می‌دهد. اگر تصویری را خواستید دریافت کنید می‌توانید روی آن کلیک راست کنید گزینه inspector را بزنید و در این تب آن را ببینید.

network

این تب که در هر دو مرورگر فایرفاکس و کروم به همین نام است، requestها و responseهای بین مرورگر و سرور را نمایش می‌دهد. در این تب از ابزارهای توسعه می‌توانید هر فایلی که بین سرور و مرورگر رد و بدل شده را مشاهده کنید. همچنین load time هرکدام از این فایلها هم قابل مشاهده است. از دیگر گزینه های آن غیرفعال کردن کش مرورگر (disable cache) است.

یکی دیگر از کاربردهای جالب تب network این است که شما می توانید سرعت بارگزاری سایت خود را با سرویس‌های اینترنتی متفاوت مشاهده کنید. شاید سرعت اینترنت شما خیلی بالا باشد و سایت به سرعت برای شما لود شود. ولی شما باید توجه داشته باشید فقط شما نیستید که از سایت استفاده می‌کنید و سرعت لود سایت خود را باید از دید بقیه کاربران که اینترنت ضعیفی دارند مشاهده کنید. برای این کار طبق تصویر زیر روی گزینه no throttling کلیک کنید و لود سایت خود را با سرویس اینترنت های دیگر هم مشاهده کنید.

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

performance

این تب هم عملکردی مانند network دارد و تمامی توابع و زمان اجرای آن ها را به ما می‌دهد.

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