چگونه از ابزار توسعه دهنده مرورگر وب استفاده کنیم

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

در یک محیط آزمایشی شما می‌توانید از طریق جادوی طراحی تعاملی و شبیه سازهای تعبیه شده نحوه کارکرد یک اپلیکیشن یا صفحه وب در مرورگرهای مختلف و همینطور دستگاه‌ها و پلتفرم‌های مختلف را بازتوليد کنید. بهترین بخش ماجرا این است که شما می‌توانید تمام این کارها را مستقیما از داخل مرورگر انجام دهید. Web Browser Developer Tools ویژگی منحصر به فرد گنجانده شده در اکثر مرورگرهای وب مطرح است که انجام این کارها را ممکن می‌سازد.

راهنمای زیر به شما در زمینه نحوه دسترسی به این ابزارهای ویژه توسعه دهنده در چند مرورگر سرشناس کمک می‌کند.

گوگل کروم

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

1. روی دکمه منوی اصلی کروم که از سه خط افقی تشکیل شده و در گوشه سمت راست بالای صفحه مرورگر قرار دارد کلیک کنید.
2. وقتی منوی کرکره‌ای ظاهر شد، نشانگر ماوس خود را روی گزينه More tools ببرید.
3. حالا باید یک زیر منو ظاهر شده باشد. از گزينه‌های موجود در آن Developer tools را انتخاب کنید. همچنین شما می‌توانید از طریق این کلید میانبر صفحه کلید مستقیما Developer tools را باز کنید: در ویندوز میانبر CTRL+SHIFT+I و در Mac OS X میانبر ALT(OPTION)+COMMAND+I
4. حالا باید رابط Chrome Developer Tools نمایش داده شده باشد. بر اساس نسخه کروم شما، رابط کاربری که شما مشاهده خواهید کرد کمی‌ متفاوت است. صفحه اصلی Chrome Developer Tools معمولا در پایین یا سمت راست صفحه نمایش ظاهر می‌شود و شامل این تب‌ها است:
   Elements: امکان بررسی کدهای CSS و HTML و همینطور ویرایش CSS را به صورت بلادرنگ فراهم می‌کند و شما می‌توانید تغییرات اعمال شده را همان لحظه مشاهده کنید.
   Console: کنسول جاوا اسکریپت کروم به شما اجازه می‌دهد فرامین را مستقیم وارد کرده و کدها را دیباگ کنید.
   Sources: به شما اجازه می‌دهد کدهای جاوا اسکریپت را از طریق یک رابط گرافیکی قدرتمند دیباگ کنید.
   Network: اطلاعات دقیقی را در مورد هر یک از عملیات‌های مربوط به یک اپلیکیشن یا صفحه فعال طبقه بندی کرده و نمایش می‌دهد.
   Timeline: امکان تجزیه و تحلیل عمیق از هر نوع فعالیتی که در در مرورگر رخ می‌دهد را فراهم می‌کند.
5. علاوه بر این بخش‌ها شما می‌توانید از طریق آیکون‌های موجود در سمت راست تب Timeline به ابزار زیر دسترسی داشته باشید:
   Profile: به دو بخش CPU profiler و Heap profiler تقسیم بندی می‌شود و اطلاعات جامعی در مورد مصرف حافظه و زمان اجرای کلی اپلیکیشن یا صفحه فعال فراهم می‌کند.
   Security: مشکلات مربوط به گواهینامه و سایر مسائل مرتبط با امنیت را در مورد اپلیکیشن یا صفحه فعال اعلام می‌کند.
   Resources: اینجا همان جایی است که شما می‌توانید کوکی‌ها، فضای لوکال، کش اپلیکیشن، و سایر منابع داده محلی استفاده شده توسط اپلیکیشن یا صفحه وب جاری را بررسی کنید.
   Audits: روش‌هایی را برای بهینه سازی زمان بارگیری و عملکرد کلی یک صفحه یا اپلیکیشن ارائه می‌کند.
6. Device Mode به شما اجازه می‌دهد تا صفحه فعلی را در یک پنجره شبیه سازی شده از آنچه در بیش از چندین دستگاه مختلف از جمله چندین مدل شناخته شده از دستگاه‌های اندروید و iOS مثل آی‌فون، آی‌پد و گلکسی سامسونگ قابل مشاهده است را تماشا کنید. همچنین شما این امکان را خواهید داشت تا رزولشن‌های مختلف از صفحه نمایش را متناسب با نیاز خود شبیه سازی کنید. برای فعال و غیرفعال كردن Device Mode آیکون گوشی موبایل موجود در سمت چپ تب Elements را انتخاب کنید.
7. شما می‌توانید ظاهر و شیوه نمایش developer tools را از طریق دکمه منو (سه نقطه عمودی روی هم) موجود در منتهی الیه سمت راست تب‌های موجود سفارشی سازی کنید. با گزینه‌های موجود در این منو  شما می‌توانید محل ظاهر شدن این ابزار را تغییر دهید، ابزارهای مختلف را ظاهر یا پنهان کنید و گزینه‌های تنظیمات پیشرفته را فعال و غیرفعال كنيد.

موزيلا فایرفاکس

بخش Web Developer فایرفاکس شامل ابزار مختلفی برای طراحان، توسعه دهندگان و آزمايش کنندگان محتوای وب است.

1. روی دکمه منوی اصلی فایرفاکس (سه خط افقی) موجود در گوشه سمت راست بالای پنجره مرورگر کلیک کنید.

1. از گزينه‌های موجود در این منو آیکون با برچسب Developer را انتخاب کنید. با این کار منوی Web Developer ظاهر خواهد شد. توجه داشته باشید که هر کدام از گزينه‌های موجود در این منو به یک میانبر صفحه کلید مجهز است.
   Toggle Tools: رابط developer tools را نمایش داده یا پنهان می‌کند. محل قرارگیری آن نیز معمولا در پایین پنجره مرورگر است. شما می‌توانید از طریق این کلید میانبر صفحه کلید مستقیما Developer tools را باز کنید: در ویندوز میانبر CTRL+SHIFT+I و در Mac OS X میانبر ALT(OPTION)+COMMAND+I
   Inspector: به شما اجازه می‌دهد کدهای CSS و HTML صفحه فعال را بررسی و دستکاری کنید.
   Web Console: به شما امکان می‌دهد تا فرامین جاوا اسکریپت را در صفحه فعال اجرا کنید. همچنین مجموعه متنوعی از داده‌های ثبت شده شامل هشدارهای امنیتی، درخواست‌های شبکه، پیغام‌های CSS و غیره نیز در این بخش قابل دسترس است.
   Debugger: دیباگر جاوا اسکریپت به شما اجازه می‌دهد نقص‌های بوجود آمده توسط گره‌های DOM، منابع خارجی و غیره را شناسایی و برطرف کنید. این قابلیت از دیباگ کردن از راه دور پشتیبانی می‌کند.
   Style Editor: به شما امکان می‌دهد تا stylesheetهای جديد بسازید و آنها را به صفحه وب جاری الصاق کنید و یا stylesheetهای موجود را ویرایش کرده و تنها با یک کلیک تغییرات اعمال شده را در مرورگر مشاهده کنید.
   Performance: وضعیت عملکرد صفحه جاری، نرخ تبادل داده، مدت زمان و وضعیت  اجرای جاوا اسکریپت و نظاير این را در اختیار شما می‌گذارد.
   Network: درخواست شبکه آغاز شده توسط مرورگر را به همراه متد مربوطه، دامنه مبدا، نوع و اندازه فهرست می‌کند.
   Developer Toolbar: یک مفسر خط فرمان تعاملی را باز می‌کند. فرمان help را در این مفسر وارد کنید تا فهرستی از فرامین موجود و نحوه کارکرد هر کدام در اختیار شما قرار گیرد.
   WebIDE: امکان ساخت و اجرای اپلیکیشن‌های وب از طریق طریق Firefox OS یا Firefox OS Simulator را فراهم می‌کند.
   Browser Console: کاری شبیه به همان Web Console را انجام می‌دهد که در بالا توضیح داده شد. با این تفاوت که در اینجا تمام داده‌های برگشتی مربوط به کل اپلیکیشن فایرفاکس (شامل افزونه‌ها و توابع سطح مرورگر) می‌شود و تنها مربوط به صفحه وب فعال نیست.
   Responsive Design View: به شما اجازه می‌دهد تا در همان لحظه یک صفحه وب را با رزولشن، صفحه بندی و اندازه صفحه نمایش‌های متفاوت مشاهده کنید. به این شکل یک شبیه سازی از انواع مختلفی از دستگاه‌ها از جمله تبلت‌ها و تلفن‌های هوشمند انجام خواهد شد.
   Eyedropper: کد هگزادسیمال مربوط به رنگ پیکسل‌های انتخاب شده را در اختیار شما می‌گذارد.
   Scratchpad: این امکان را در اختیار شما قرار می‌دهد تا از طریق یک پنجره Firefox شناور تکه‌هایی از کدهای جاوا اسکریپت را نوشته و پس از یکپارچه سازی با صفحه موجود آن را اجرا کنید.
   Page Source: این گزینه تنها کد منبع صفحه فعال را به شما نمایش می‌دهد.

مایکروسافت اج / اینترنت اکسپلولر

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

1. روی دکمه منوی More actions که به شکل سه نقطه کنار هم موجود در گوشه سمت راست بالای صفحه مرورگر قرار دارد کلیک کنید. بعد از باز شدن این منو گزینه Developer Tools را انتخاب کنید.
2. با انتخاب این گزینه رابط ابزار توسعه در پایین پنجره مرورگر ظاهر می‌شود. ابزار موجود در این رابط شامل موارد زیر است.
   DOM Explorer: به شما اجازه می‌دهد تا stylesheetها و کدهای HTML موجود در صفحه فعال را ویرایش کرده و نتیجه این تغییرات را همان لحظه مشاهده کنید. در صورت لزوم می‌توانید از امکان تکمیل خودکار کد IntelliSense نیز استفاده کنید.
   Console: امکان دریافت اطلاعات مرتبط با دیباگ کردن از جمله شمارنده، تایمر، ردیاب و پیام‌های سفارشی را از طریق یک API یکپارچه فراهم می‌کند. همچنین به شما اجازه می‌دهد کدهای خود را به صفحات وب فعال تزریق کنید و مقدار تعیین شده برای هر یک از متغیرها را به صورت بلادرنگ تغییر دهید.
   Debugger: امکان دیباگ کردن بخش‌های جداگانه از کدهای شما را خط به خط در زمان اجرای آنها فراهم می‌کند.
   Network: تمام درخواست‌های شبکه انجام گرفته توسط مرورگر در زمان بارگیری صفحه را به همراه جزئیاتی در مورد نوع محتوا، پهنای باند استفاده شده و نوع پروتکل را فهرست می‌کند.
3. برای جدا کردن رابط developer tools از پنجره مرورگر و نمایش آن به صورت یک پنجره مجزا روی دکمه دارای نماد دو مستطيل روی هم کلیک کرده یا از کلیدهای ترکیبی CTRL+P روی صفحه کلید استفاده کنید. با فشردن دوباره کلیدهای CTRL+P پنجره ابزار به جایگاه اولیه خود بازمی‌گردد.