معرفی و آموزش تصویری قابلیت قدرتمند inspect در نرم افزار موزیلا فایرفاکس

15392 ۳۱
قابلیت Inspect Element

به نام خدا

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

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

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

[badlist]

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

[/badlist]

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

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

قابلیت Inspect Element | افزون

قابلیت Inspect Element

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

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

قابلیت Inspect Element - لیست فونتها | افزون

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

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

قابلیت Inspect Element - box model | افزون

قابلیت Inspect Element – box model

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

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

قابلیت Inspect Element - نمایش سه بعدی| افزون

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

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

قابلیت Inspect Element - نمایش سایت به صورت واکنش گرا | افزون

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

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

Total 15 Votes
3

درباره کیفیت این مطلب نظرتون چیه?

+ = Verify Human or Spambot ?

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

۳۱ دیدگاه در"معرفی و آموزش تصویری قابلیت قدرتمند inspect در نرم افزار موزیلا فایرفاکس"

  1. minoo

    با سلام لطفا ورژن آخر افزونه ها را معرفی کنید و آموزش بدید مثلا همین افزونه AdblockPlus ورژنهای جدید تری داره که با اینکه درسایت معرفی کردید خیلی فرق داره و اصلاًَ فارسی نمیشه در ضمن اینطور که ما تحقیق کردیم گویا باید لیستی ازسایتها را به این افزونه معرفی کنیم تا جلوگیری کنه از تبلیغاتشون. خلاصه اگر آموزش کاملی در مورد جلوگیری از تبلیغات ناخواسته و صفحات پاپ آپ قرار بدید خیلی خوب میشه.با تشکر فراوان از شما عزیز بزرگوار

    • افزون

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

  2. سجاد

    با تشکر از سایتتون،
    در نسخه های 29 به قبل موقعی که راست کلیک بر روی صفحه و انتخاب Inspect Element و سپس انتخاب دکمه در سمت چپ پنچره(Pick an element from the page) رو انجام میدادیم،پنجره بصورت popup باز میشد و بالای تمام صفحات موجود قرار میگرفت ولی در نسخه های جدید(حتی 32) این قابلیت وجود نداره،چطور این قابلیتو فعال کنم؟با تشکر

    • افزون

      سلام
      تشکر از لطفتون؛ جواب در خود سوال نهفته است! در نسخه جدید هم با راست کلیک و انتخاب Inspect Element می توانید از این قابلیت استفاده نمایید. فقط جای دکمه از سمت چپ پنل به سمت راست تغییر پیدا کرده است. برای popup بودن پنجره یا ادغام آن با صفحه موجود نیز از همان سمت راست قابل تغییر است.
      اگر موفق به دستیابی به این پنجره نشدید، از قسمت سمت راست مرورگر فایرفاکس روی منو کلیک نمایید و گزینه Developer را انتخاب کنید.
      اگر موفق نشدید باز در خدمتیم.

      • سجاد

        سلام…
        من مشکلی با دستیابی به این پنجره ندارم ،میخوام موقعی که روی Pick an element from the page کلیک کردم و بخشی از یک پیج رو روش کلیک کردم پنجره بصورت popup روی پیج ظاهر بشه(درست مثل نسخه های 29 به قبل).الان موقعی که روی Pick an element from the page کلیک میکنم و بخشی از یک پیج رو روش کلیک کردم پنجره بصورت popup هست ولی پشت پیج مرورگره…از dock to bottom of browserیا dock to side of browser نمیخوام استفاده کنم.مرسی

        • افزون

          سلام مجدد
          بله متوجه سوالتون شدم،اما راهی برای on top بودن پنجره inspector به ذهنم نرسید، چون بیشتر ما از همون پنجره ادغام شده استفاده میکنیم. البته باز هم بررسی میکنیم.
          در هر صورت ببخشید که نتونستیم کمکی بکنیم.

  3. amin

    سلام
    من میخواستم قسمتی از سایت رو تغییر بدم.برای همین وارد inspect.. شدم.و متوجه شدم اون قسمت چه ای دی و کلاسی داره.بعدش رفتم وارد وردپرس قسمت ویرایش شدم اما هرچی دنبال همون کلاس و ای دی گشتم نبود.به نظرتون دلیلش چیه؟آیا امکان داره بعضی از فایل ها قایم شد باشند؟!!
    تشکر

    • افزون

      سلام امین جان؛
      بعد از پی بردن به اسم کلاس، برای دسترسی به کلاسهای مورد نظرتون به فایل های CSS قالب مراجعه کنید و با کمک ابزارهای جستجو اون کلاس رو پیدا کنید

  4. amin

    بله.دقیقا از داخل وردپرس رفتم قسمت فایل های css .اما فقط یک فایل css بود که سعی کردم با ctli+F پیدا کنم.اما اونجا هم نبود.
    من تازه با ورد پرس آشنا شدم.احساس میکنم بعضی از فایل ها توی قسمت پیشخوان>نمایش>ویرایشگر نمایش داده نمیشه.نمیدونم درست فهمیدم یا نه.
    الان برای تغییر و ویرایش شدیدا دارم دنبال فایل css یی که نمیدونم کجا قایم شده بگردم!!

  5. فریاد خاموش

    با سلام .بنده یه مشکلی برام پیش امده .یه متنی تو یه سایتی گذاشتم .اما می خوام که پاکش کنم یا اینکه ویرایش کنم به چه صورت می تونم این حرکتو انجام بدم با رجوع به قسمت inspect element هم نتونستم متن و میدیدم ویرایش یا حذوش می کردم اما با یه search دوباره پیداش میشه خواهشن راهنمایی کنید . .با سپاس

    • افزون

      سلام و وقت بخیر
      قابلیت inspect element در مرورگرها برای طراحان و توسعه دهندگان ایجاد شده است و با استفاده از این قابلیت فقط می توانید یک پیش نمایش در سایت مورد تغییر، مشاهده کنید و بعد از refresh دوباره سایت به حالت اول باز میگردد.
      برای تغییر متنتان در سایت مورد نظر با مدیریت آن سایت ارتباط برقرار کنید و خواستار حذف شوید.

    • افزون

      امکان developer مرورگر یه فضایی است که به ما اجازه میده که پشت صحنه یک صفحه وب رو ببینیم و تغییرات رو به صورت پیش نمایش اعمال کنیم و مشاهده کنیم،
      یکی از قسمتهای مهم دولوپر، inspector هست که به شما اجازه انتخاب هر جزء از صفحه رو میده،
      debugger هم از بخشهای دیگر امکان دولوپر هست.

  6. عارف

    با سلام
    من خیلی وقت پیش بود که برای طراحی سایتم از این قابلیت خیلی استفاده میکردم.. اما حالا تو ورژن های جدید فایر فاکس اصلا نمیتونم این گزینه ۳D View رو پیدا کنم… شما اطلاع دارید که چه به سر این قابلیت اومده؟ آیا به کلی حذف شده یا این که محلش قرار گیری اون گزینه تغییر کرده؟ و اگر به کلی حذف شده ایا افزونه دیگری وجود داره که با نصبش در فایرفاکس بشه به همین صورت ازش بهره گرفت؟

    ممنون میشم اگر راهنمایی بفرمایید واقعا به همچین چیزی احتیاج دارم.

  7. عارف

    حیف شد.. با این حال من دیروز افزونه tilt رو پیدا کردم تو بعضی امکانات ممکنه بهتر باشه اما تفکیک رنگ های لایه هاش به گستردگیه افزونه اصلی فایرفاکس نیست ولی خوب از هیچی بهتره

یک دیدگاه بگذارید

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