sina salehifard 31 فروردین 1393 بدون نظر 6343 بازدید آموزش HTML
فیلم آموزشی بررسی گزینه ی inspect element برای کدهای html در فایرفاکس

آیا دوست دارید هنگام طراحی وب سایت خود همزمان با مشاهده کدهای html و css، تغییراتی را که در کدها می دهید، در قالب وب سایتتان مشاهده کنید ؟ قابلیت inspect element در مرورگر فایرفاکس این امکان را به شما خواهد داد.

Inspect element (بازرسی عناصر) که جزء ابزارهای توسعه وب (Web Developer) در فایرفاکس محسوب می شود، امکان جذابی است که به طراحان وب اجازه می دهد تا کد html و css مربوط به عناصر را از بین صدها خط کد پیدا کرده و آن را تحلیل نمایند. همچنین می توانند بصورت آنلاین و البته موقتی، کدهای html را تغییر دهند و تاثیر آن را بر روی سایتی که در حال مشاهده یا طراحی آن هستند، ببینند. Inspect کردن کدها در مواقعی که به bug (مشکل) می خورید به شما کمک می کند تا سریع تر و راحت تر مشکل را پیدا کرده و رفع (debug) نمایید. در فیلم آموزشی زیر شما نحوه ی کار با این ابزار فایرفاکس را یاد خواهید گرفت.

فیلم آموزشی بررسی گزینه ی inspect element برای کدهای html در فایرفاکس

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

برسی گزینه ی inspect element برای کد های Html در فایرفاکس

ما برای طراحی وب باید مرورگر ها را بشناسیم و بفهمیم که مرورگر چگونه کدهای ما را تفسیر می کند. تفسیر کدها به معنی رفع ایراد یا ….. می شود.

inspect element

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

in1

in2

وقتی روی عنصری inspect می کنیم، دور آن یک کادری نمایش داده میشود که ما می توانیم به وسیله آن متوجه شویم کدام عنصر را انتخاب کرده ایم.

inspect element دارای تب های مختلفی است. در تب inspecter کد های Html در سمت چپ و کد های css را در سمت راست می توانیم ببینیم.(چون کار ما با html است کاری به تب های دیگر و کد های css در سمت راست نداریم.)

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

in3

 

in4

این امکان در مواقعی که انتظاری از کدی را داشته باشید اما خلاف انتظار شما عمل کند خیلی به شما کمک می کند تا bug (مشکل) صفحه وب خود را برطرف کنید .

دسترسی سریع :

دیدگاه ها بسته شده اند.