ابزارInspector چیست؟ روش استفاده از Inspector در مرورگر کروم و فایرفاکس


نویسنده:
دوشنبه 13 بهمن 1399
ابزار inspector چیست؟

ابزارInspector چیست؟

ابزاری به نام developer tool یک ابزار کاربردی است که در مرورگرهای مطرح وجود دارد. به کمک این ابزار می‌توان به کدهای HTML، CSS و JavaScript صفحات وب دسترسی داشت. inspector یک ابزار درونی برای نمایش کدها در developer tools است. منتها بسیاری از افراد ابزار developer tool مرورگرها را با نام Inspector می‌شناسند.

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

نحوه باز کردن ابزار developer tool در کروم و فایرفاکس

برای باز کردن این ابزار چند روش وجود دارد. شما از هر روشی که راحت‌تر هستید، استفاده کنید تا به این ابزار دسترسی پیدا کنید.

  • روش اول: روی یک صفحه از وب کلیک راست کنید، سپس روی گزینه‌ی Inspect کلیک کنید.
  • روش دوم: در یک صفحه از وب، کلید F12 را بفشارید!
  • روش سوم: کلیدهای ترکیبی ctrl، shift و I را بزنید.

به کمک این روش‌ها باید در قسمت پاییین صفحه، یک بخش جدید باز شود. این بخش مربوط به همین ابزارInspector است.

همچنین بخوانید: روش پاک کردن کش در مرورگرهای مختلف


نمونه از کاربرد بخش Inspector

۱- بررسی کد عناصر در صفحه وب

ابتدا روی علامت موس کلیک کنید تا آبی شود. حالا اشاره‌گر موس را روی صفحه وب ببرید و روی یک بخش از صفحه کلیک کنید.

همانطور که در تصویر مشاهده می‌‌کنید در بخش Elements (در فایرفاکس به نام inspector) کد بخش انتخابی شما مشخص می‌شود. این قسمت برای طراحان وب بسیار کاربردی است.

حالا کافی است در همین حالت به قسمت راست این ابزار توجه کنید. در این بخش در تب styles تمامی کدهای css و استایل‌های مربوط به عنصر انتخاب شده به شما نمایش داده می‌شود.

۲- تغییر رنگ عناصر و دریافت کد رنگ‌ها

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

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

۳- بررسی نحوه نمایش صفحه وب در موبایل و تبلت

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

موارد گفته شده توضیحاتی ابتدایی برای آشنایی با این ابزار بود تا پاسخی برای سوال ابزارInspector چیست؟ بیابید. کاربردهای این ابزار بسیار فراتر از این مقاله است و سعی می‌کنیم در آینده به آنها بپردازیم.

مطالب زیر را حتما بخوانید

محبوب‌ترین مرورگرهای وب برای برنامه‌نویسان

انواع مختلفی از مرورگرهای وب برای برنامه‌نویسان وجود دارد. هر کدام از این مرورگرها دارای ویژگی‌های منحصر به فرد مربوط...

معرفی لاراگون ، زمپ یا لاراگون؟ کدام یک مناسب کار ما است؟

در این مقاله سعی داریم به معرفی لاراگون بپردازیم. توسعه وب تا حد بسیار زیادی پیشرفت داشته است. در حال...

گوگل ادورز یا گوگل ادز چیست؟‌ و چگونه کار می‌کند؟

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

صفحه فرود یا لندینگ پیج چیست و چه اهمیتی در کسب‌وکارها دارد؟

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

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *