ابزارهای توسعه دهنده (Developer tools) یکی از بخشهای مفید و حرفهای برای تمام کاربران و به خصوص برای توسعه دهندگان وب است که در اغلب مرورگرهای وب امروزی تعبیه شده است. این بخش را میتوانید با کمک روشهایی که در ادامه با آنها آشنا میشوید در نسخه های دسکتاپ اغلب مرورگرهای وب مانند موزیلا فایرفاکس، گوگل کروم، مایکروسافت اج و … به آسانی پیدا کنید.
بخش ابزارهای توسعه دهنده در مرورگر وب چیست و چه قابلیت هایی در اختیار شما قرار میدهد؟
اگر توسعه دهنده یا طراح وب هستید یا مایلید کد HTML، استایل های CSS یا کد جاوااسکریپت صفحه های وب را مشاهده کنید یا آنها را دستکاری کنید بخش ابزارهای توسعه دهنده امکانات جذابی در اختیار شما قرار میدهد. این بخش همانطور که از نامش برمیآید برای مسائل مرتبط با توسعه وب ایجاد شده است. به عنوان مثال شما میتوانید با کمک این بخش، قسمتی از محتوای صفحه وب فعلی را تغییر دهید، رنگ یک المان را عوض کنید یا یک قطعه کد JavaScript را روی صفحه اجرا کنید.
تست و اشکال زدایی کد، دسترسی به کنسول (برای اجرای کدهای JavaScript و …)، بخش وضعیت مصرف مموری و شبکه، سنجش کارایی صفحه (مانند زمان بارگیری و …) و بخش ایمولاتور دستگاه ها (برای مشاهده وضعیت و ظاهر یک صفحه وب روی دستگاه های مختلف مانند گوشی های هوشمند و تبلت ها) از جمله دیگر قابلیت های Developer tools است.
فراموش نکنید بخش Developer tools در هر زبانه یا پنجره مرورگر روی صفحه وب فعلی کار میکند.
نحوه ورود به قسمت ابزارهای توسعه دهنده در مرورگرهای وب رایج
برای دسترسی به ابزارهای توسعه دهنده در مرورگرهای وب متداول مانند موزیلا فایرفاکس، گوگل کروم و مایکروسافت اج (نسخه های دسکتاپ) میتوانید از روشهای زیر استفاده کنید:
روش اول: از طریق میانبرهای صفحه کلید
شما میتوانید برای ورود به قسمت ابزارهای توسعه دهنده، میانبر صفحه کلید Ctrl+Shift+I یا کلید F12 را فشار دهید.
روش دوم: از طریق منوی مرورگر
در مرورگر کروم و اج برای مراجعه به بخش ابزارهای توسعه دهنده ابتدا به منوی مرورگر، بخش More tools مراجعه کنید. سپس گزینه Developer tools را انتخاب کنید. در مرورگر فایرفاکس نیز میتوانید پس از مراجعه به منو از بخش More tools گزینه Web Developer Tools را انتخاب کنید.
روش سوم: از طریق منوی راست کلیک
در این روش برای باز کردن بخش Developer tools میتوانید روی بخشی از صفحه وب راست کلیک کنید. سپس از منوی نمایان شده گزینه Inspect را انتخاب کنید. در این روش علاوه بر باز شدن بخش Developer tools، کد مربوط به المانی که روی آن راست کلیک کردهاید نیز نمایان میشود.
با انجام هرکدام از روشهای فوق، Developer tools در قالب بخشی مشابه با تصویر زیر داخل مرورگر نمایان میشود:
