قصد داریم یک آموزش مقدماتی و توضیحاتی در مورد ابزار inspect element مرور گوگل کروم بدیم ، که اصلا چی هستش ، به چه کاری میاد و … سعی کردیم تا با تصویر آموزش بدیم تا بهتر باشه ، تا انتها با ما باشید.

آموزش inspect element گوگل کروم

inspect element چیست ؟

در واقع inspect element ابزار توسعه دهندگان وب (The Chrome Developer Tools) هستش ، که شدیدا بدرده کاره ما طراحان و کدنویس ها می خوره که می تونیم برای سرعت بخشیدن به کارهامون ازش استفاده های زیادی کنیم.با inspect element یک پنجره در صفحه مرورگر برامون باز میشه که کد های هر قسمت از صفحه که موس ما روش هست رو نشون میده که میتونیم ببینیم ساختار کدها رو و به صورت زنده هم ویرایششون کنیم !

کافیه فقط روی هر قسمت از صفحه سایت راست کلیک کنید و گزینه inspect element  رو بزنید.

آموزش inspect element

کلید میانبر Ctrl + Shift + J هستش و دوستان عزیزی که تاج سر ما هستند ! و سیستم عامل Mac دارند ( Apple!!) از کلید Cmd + Opt + I استفاده کنند.

دیدن سورس html و استایل قالب

وقتی که inspect element رو باز می کنید یک پنجره پایین مرورگر باز میشه که مثل تصویرزیر می تونید کدهای html و شیوه نامه اون عنصر رو مشاهده کنید.

مشاهده سورس html و css قالب

ویرایش کدها و مشاهده تغییرات قالب

سمت راست مثل شکل زیر ، روی هر کجا که موس خودتون رو برده باشید و inspect element زده و div مورد نظر خودتونو انتخاب کرده باشید ،استایل یا شیوه نامه اون قسمت براتون میادش که می تونید همونجا استایل رو ویرایش کنید و همون لحظه تغییرات رو ببینید.برای مثال ما اندازه فونت رو بالا می بریم ( هم میشه تایپ کرد و هم با فلش بالا کیبور انجامش داد ) و تغییرات رو میبینیم.

ویرایش کدها و مشاهده تغییرات قالب

یا تو شکل زیر ما اومدیم رنگ کادر قسمت فروشگاه سایت رو داریم تغییر میدیم و تغییرات رو همون لحظه مشاهده می کنیم.

inspect element و تغییرات رنگ استایل

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

ویرایش ، ذخیره و حذف کدهای html

مثل تصویر زیر رو هر div که راست کلیک کنید گزینه های متععدی مثل copy as html , edit as html و delete node و بقیه موارد رو می تونید ببینید.از هر کدوم می تونید استفاده کنید و کدها رو ویرایش کنید و تغییرات رو ببینید همچنین برای کپی گرفتن سریع کدها میشه ازش استفاده کرد.

ویرایش و کپی گرفتن سورس html

برطرف کردن مشکلات کدهای جاوااسکریپت (Debugging JavaScript)

باید سربرگ sources رو انتخاب کنید و فایل مورد نظرتون رو مشخص کنید و اگر در کدها جایی باگ وجود داشته باشه ایرادشو پیدا و برطرف کنید.

جاوااسکریپت Debugging JavaScript

inspect element خیلی امکانات متععدی داره که خیلی هاشو من خودم بلد نیستم و باید از منابع انگلیسی مطالعه کنید.در زیر لینک منبع خوده گوگل برای مطالعات بیشتر رو قرار میدم.

chrome developer tools (ممکن هستش ارور ۴۰۳ بده و باز نکنه برای ایران ، باید با قند شکنی ، چیزی بازش کنید ! ).

موفق باشید

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 24 رای
Loading...