آموزش اینسپکت المنت (آموزش inspect کروم) – جلسه 2

اینسپکت المنت

آموزش اینسپکت المنت (آموزش inspect کروم) – جلسه 2

با قسمت دوم دوره اینسپکت المنت (Inspect Element) در خدمتتون هستیم. این آموزش تحت عنوان آموزش inspect کروم نیز مطرح میشود و در بین کاربران دنیای وب به این نام شناخته می شود.

دوره آموزش inspect کروم برای تمام افرادی که با دنیای وب در ارتباط هستند مناسب است و هیچ محدودیتی در یادگیری وجود ندارد.

درصورتی که قسمت اول این دوره را هنوز مشاهده نکرده اید، میتوانید به آموزش اینسپکت المنت (Inspect Element) – جلسه 1 مراجعه کنید.

در این دوره قراره تا با هم یاد بگیریم که به عنوان یک برنامه نویس Front-end و یا حتی Back-end چطور به درستی از اینسپکت المنت استفاده کنیم. همچنین یک سری ترفند برای کاربرانی که از وب استفاده میکنند در نظر گرفتیم.

این جلسه از آموزش inspect کروم ( اینسپکت المنت ) شامل موارد زیر است :

  • روش های اجرای اینسپکت المنت روی گوگل کروم
  • آشنایی با Shortcut های اینسپکت المنت
  • آشنایی با page source
  • بررسی المنت ها در سایت ویکی پدیا، گوگل و اینستاگرام
  • تغییر در سایت ویکی پدیا، گوگل و اینستاگرام
  • نحوه نمایش اینسپکت المنت در مرورگر
  • نحوه اسکرین شات گرفتن از تغییرات
۶ نظر
  • BM
    ارسال در : ۲۰:۳۱h, ۰۴ اردیبهشت پاسخ
    (5/5)

    با سلام و تشکر از آموزش بسیار خوب اتان ،

    چگونه می توان مکان و مسیر دقیق یک دستور html یا css را در فایل یک وب سایت برای ویرایش دائمی پیدا کرد ؟

    • هولوسن
      ارسال در : ۰۹:۱۰h, ۰۵ اردیبهشت پاسخ

      BM عزیز سلام، امیدوار هستیم که خوب، سرحال و سرشار از حس مثبت باشید.

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

      با تقدیم احترام ، هولوسن

  • BM
    ارسال در : ۱۰:۱۰h, ۰۵ اردیبهشت پاسخ
    (4/5)

    من در لوکال هاست یک قالب جوملا را نصب کردم و حالا می خواهم با inspect مثلا،

    مکان هدر آن قالب را پیدا کنم تا بطور مستقیم کد های html یا css مر بوط به آن را ویرایش کنم ؛

    با inspect چطور این کار را انجام دهم ؟

    متشکرم

    • هولوسن
      ارسال در : ۱۲:۰۷h, ۰۵ اردیبهشت پاسخ

      سلام و عرض ادب مجدد
      وابسته به نوع پروژه، متفاوت می باشد. cms های مثل جوملا و وردپرس و … همگی در سرور فایل های سمت فرانت رو تولید می‌کنند. فایل هایی که مد نظر شما هست روی هاست قرار دارند( حتی لوکال)؛ مثلا هدر، فوتر، و … هر کدام توسط فانکشن هایِ ( بک‌اند) مختلف تولید شده و در انتها به صورت یک صفحه دیداری در فرانت‌اند درمی آیند. پس اگر ضمائم پروژه در بک اند تولید شده باشند و از سمت سرور به فرانت پاس داده شوند، شما در خروجی اینسپکت نمی توانید ببینید.
      با این وجود، در تب sources اینسکپت ساختار درختی از فایل های سایت به نمایش در می آید که می توانید از بیرون به آن دسترسی داشته باشید اما فقط فایل های فرانت در این تب هستند و فایل های بک اند رو نمی توانید مشاهده کنید.

  • سعید صادقی
    ارسال در : ۱۴:۰۷h, ۱۷ دی پاسخ
    (5/5)

    سلام ایا میشه با اینسپکت المنت بعضی از انیمیشن های سایت های کسی دیگه ای رو کشید بیرون؟

    اموزشی چیزی در این رابطه دارید؟؟

    • هولوسن
      ارسال در : ۱۶:۳۱h, ۱۷ دی پاسخ

      سعید صادقی عزیز سلام
      امیدوار هستیم که خوب ، سرحال و سرشار از حس مثبت باشید

      با استفاده از اینسپکت المنت شما قادر خواهید بود cssها ( استایل‌های) از جمله انیمیشن‌های یک سایت را مورد بررسی قرار دهید و در صورت نیاز از آن برای پروژه خود استفاده کنید.
      توصیه میکنیم دوره رایگان آموزش اینسپکت المنت را مشاهده فرمایید.

      با تقدیم احترام، هولوسن

**پرسش و پاسخ** سوال خود مطرح کنید.
امتیاز شما*