آشنایی با inspect element گوگل گروم

[Moderator 30]

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

 

 

 

 

 

 

inspect element چیست ؟

 

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

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

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

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

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

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

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

 

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

 

 

 

 

 

 

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

 

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

 

 

 

 

 

 

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

 

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

موفق باشید

[sitesazlio 2]

سلام

دسترسی ها برای اون چطور تعریف میشه ؟

[Configer 526]

ادیت کنید مسیر رو تغریف کنید اینتر بزنید

همچتین با این ابزار میشه قالب ریپ زدteeth