آموزش اینسپکت المنت (Inspect Element) – جلسه 1

آموزش اینسپکت المنت (Inspect Element): این دوره در رابطه با اینسپکت المنت یا دولوپر تولز (Developer Tools) است. مرورگرهای پیشرفته موجود، ابزاری را تحت عنوان اینسپکت المنت در خود تعبیه کرده اند که قابلیت عیب یابی را به برنامه نویسان وب میدهد.

به وسیله این ابزار میتوان کدهای رندر شده در وب سایت که با زبان های HTML (Hyper Text Markup Language) ، CSS (Cascade Style Sheet) و جاوا اسکریپت (Java Script) نوشته شده است را خواند، بررسی کرد و تغییر داد.

در تصویر زیر، پنجره اینسپکت المنت در مرورگر گوگل کروم (Google Chrome) قابل مشاهده است.

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

• بررسی کدها
• تغییر المنت ها
• تغییر استایل ها
• اضافه کردن استایل
• تب کنسول (Console)
• اجرای کد جاوا اسکریپت در کنسول
• تب سورس (Source Tab)
• تب نتورک (Network Tab)
• اسنیف اطلاعات رد و بدل شده (Sniff Data)
• خواندن هدرهای HTTP
• تغییر سرعت اینترنت
• بررسی ریسپانسیو بودن وبسایت (Responsive)

همچنین در ادامه دوره به بررسی و تغییر برخی از کدهای وب سایت‌هایی مثل اینستاگرام خواهیم پرداخت. تغییراتی مثل :

• ویرایش لایو صفحه
• تغییر قیمت در وبسایت ها
• افزایش فالوور اینستاگرام
• دور زدن نظرسنجی ها
• ذخیره تصاویر از وبسایت ها
• نمایش رمزهای عبور
• تیک آبی اینستاگرام
• ذخیره تصاویر و ویدیوها از اینستاگرام

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

فیلم آموزش اینسپکت المنت (Inspect Element) – جلسه اول

با دقت فیلم آموزشی زیر را نگاه کنید. در هر مرحله در صورت داشتن سوال، نکته و یا ابهام می توانید از طریق قسمت نظرات، با مدرس در ارتباط باشید.

شما با یادگیری این دوره به طور کلی کار با اینسپکت المنت را یاد خواهید گرفت و میتوانید از این علم خود در مرورگرهای دیگر مثل فایرفاکس و … نیز استفاده نمایید.

با استفاده از اینسپکت المنت میتوانید المنت های HTML مربوط به یک صفحه را کنترل نمایید. استایل های آن را تغییر دهید. همچنین میتوانید سورس رندر شده صفحه مورد نظر را مشاهده و ویرایش نمایید.

چندین راه برای اجرای Developer Tools وجود دارد.

• یکی از این راه ها این است که از منوی Settings وارد More Tools شوید و Developer Tools را انتخاب کنید.
• روش بعدی این است که در همان صفحه ای که در حال مشاهده ی آن هستید کلیک راست کرده و گزینه Inspect Element را انتخاب نمایید.
• با استفاده از یکی از Shortcut (میانبر) های موجود روی صفحه کیبورد میتوانید پنجره اینسپکت المنت را باز کنید. این شرتکات ها میتواند شامل موارد زیر باشد :
  • F12
  • Ctrl + Shift + i
  • Ctrl + Shift + j
  • Ctrl + Shift + c

اینسپکت المنت یکی از پرقدرت ترین ابزار هاییست که در اختیار برنامه نویسان وب قرار گرفته. برنامه نویسی وب به طور کلی به دو بخش برنامه نویسی فرانت اند (Front-end Development) و برنامه نویسی بک اند (Back-end Development) تقسیم میشود. شاید باعث تعجب شما شود اگر بگوییم از اینسپکت المنت علاوه بر برنامه نویسی فرانت، میتوان در دیباگ یک سری موارد سمت بک اند هم استفاده کرد.

از موارد استفاده ی اینسپکت المنت در سمت برنامه نویسی فرانت که میتوان به موارد زیادی اشاره کرد. به طور مثال شما میتوانید از اینسپکت المنت زمانی که میخواهید وب سایت خود را بصورت ریسپانسیو طراحی کنید استفاده کنید. با این ابزار به راحتی میتوانید سایت خود را در رزولوشن های مختلف مشاهده کنید و حتی بصورت real time اقدام به ویرایش استایل ها نمایید.

اما موارد استفاده اینسپکت المنت در بک اند چیست؟

به طور کلی وقتی یک درخواست از سمت وب اپلیکیشن یا وب سایت شما به سمت بک اند (که میتواند یک api باشد یا به طور خاص با فرانت سایت در یک لایه قرار گرفته باشد‌) ارسال میشود، این درخواست شامل یک سری header و body میباشد.

مثلا فکر کنید در هنگامی که درخواست ورود به سایت را دارید، پس از این که مقادیر نام کاربری و گذرواژه را وارد کردید و روی دکمه ورود کلیک کردید، یک درخواست (Request) به سمت بک اند ارسال میشود که شامل مواردی است که به همراه این درخواست ارسال میشود. مثلا در اینجا شامل نام کاربری، گذرواژه و عبارت امنیتی یا کپچا میباشد. شما به راحتی میتوانید این موارد را به همراه آدرس ارسالی به بک اند در اینسپکت المنت در تب نتورک یا شبکه (Network) مشاهده نمایید. (در مرورگر فایرفاکس میتوانید این درخواست را ویرایش و مجددا ارسال هم نمایید.)

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

وقتی تصویر قبلی را کمی به سمت پایین اسکرول (Scroll) نماییم، متوجه میشویم که مقادیر نام کاربری و رمز عبوری که وارد کرده ایم چه مقادیری داشته و در حقیقت متوجه این موضوع میشویم که چه دیتا یا اطلاعاتی به سمت سرور یا همان بک اند ارسال شده است.

در مواردی که نیاز داریم تا در سمت سرور (بک اند) بررسی کنیم که آیا مقادیر ورودی به درستی تنظیم (Set) شده اند، میتوانیم با بررسی مقادیر ارسالی از سمت فرانت (همانطور که در تب network در اینسپکت المنت دیدیم) با مقادیری که در سمت کنترلر (Controller) سمت بک اند دریافت کرده ایم متوجه شویم که با هم برابر هستند یا خیر.

امیدواریم که از خواندن این مطالب لذت برده باشید و توانسته باشیم تا شما را با اینسپکت المنت و موارد استفاده ی آن آشنا کرده باشیم. پیشنهاد میکنیم این دوره را که شامل ۷ جلسه میباشد به طور کلی مشاهده نمایید تا دیگر نکته یا ابهامی در خصوص استفاده از اینسپکت المنت در طول فرایند برنامه نویسی برایتان پیش نیاید.