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


نویسنده:
دوشنبه ۱۳ بهمن ۱۳۹۹
ابزار 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 چیست؟ بیابید. کاربردهای این ابزار بسیار فراتر از این مقاله است و سعی می‌کنیم در آینده به آنها بپردازیم.

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

بهترین ابزارهای رایگان آنالیز سئو داخلی وب‌سایت (تست شده)

به کمک این ۷ ابزار به صورت رایگان سئو وب سایت خود را بررسی و بهبود ببخشید.

نرم افزار CRM چیست ؟ معرفی و بررسی نرم‌افزاری برای مدیریت ارتباط با مشتری

از این نرم‌افزار جهت پیاده‌سازی استراتژی‌های مدیریتی برای جذب مشتری و فروش بالا در کسب‌وکار استفاده می‌شود.

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

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

راهنمای مراحل ساخت و طراحی ایمیل مارکتینگ

ایمیل مارکتینگ یکی از قدیمی‌ترین و مهم‌ترین روش‌های بازاریابی در دنیای آنلاین است که با اجرای اصولی آن در کسب‌وکارتان...

آموزش تولید محتوای متنی

دوره آموزش تولید محتوای متنی در وب

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

دوره آموزش ووکامرس | ساخت فروشگاه اینترنتی بدون کد نویسی

دوره آموزش ووکامرس | ساخت فروشگاه اینترنتی بدون کدنویسی

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

پکیج آموزش html و css

دوره آموزش HTML و CSS

دوره آموزش HTML و CSS به صورت ویدیویی و پروژه محور : ...

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

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

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

 تا ٪۵۰ تخفیف برای آموزش‌ها در جشنواره پاییزی
مشاهده تخفیفات
close-image