انجمن علمی عمومی ناجی

به نام خدا

در این مقاله سعی داریم تا قابلیت Inspect Element که امکانات فراوانی را در اختیار کاربران نرم افزار موزیلا فایرفاکس قرار می دهد، خدمت شما معرفی کنیم و قسمت های مختلف آن را توضیح دهیم. لطفا ما را همراهی نمایید.

این قابلیت که جزو ابزارهای توسعه وب (Web Developer) در فایرفاکس محسوب می شود، به شما کمک می کند که از کدهای استفاده شده در همه اجزاء صفحه مطلع شوید و بتوانید به خوبی طراحی همه سایت ها را تجزیه و تحلیل نمایید. همچنین می توانید آنها را به صورت آنلاین و البته موقتی! تغییر بدهید و خیلی امکانات دیگر.

ابتدا باید وارد پنجره مربوطه به Inspect Element شویم. برای این کار سه روش وجود دارد:

کلیدهای ترکیبی Ctrl+Shift+C
راست کلیک بر روی صفحه و انتخاب Inspect Element و سپس انتخاب دکمه در سمت چپ پنچره
انتخاب گزینه FireFox از گوشه صفحه، بعد از انتخاب گزینه Web Developer و در آخر انتخاب Inspector

از هر کدام از این روشها که وارد بخش Inspect Element شدید، می توانید با حرکت نشانگر ماوس بر روی قسمتهای سایت و انتخاب هر قسمتی که خواستید از کدهای استفاده شده در آن قسمت که شامل کدهای html و یا css می باشد مطلع شوید.

پس از کلیک روی هر قسمت از صفحه در قسمت سمت چپ می توانید کدهای html و آدرس های لینک ها را مشاهده نمایید و در قسمت سمت راست می توانید کدهای css که مربوط به استایل می باشد را ببینید.

[تصویر: Inspect-Element-1-_-AFzoon.com_.png]

قابلیت Inspect Element

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

از قسمت Font می توانید از فونت های به کار رفته در سایت اطلاع پیدا کنید. برای این کار پس از کلیک بر روی زبانه Fonts بر روی لینک See all the fonts used in the page کلیک نمایید و لیست فونت ها و اطلاعات آنها را مشاهده کنید:

[تصویر: Inspect-Element-fonts_-AFzoon.com_-1024x257.png]

قابلیت Inspect Element – لیست فونتها

و همچنین از قسمت Box Model نیز می توانید از مقادیر Margin و Padding هر جزء مطلع خواهید شد:

[تصویر: Inspect-Element-box-model_-AFzoon.com_-1024x255.png]

قابلیت Inspect Element – box model

حال که به پنجره Web Developer آمدیم، اجازه دهید علاوه Inspect Element بر چند مورد از امکانات بی نظیر این پنجره را در نرم افزار موزیلا فایرفاکس خدمتتان معرفی کنیم.

یکی از قابلیت های ویژه این بخش نمایش سه بعدی (۳D) سایت می باشد. شما با کلیک بر روی شکل مکعب (۳D View) می توانید هر سایتی را به صورت سه بعدی و لایه لایه با قابلیت چرخش ۳۶۰ مشاهده نمایید:

[تصویر: Inspect-Element-3D-View_-AFzoon.com_.png]

قابلیت Inspect Element – نمایش سه بعدی

قابلیت دیگر نمایش سایت به صورت واکنش گرا (Responsive) می باشد. شما با کلیک بر روی دکمه مربع (Responsive Design Mode) همانند شکل زیر می توانید هر سایتی را در اندازه های مختلف تست نموده و تعامل اجزاء سایت را در صفحه نمایش های مختلف مثل تلفن همراه، تبلت و … امتحان کنید:

[تصویر: Inspect-Element-responsive-desifn-model_...n.com_.png]

قابلیت Inspect Element – نمایش سایت به صورت واکنش گرا

دیگر بخش های پنجره Web Developer نیز مفید و مهم هستند. البته امیدوارم خیلی سخت نشده باشه!

هکرمهربون