رفتن به مطلب

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


پست های پیشنهاد شده

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

 

 

 

chrome-inspect-element-developer-tools.gif

 

 

 

inspect element چیست ؟

 

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

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

 

 

 

google-chrome-inspect-element.gif

 

 

 

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

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

 

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

 

 

 

inspect-element-html-codes-600x303.gif

 

 

 

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

 

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

 

 

 

inspect-element-edit-font-size.gif

 

 

 

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

 

 

 

inspect-element-color-style.gif

 

 

 

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

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

 

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

 

 

 

edit-copy-as-html-inspect-elements.gif

 

 

 

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

 

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

 

 

 

Debugging-JavaScript-600x169.gif

 

 

 

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

 

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

موفق باشید

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 1 year پیش...
مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...